HTML控制同一网页内两个视频播放进度

最新推荐文章于 2023-11-29 11:01:04 发布

TracelessLe

最新推荐文章于 2023-11-29 11:01:04 发布

阅读量1.2k

点赞数

分类专栏： # HTML 文章标签： html web

本文为原创文章，独家发布在blog.csdn.net/TracelessLe。未经个人允许不得转载。如需帮助请email至tracelessle@163.com。

本文链接：https://blog.csdn.net/TracelessLe/article/details/107997343

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一个使用HTML5和JavaScript实现的视频同步实验。通过监听一个视频的播放、暂停、seeking和seeked事件，使另一个视频保持同步。实验在Chrome浏览器上进行，涉及两个视频元素的事件监听和currentTime属性的同步。

摘要由CSDN通过智能技术生成

实验

本实验基于Chrome浏览器进行。

先构建一个网页，内部包含2个视频。

<!doctype html>
<html>
<head>
<title>HTML5 Synchronize Video Test</title>
</head>
<body>
<h1>HTML5 Synchronize Video Test</h1>
<div>
    <video id="v1" controls src="video_001.mp4" style="width:256px" muted="true">
    </video>

    <video id="v2" controls src="video_001_copy.mp4" style="width:256px">
    </video>
</div>

</body>
</html>

加入播放进度控制脚本（script）：

<script>
    // sync 2nd (right) video to playing position of 1st (left) video
    window.onload = function(){
        var v1 = document.getElementById('v1');
        
        v1.addEventListener("play", function() {
        document.getElementById('v2').play();
        });
        
        v1.addEventListener("pause", function() {
        document.getElementById('v2').pause();
        });
        
        v1.addEventListener("seeking", function() {
        document.getElementById('v2').currentTime = v1.currentTime;
        });
        
        v1.addEventListener("seeked", function() {
        document.getElementById('v2').currentTime = v1.currentTime;
        });
    }
    </script>