如何在HTML5中同步播放视频？
如何在HTML5中同步播放视频？
提问于 2013-04-01 23:08:54
我有5-8个视频，每个最多1-2分钟。
所有的视频将是相同的，具有相同的持续时间。唯一的区别是对它们中的每一个应用不同的过滤器。
如何确保所有视频同时运行，使用户看不到差异？
应该让所有的视频在我显示它们之前被缓冲吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-02 01:16:28
取决于它的精确度和用户应该能做什么，我认为这要么很简单，要么很难:) Html5rocks在视频标签上有一些很好的材料。下面的代码片段在两个不同的视频标签中使用相同的源视频，并在它们都准备好播放时播放它们：
<html>
<body>
<video controls id="vid1" preload="metadata"> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=676422 -->
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4" />
<source src="http://html5demos.com/assets/dizzy.webm" type="video/webm" />
<source src="http://html5demos.com/assets/dizzy.ogv" type="video/ogg" />
</video>
<video controls id="vid2" preload="metadata"> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=676422 -->
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4" />
<source src="http://html5demos.com/assets/dizzy.webm" type="video/webm" />
<source src="http://html5demos.com/assets/dizzy.ogv" type='video/ogg' />
</video>
<script>
var vid1 = document.getElementById("vid1");
var vid2 = document.getElementById("vid2");
var count = 0;
var playthem = function(e) {
count++;
if(count > 1) {
alert('playing');
vid1.play();
vid2.play();
}
}
vid1.addEventListener('canplay', playthem, false);
vid2.addEventListener('canplay', playthem, false);
</script>
</body>
</html>这在我的机器上运行得很好，但我不确定它在旧硬件上是不是可以。如果你需要视频完全同步，另一种方法是使用video+svg。下面的代码使用单个视频标签和svg过滤器来“复制”该视频标签。这种方法的好处是确保您只加载单个视频，并且通过javascript控制它将会更简单(因为只有一个视频源)。
<div style="filter:url(#f2)">
<video style="filter:url(#f1)" controls id="vid1" preload="metadata"> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=676422 -->
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4" />
<source src="http://html5demos.com/assets/dizzy.webm" type="video/webm" />
<source src="http://html5demos.com/assets/dizzy.ogv" type="video/ogg" />
</video>
</div>
<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" height="200%" width="140%" transform="translate(90,0)">
<feOffset dx="0" dy="360" result="B"/>
<feMerge>
<feMergeNode in="B"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="f2">
<feOffset dx="480" dy="0" result="B"/>
<feMerge>
<feMergeNode in="B"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15745962
复制相关文章
相似问题
腾讯云开发者
