Question

我有5-8个视频，每个最多1-2分钟。

所有视频都是相同的，持续时间相同。唯一的区别是应用于每一个的不同过滤器。

如何确保所有视频同时运行，以便用户无法看到差异？

在显示之前是否应该暂停所有视频？

Answer 1

取决于它的准确程度和用户应该做的事情，我认为它既简单又非常难:) 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>

这在我的机器上运行良好，但我不确定在旧硬件上它会如何。如果您需要视频完美同步的另一种方法是使用视频+ 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>

如何在HTML5中同步播放视频？

1 个答案: