web-dev-qa-db-ja.com

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

1つの動画要素で2つの異なる動画を再生しようとしていますが、2つのソースを配置しても最初の動画しか再生されません。 jQueryでこれを行う必要がありますか？コード（HTML）：

<video autoplay loop id="bbgVid">
<source src="style/mpVideos/mpv1.mp4" type="video/mp4">
<source src="style/mpVideos/mpv2.mp4" type="video/mp4">
</video>
javascriptjqueryhtmlhtml5video
13
Jojo01

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

質問にあるように、ソースが異なるvideoタグが1つだけであることに言及していますが、これは可能性です。アイデアは次のとおりです。

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

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/

25
Alvaro Montoro