Question

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

Answer 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

希望这有帮助。

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

1 个答案: