Question

我有两个被隐藏的div，当你点击其中一个按钮时，我将显示无显示改为显示块并使视频可用。

  .row.hidden.overflowHidden(data-park="hollywood")
        .col2-3.title(style="padding:0px;")
          div(style="padding:27px;")
            h3 Get the star treatment!
            h2 Universal Studios Hollywood&trade;
          //- .videoContainer.mobilehide
          //-   iframe( class="videoClass mobilehide" src='https://www.youtube.com/embed/xRUDijZgyHc?rel=0', frameborder='0', allowfullscreen='')
          div
            iframe( height="400" width="100%" src='https://www.youtube.com/embed/xRUDijZgyHc?rel=0', frameborder='0', allowfullscreen='')
        .details.col1-3
          div
            h4 You could win a 3-night trip for four.
            p Prize includes:
            ul
              li Round-trip airfare to Los Angeles, California 
              li Ground transportation between the airport and hotel in Los Angeles
              li General Admission tickets for four to Universal Studios Hollywood&trade; theme park
              li Hotel accommodations

这是一个视频示例，当我点击另一个链接时，它会将该块转回显示隐藏状态，并将下一个视频显示为阻止。但是切换到隐藏显示的那个继续在后面播放。

当用户点击下一个视频并将该视频切换回隐藏显示时，有没有办法停止该视频？

Answer 1

要停止播放视频，您可以使用pause()方法。如果您想将它倒回到开头，请使用currentTime属性。

示例：

var video = document.getElementById("myVideoPlayer");
video.pause();
video.currentTime = 0;

Answer 2

由于您的视频是嵌入式YouTube视频，因此您可以利用YouTube iframe javascript API ...

在您的嵌入链接中附加？enablejsapi = 1：

src='https://www.youtube.com/embed/xRUDijZgyHc?rel=0&enablejsapi=1'

然后，跟踪点击event handler中变量中最初点击的视频元素：

// You might consider giving your iframe elements a specific ID or class for more precise selection var player = document.getElementsByTagName("div iframe")[0];

点击下一个视频后，请致电：

player.pauseVideo();

如何在用户点击视频时停止播放视频？

2 个答案: