HTML5ビデオで1つのビデオ要素で2つのビデオを再生する方法質問する

Question

コメントで述べたように、ソースのリストはプレイリストではなく、代替ソースのセットです。ブラウザがサポートされているソースを見つけると、残りは無視されます。必要なことを実現するには、JavaScript を使用する必要があります (1 つまたは 2 つのビデオタグを使用するのではなく)。

質問にあるように、video異なるソースを持つタグを 1 つだけ持つという方法もありますが、その可能性は次のとおりです。

ムービーの最後にイベントリスナーを追加します。
ビデオが完了したら、videosrc を次の src に変更します。source
このソリューションでは、すべてのソースビデオがサポートされることが考慮されていることに注意してください。

JavaScript では次のようになります。

var myvid = document.getElementById('myvideo');

myvid.addEventListener('ended', function(e) {
  // get the active source and the next video source.
  // I set it so if there's no next, it loops to the first one
  var activesource = document.querySelector("#myvideo source.active");
  var nextsource = document.querySelector("#myvideo source.active + source") || document.querySelector("#myvideo source:first-child");
  
  // deactivate current source, and activate next one
  activesource.className = "";
  nextsource.className = "active";
  
  // update the video source and play
  myvid.src = nextsource.src;
  myvid.play();
});

<video id="myvideo" width="320" height="240" controls style="background:black">
  <source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>

ビデオはW3Schools HTML5 ビデオページ。

コメントで Kaiido が指定しているように、より簡単な代替案としては、ビデオの直下に複数のソースを置くのではなく、JavaScript の配列にビデオのリストを入れて、videoそれに応じてソースを更新することです。

var myvid = document.getElementById('myvideo');
var myvids = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
var activeVideo = 0;

myvid.addEventListener('ended', function(e) {
  // update the new active video index
  activeVideo = (++activeVideo) % myvids.length;

  // update the video source and play
  myvid.src = myvids[activeVideo];
  myvid.play();
});

<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" controls style="background:black">
</video>

この JSFiddle でも動作を確認できます:http://jsfiddle.net/bnzqkpza/

Answer 1