javascript - 同时运行2个html视频JS
问题描述
我想同时播放 2 个 html 视频(并排)。
我做了一个按钮,click
上面有一个 EventListener。这个监听器触发 2<video>
标签来播放它,但我认为在第二个触发时会有150 ms
延迟。play
索引.html
<section>
<video src="source1" id="video1"></video>
<video src="source2" id="video2"></video>
<button id="play">Play</button>
</section>
这是基本的script.js文件。
const $video1 = document.getElementById('video1');
const $video2 = document.getElementById('video2');
const $play = document.getElementById('play');
const playVideo = () => {
$video1.play();
$video2.play();
};
$play.addEventListener('click', playVideo);
这2个视频几乎相同,除了第一个视频大小约为12MB,另一个约为20MB
我尝试了什么:
尝试添加一个console.time('video')
可以记录每个play
函数调用之间的延迟,但在每个环境中可能不同。
解决方案
我知道同步播放视频的唯一方法是发出自定义事件以在 requestAnimationFrame 中同步视频:
var videos = {
a: Popcorn("#a"),
b: Popcorn("#b"),
},
scrub = $("#scrub"),
loadCount = 0,
events = "play pause timeupdate seeking".split(/\s+/g);
// iterate both media sources
Popcorn.forEach(videos, function(media, type) {
// when each is ready...
media.on("canplayall", function() {
// trigger a custom "sync" event
this.emit("sync");
// set the max value of the "scrubber"
scrub.attr("max", this.duration());
// Listen for the custom sync event...
}).on("sync", function() {
// Once both items are loaded, sync events
if (++loadCount == 2) {
// Iterate all events and trigger them on the video B
// whenever they occur on the video A
events.forEach(function(event) {
videos.a.on(event, function() {
// Avoid overkill events, trigger timeupdate manually
if (event === "timeupdate") {
if (!this.media.paused) {
return;
}
videos.b.emit("timeupdate");
// update scrubber
scrub.val(this.currentTime());
return;
}
if (event === "seeking") {
videos.b.currentTime(this.currentTime());
}
if (event === "play" || event === "pause") {
videos.b[event]();
}
});
});
}
});
});
scrub.bind("change", function() {
var val = this.value;
videos.a.currentTime(val);
videos.b.currentTime(val);
});
// With requestAnimationFrame, we can ensure that as
// frequently as the browser would allow,
// the video is resync'ed.
function sync() {
if (videos.b.media.readyState === 4) {
videos.b.currentTime(
videos.a.currentTime()
);
}
requestAnimationFrame(sync);
}
sync();
html{font-family:arial;}
<script src="https://static.bocoup.com/js/popcorn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video height="180" width="300" id="a" controls>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.ogv"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.webm"></source>
</video>
<video height="180" width="300" id="b">
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.ogv"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.webm"></source>
</video>
<input type="range" value="0" id="scrub" />
参考: https ://bocoup.com/blog/html5-video-synchronizing-playback-of-two-videos
推荐阅读
- javascript - NODE JS 错误:con.query(...).then 不是函数
- firebase - Firestore 规则在模拟器中有效,但在网站上无效
- python - 返回答案而不用cherrypy完成函数
- asp.net - 应用程序池回收后 WebForms 请求超时
- c++ - 在 Windows 7 上拆分 DNS
- c# - MapHttpRoute 和 Swagger
- amazon-web-services - vpc_security_groups 中的 Terraform 插值
- spring - Spring Security 捕获 RuntimeException
- java - 无法从 Arraylist 获取全部数据
- python - 气流,有没有办法提供有关可以在控制台上显示的任务的元数据