html videoタグの制御に関する質問です。

投稿者: Anonymous

以下のように複数の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>

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

解決

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

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_


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

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *