如何 stop/pause 嵌入点击取消按钮？

Question

我在叠加层 div 上有一个视频，点击按钮即可打开。我在视频上有一个取消按钮，单击该按钮应该会关闭叠加层以及 stop/pause 视频。这就是我正在做的 -

<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（正在发生）并暂停视频。谁能告诉我哪里错了？

Answer 1

您不能暂停 iframe 以停止其中的视频运行（假人）:)。由于您使用的是 vimeo link，因此您将不得不使用 vimeo api。为此，请执行以下操作：

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

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

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

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视频，您可能需要使用youtubeapi方法和程序）

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

希望对您有所帮助。

如何 stop/pause 嵌入点击取消按钮？

How to stop/pause an embedded on clicking a cancel button?

html

javascript

css

iframe

webpage