1

以下のように複数のvideoタグがあり、どれかが再生された時に既に再生されているものを停止する(常に再生されているものは1つ)という実装はどのようにすれば行えるでしょうか。

<video id="myvideo1" class="video-js" controls autoplay preload="none" onclick="this.play()" onplay="trackMoviePlay(1)" style="width: 100%;position: relative; height: 190px;" poster="<?= $get_item["img"]; ?>" data-setup="{}">
                <source src="<?= $videos["mp4"]; ?>" type='video/mp4'>
                <source src="<?= $videos["mp4"]; ?>" type='video/quicktime'>
</video>
<video id="myvideo2" class="video-js" controls preload="none" onclick="this.play()" onplay="trackMoviePlay(2)" style="width: 100%;position: relative; height: 190px;" poster="<?= $get_item["img"]; ?>" data-setup="{}">
                <source src="<?= $videos["mp4"]; ?>" type='video/mp4'>
                <source src="<?= $videos["mp4"]; ?>" type='video/quicktime'>
</video>
<video id="myvideo3" class="video-js" controls preload="none" onclick="this.play()" onplay="trackMoviePlay(3)" style="width: 100%;position: relative; height: 190px;" poster="<?= $get_item["img"]; ?>" data-setup="{}">
                <source src="<?= $videos["mp4"]; ?>" type='video/mp4'>
                <source src="<?= $videos["mp4"]; ?>" type='video/quicktime'>
</video>

詳しい方、ご教示ください。宜しくお願い致します。

1 件の回答 1

2

videoは再生された段階でplayイベントが発火されるので、そのリスナーで他のvideoを停止させる処理をすればいけると思います。
以下は一例ですが、elementsでビデオをすべて保持し、それぞれにリスナーをつけています(ご質問ではonplayプロパティでなされていることを自動化)。イベントが発火するとelementsをイテレートして自分以外すべての動画止まっていないか確認してからpause()で止めるようにしています。

var className = "video-js";
var elements = document.getElementsByClassName(className);

//すべてのビデオエレメントをイテレート
for (var elem of elements) {
  //ビデオエレメントにplayイベントのリスナーを追加
  elem.addEventListener("play", function(e) {
    //すべてのビデオエレメントをイテレート
    for (var _elem of elements) {
      //もしイベントが発行された本体(再生された動画、e.target)ではなく、一時停止中でもなければpause()で一時停止
      if (e.target !== _elem && !_elem.paused) {
        _elem.pause();
      }
      //!_elem.pausedで一時停止を確認していますがなくても動きます。何となくつけただけです。
    }
  }, false);
}
<p>
  <video class="video-js" controls>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>

  <video class="video-js" controls>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>

  <video class="video-js" controls>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
</p>

<p>
  以下はclassを設定していないので影響されない
  <video class="" controls>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
  <p>


サンプル動画はw3schools.comでサンプルように配信されているBig Buck Bunnyをお借りしました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。