1

5 ～ 8 本の動画があり、それぞれ最大 1 ～ 2 分です。

すべてのビデオは同じ長さで同じになります。唯一の違いは、それらのそれぞれに適用される異なるフィルターです。

ユーザーが違いを認識できないように、すべてのビデオが同時に実行されるようにするにはどうすればよいですか?

表示する前にすべてのビデオをバッファリングする必要がありますか?

4

1 に答える 1

0

それがどれだけ正確でなければならないか、そしてユーザーが何をできるべきかによって、単純か非常に難しいかのどちらかだと思います:) 以下のコード スニペットは、2 つの異なる動画タグで同じソース動画を使用し、両方の再生準備が整ったら再生します。

<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 による制御がより簡単になることです (ビデオ ソースが 1 つしかないため)。

<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 に答える