flv 视频播放加载延迟，双击放大处理

最新推荐文章于 2024-08-13 14:45:04 发布

原创最新推荐文章于 2024-08-13 14:45:04 发布 · 991 阅读

7 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

20 篇文章

订阅专栏

博客围绕flv视频展开，涉及播放加载延迟问题以及双击放大的处理。虽未给出具体内容，但核心聚焦于flv视频在播放过程中的这两个关键方面，属于信息技术中视频处理相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>
    <style>
        .mainContainer {
    display: block;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
}
 
.urlInput {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    margin-bottom: 8px;
}
 
.centeredVideo {
    display: block;
    width: 100%;
    height: 576px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
}
 
.controls {
    display: block;
    width: 100%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
</style>
</head>
 
<body>
    <div class="mainContainer">
        <video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
    </div>
    <br>
    <div class="controls">
        <button onclick="flv_start()">开始</button>
        <button onclick="flv_destroy()">停止</button>
        <button onclick="down()">向下</button>
        <button onclick="up()">向上</button>
        <button onclick="left()">向左</button>
        <button onclick="right()">向右</button>
        <button onclick="topClick()">暂停旋转</button>
    </div>
    <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>   
    <script>
        var player = document.getElementById('videoElement');
        if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer(
                {
            type: "flv",
            isLive: true,
            url: 'flv 地址',
          },
          {
            cors: true, // 是否跨域
            enableWorker: true, // 是否多线程工作
            enableStashBuffer: false, // 是否启用缓存
            stashInitialSize: 128, // 缓存大小(kb)  默认384kb
            autoCleanupSourceBuffer: true, // 是否自动清理缓存
          }
            );
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //加载
            handleFullScreen(player)

        }
        
        // 处理视频延迟，手动跳帧
        function setIntervalFn() {
          setInterval(() => {
            const end = player.buffered.end(0);  // 视频结尾时间
            const current = player.currentTime;  //  视频当前时间
            const diff = end - current;// 相差时间
            console.log("********difffff**********",diff); 
            const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
            const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
            const maxPlaybackRate = 4;// 自定义设置允许的最大播放速度
            let playbackRate = 1.0; // 播放速度
            if (diff > diffCritical) {
              console.log("相差超过4秒，进行跳转");
              player.currentTime = end - 1.5;
              playbackRate = Math.max(1, Math.min(diffCritical, 16));
            } else if (diff > diffSpeedUp) {
              console.log("相差超过1秒，进行加速");
              playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16))
            }
            player.playbackRate = playbackRate;
            if (player.paused) {
                flvPlayer.play()
            }
            }, 2000)
        }
 
        function flv_start() {
            player.play();
            setIntervalFn()
            setIntervalFn()
        }
        // 双击放大处理
        function handleFullScreen (btnFullScreen) {
            btnFullScreen.addEventListener('dblclick', () => {

                console.log('双击了子元素， *****')
                if (btnFullScreen.requestFullscreen) {
                btnFullScreen.requestFullscreen()
                } else if (btnFullScreen.mozRequestFullScreen) {
                btnFullScreen.mozRequestFullScreen()
                } else if (btnFullScreen.webkitRequestFullscreen) {
                btnFullScreen.webkitRequestFullscreen()
                } else if (btnFullScreen.msRequestFullscreen) {
                btnFullScreen.msRequestFullscreen()
                }
            }, false)
        }
        function flv_pause() {
            player.pause();
        }
 
        function flv_destroy() {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }
 
        function flv_seekto() {
            player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
        }
        function up() {
            
        }
        function left() {
           
        }
        function down() {
         
        }

        function right() {
   
        }
        function topClick() {
       
        }
        </script>
</body>
 
</html>