我的页面上有四个视频，但我想一次播放一个视频

Question

在当前情况下是单击播放视频后播放所有四个视频。我想同时播放一个视频，如果正在播放一个视频，则其他三个视频无法播放。

我的代码：

<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>

我正在尝试使用波纹管脚本停止其他视频：

<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>

视频是从数据库动态获取的。我不知道我在代码中哪里写错了。请帮助我。

Answer 1

将播放绑定应用于视频标签。在那暂停所有其他视频。不确定，但希望它对您有用

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

Answer 2

此问题已在stop all videos when a new video is played处回答

您需要看的几件事是：

• 所有URL以https://www开头
• enablejsapi = 1已添加到URL，并且
• 如何在onPlayerStateChange中检索当前播放器的来源

希望对您有帮助！