LargeScreen
/
large-vue


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
							<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
    <title>直播</title>
    <style>
        body, html {
            padding: 0;
            margin: 0;
        }

        .mainContainer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }

        .urlInput {
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .centeredVideo {
            display: block;
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }

        .controls {
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 10px;
        }

        .logcatBox {
            border-color: #CCCCCC;
            font-size: 11px;
            font-family: Menlo, Consolas, monospace;
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>

<div class="mainContainer">
    <video name="videoElement" class="centeredVideo" id="videoElement" controls autoplay>
        Your browser is too old which doesn't support HTML5 video.
    </video>

</div>

<script src="./flv.min.js"></script>
<script src="./jquery-3.1.1.js"></script>

<script>
    function getQueryString(field) {
        var reg = new RegExp("(^|&)" + (field || "id") + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            var value = r[2];
            if (value === "") {
                return null;
            } else {
                return decodeURIComponent(value);
            }
        }
        return null;
    }
</script>

<script type="text/javascript">
    if (flvjs.isSupported()) {
        var url = getQueryString("url");
        url && startVideo(decodeURIComponent(url));
    }

    function ajaxData() {
        var id = getQueryString("id");
        $.ajax({
            type: 'get',
            async: true,
            url: 'http://192.168.1.192:8084/camera/openCamera?id=' + id,
            data: null,
            success: function (data) {
                if (data.code == 200) {
                    var videoUrl = data.data;
                    startVideo(videoUrl)
                } else {
                    alert("直播视频加载失败！")
                }
            }
        });
    }

    var flvPlayer;

    function startVideo(videoUrl) {
        var videoElement = document.getElementById('videoElement');
        flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            url: videoUrl,

            hasAudio: false,
            hasVideo: true,
            stashInitialSize: 128,
            enableStashBuffer: true, //开启缓冲区


            //enableWorker: false, //不启用分离线程
            //enableStashBuffer: false, //必须,关闭IO隐藏缓冲区
            reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
            autoCleanupSourceBuffer: true //自动清除缓存

        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();//不用打开

        //flv播放时间越长延迟越长
        //必需:获取时间跟不上帧数的问题
       // setInterval(() => {
       //     if (videoElement.buffered.length) {
       //         let end = videoElement.buffered.end(0); //获取当前buffered值
       //         let diff = end - videoElement.currentTime; //获取buffered与currentTime的差值
       //         if (diff >= 2.0) {
       //             //如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
       //             //需要1.5秒的缓冲，不然会不断出现卡顿现象
       //             //2.0=1.5 + 0.5,跳帧0.5秒，这样每秒都可以显示出来
       //             videoElement.currentTime = videoElement.buffered.end(0) - 1.5;
       //         }
       //     }
       // }, 2000); //2000毫秒执行一次

       flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
           console.log('flv error');
           //alert("flv error");
           // reloadVideo();

       });
    }

    function destoryVideo() {
        flvPlayer.pause();
        flvPlayer.unload();
        flvPlayer.detachMediaElement();
        flvPlayer.destroy();
        flvPlayer = null;
    }

    function reloadVideo() {
        destoryVideo();
        startVideo();
    }
</script>

</body>

</html>