如何在单击取消按钮时停止/暂停嵌入？答案

【问题标题】：How to stop/pause an embedded on clicking a cancel button?如何在单击取消按钮时停止/暂停嵌入？
【发布时间】：2016-10-27 18:31:28
【问题描述】：

我有一个覆盖 div 上的视频，该视频在单击按钮时打开。我在视频上有一个取消按钮，点击它应该关闭覆盖以及停止/暂停视频。这就是我正在做的 -

<html>
<head>
<style>
div#overlay {
    display: none;
    z-index: 2;
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
}
    div#specialBox {
    display: none;
    position: fixed;
    z-index: 3000;
    height: 100%;
    width: 100%; 
    background: #FFF;
    color: #000;
}
div#wrapper {
    position:absolute;
    top: 0px;
    left: 0px;
    padding-left:24px;
}
.closebtn 
{
    position: absolute;
    top: 0%;
    right: 45px;
    font-size: 40px;
}
</style>

<script>
function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
    } 
    else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
    }
}
function pauseVideo()
{
     var vid = document.getElementById('myVid');
     vid.pause();
}
</script>
</head>

<body>
<!-- Start Overlay -->
    <div id="overlay">
<!-- End Overlay -->
<!-- Start Special Centered Box -->
        <div id="specialBox">
            <iframe id="myVid" src="https://player.vimeo.com/video/183364240title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0"></iframe>
            <div class="closebtn">
                <a href="javascript:void(0)" onclick="toggleOverlay(); pauseVideo()">&times;</a>
            </div>
        </div>
<!-- End Special Centered Box -->
    </div>
<!-- Start Normal Page Content -->
<div id="wrapper">
     <button onmousedown="toggleOverlay()">Apply Overlay</button>
</div>
<!-- End Normal Page Content -->
</body>
</html>

所以，当我单击取消按钮时，我想关闭覆盖 div（正在发生）以及暂停视频。谁能告诉我哪里出错了？

【问题讨论】：

标签： javascript html css iframe webpage

【解决方案1】：

您不能暂停 iframe 以停止在其中运行的视频（虚拟）:)。由于您使用 vimeo 链接，因此您将不得不使用 vimeo api。要做到这一点，请执行以下操作：

将带有 vimeocdn 的脚本标签添加到 froogaloop2.js 如下

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

下一步：在视频网址中添加 api=1 查询字符串，如下所示：（注意您的视频网址缺少 ? 导致视频无法加载）

https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0

最后：将以下代码放入您的pauseVideo 函数中：

function pauseVideo()
{
  var players;
  players=$('#myVid');

  $f(players[0]).api('pause');
}

这应该可以满足您的需求。（注：对于youtube视频，您可能需要使用youtube api方法和程序）

示例代码：http://codepen.io/Nasir_T/pen/pEmEJE

希望这会有所帮助。

【讨论】：

您不能暂停 iframe 以停止在其中运行的视频 - 您能解释一下吗？此外，当我再次单击应用叠加按钮时，我需要从头开始播放视频。有什么帮助吗？
只需更改 $f(players[0]).api('pause'); 中的暂停即可关闭后再次单击“应用叠加”按钮时，要卸载并重新启动视频。
太棒了。再次感谢！
在 iframe 停止问题上，您的停止功能带有 var vid = document.getElementById('myVid'); vid.pause();实际上是在 html 中获取 iframe 元素并调用它的停止方法，我认为它不存在。您需要在 iframe 中访问播放器以调用它的 api pause 方法来暂停视频。希望能回答你的问题。
另外，如果视频播放完毕，我希望叠加层自行关闭。对此有何想法？