javascript - 如何在用户点击离开时停止播放视频？

Question

我有两个隐藏的 div，当您单击两个按钮之一时，我将不显示更改为显示 block 并使视频可以播放。

  .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™
          //- .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™ theme park
              li Hotel accommodations

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

当用户点击下一个视频并将该视频切换回隐藏显示时，是否有任何方法可以停止该视频？

Answer 1

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

例子:

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