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

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

本文关键字：暂停 单击 取消 按钮      更新时间：2023-09-26

我有一个视频覆盖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(正在发生)以及暂停视频。谁能告诉我我哪里错了?

你不能暂停iframe来停止视频在其中运行(dummy):)。由于您使用vimeo链接，所以您将不得不使用vimeo api。要做到这一点，请执行以下操作:

在froogaloop2.js中添加带有vimeocdn的脚本标签，如下所示

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

下一步:在视频url中添加api=1 querystring，如下所示:(注意您的视频url缺少?导致视频无法加载)

https://player.vimeo.com/video/183364240?api=1&标题= 0,署名= 0,肖像= 0

最后:将以下代码放入pauseVideo函数中:

function pauseVideo()
{
  var players;
  players=$('#myVid');
  $f(players[0]).api('pause');
}

那应该能满足你的需要。(注意:对于youtube视频，您可能必须使用youtube api方法和过程)

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

相关文章：