当用户点击离开视频时，如何让视频停止？答案

【问题标题】：How to make a video stop when a user clicks away from it?当用户点击离开视频时，如何让视频停止？
【发布时间】：2018-01-26 17:32:48
【问题描述】：

我有两个隐藏的 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

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

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

【问题讨论】：

你能发布格式正确的代码吗？

标签： javascript html css video youtube

【解决方案1】：

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

例子：

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

【讨论】：

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

【讨论】：

用 jQuery 代码回答没有 jQuery 标签的问题不是一个好主意。有些人会因此而对你投反对票。
感谢您的来电！下次我会多注意标签的。
不要等到下一次，你现在可以编辑你的答案并提供一个普通的 JavaScript 答案。这只是yourHiddenVideoVariable.pause()。如果你喜欢，你也可以保留 jQuery 代码，但要提到它是为 jQuery 准备的。欢迎来到 SO 并感谢您的贡献。
谢谢，拉西尔！我将我的答案更新为更相关且希望对您有所帮助的内容。