javascript - 我的页面上有四个视频，但我想一次播放一个视频(I have four video on my page but I want to play one video at time)

Question

In current situation is all four video play after click play video.

(在当前情况下，单击播放视频后将全部播放四个视频。)

I want to play one video at time other 3 videos not play if one video is playing.

(我想同时播放一个视频，如果正在播放一个视频，则其他三个视频无法播放。)

My code:

(我的代码：)

<section id="gallery" class="bg-lighter">
      <div class="container-fluid pt-70 pb-0">
        <div class="section-content">
          <div class="row">
            <div class="col-md-12">
              <div id="grid" class="gallery-isotope grid-4 gutter clearfix">

                <?php if(!empty($page_info[0]['link1'])){ ?>
                <div class="gallery-item photography">
                   <div class="price pt-30">
                        <h5 class="text-uppercase letter-space-2"></h5>
                      </div>
                  <div class="thumb galerryVideoCopy inset">
                    <iframe width="972" class="yt_players" height="547" id="link1" src="https://youtube.com/embed/<?php print_r($page_info[0]['link1']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"   allowfullscreen></iframe>

                  </div>
                </div>
               <?php } ?>

                  <?php if(!empty($page_info[0]['link2'])){ ?>
                <div class="gallery-item branding">
                    <div class="price pt-30">
                        <h5 class="text-uppercase letter-space-2"></h5>
                      </div>
                  <div class="thumb galerryVideoCopy inset">
                   <iframe width="972" class="yt_players" id="link2" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link2']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"   allowfullscreen></iframe>

                  </div>
                 </div>
                 <?php } ?>

              <?php if(!empty($page_info[0]['link3'])){ ?>
                <div class="gallery-item design">
                    <div class="price pt-30">
                        <h5 class="text-uppercase letter-space-2"></h5>
                    </div>
                  <div class="thumb galerryVideoCopy inset">
                   <iframe width="972" class="yt_players" id="link3" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link3']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"   allowfullscreen></iframe>

                  </div>
                </div>
                <?php } ?>


                  <?php if(!empty($page_info[0]['link4'])){ ?>
                <div class="gallery-item photography">
                   <div class="price pt-30">
                        <h5 class="text-uppercase letter-space-2"></h5>
                      </div>
                  <div class="thumb galerryVideoCopy inset">
                    <iframe width="972" class="yt_players" id="link4" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link4']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"   allowfullscreen></iframe>

                  </div>
                 </div>
                  <?php } ?>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

I am trying to stop other videos with bellow script:

(我正在尝试使用以下脚本停止其他视频：)

<script type="text/javascript">
   players = new Array();
   function onYouTubeIframeAPIReady() {
    var temp = $("iframe.yt_players");
    for (var i = 0; i < temp.length; i++) {
        var t = new YT.Player($(temp[i]).attr('id'), {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
        players.push(t);
    }
}
onYouTubeIframeAPIReady();

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        var temp = event.target.getVideoUrl();
        var tempPlayers = $("iframe.yt_players");
        for (var i = 0; i < players.length; i++) {
            if (players[i].getVideoUrl() != temp) players[i].stopVideo();
        }
    }
}
</script>

Videos are dynamic fetch from the database.

(视频是从数据库动态获取的。)

I do not know where I am wrong in code.

(我不知道我在代码中哪里写错了。)

Please help me with this.

(请帮我解决一下这个。)

  ask by farhantechno translate from so

Answer 1

Apply play binding to the video tag.

(将播放绑定应用于视频标签。)

In that pause all the other video.

(在那暂停所有其他视频。)

Not sure but hope it will work for you

(不确定但希望它对您有用)

    $('video').bind('play', function (e) 
    {
        var video = $('video');
        for(var i=0;i<video.length;i++)
        {
            if(video[i] != e.target)
            {
               video[i].pause();
            }
        }
    });