28785


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

[code]

    <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>
    
[/code]

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


CC BY-SA 3.0
2016-09-09T06:53:50.283
28779
2016-09-09T13:21:27.497
2016-09-09T11:45:31.710
8619
8619
question
javascript html
html videoタグの制御に関する質問です。


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

[code]

    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);
    }
[/code]

[code]

    <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>
[/code]

* * *

サンプル動画は[w3schools.com](http://www.w3schools.com/html/html5_video.asp)でサンプルように配信されている[Big
Buck Bunny](https://peach.blender.org/)をお借りしました。


CC BY-SA 3.0
2016-09-09T12:24:46.217
28785
2016-09-09T13:21:27.497
2016-09-09T13:21:27.497
3974
3974
28779
answer