1

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

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

如何确保所有视频同时运行，这样用户就看不到差异？

在我展示之前应该让所有视频都被缓冲吗？

4

1 回答 1

0

取决于它必须有多准确以及用户应该能够做什么，我认为它要么简单，要么非常困难：) 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>
于 2013-04-01T17:16:28.380 回答