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

【问题标题】：I have four video on my page but I want to play one video at time我的页面上有四个视频，但我想一次播放一个视频
【发布时间】：2020-03-23 17:49:35
【问题描述】：

目前的情况是点击播放视频后所有四个视频播放。我想在播放一个视频时播放一个视频，如果一个视频正在播放，其他 3 个视频不播放。

我的代码：

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

视频是从数据库中动态获取的。我不知道我的代码哪里错了。请帮我解决这个问题。

【问题讨论】：

能否检查一下是否有冒泡效果并尝试使用：event.stopPropagation();让我知道。
@Gulshan 在我的页面加载中没有自动播放视频。当我点击然后视频然后它播放但我点击所有四个视频它播放所有四个视频。如果一个视频正在播放，我想停止其他视频

标签： javascript php jquery codeigniter youtube-iframe-api

【解决方案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();
            }
        }
    });

【讨论】：

那是因为pause是一个DOM函数。所以你需要通过video[i].get(0).pause();访问它

【解决方案2】：

这个问题已经在stop all videos when a new video is played回答了

你需要看的几件事是：

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

希望对你有帮助！

【讨论】：