音频不会停止时关闭HTML5模式与嵌入式视频

我有一个VIMEO视频嵌入模式。这是简单的代码，我认为它只是显示/隐藏，所以即使视频不见了，音频仍在播放 - 但我不确定。模式的作品和关闭按钮的作品，但语音保持。新模式 - 真的可以使用一些帮助。谢谢。下面的代码音频不会停止时关闭HTML5模式与嵌入式视频

CSS

.modalDialog { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 99999; 
    opacity:0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
} 

.modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
} 

.modalDialog > div { 
    width: 600px; 
    height:400px; 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
    border-radius: 10px; 
    background: #fff; 
    background: -moz-linear-gradient(#fff, #999); 
    background: -webkit-linear-gradient(#fff, #999); 
    background: -o-linear-gradient(#fff, #999); 
} 

.close { 
    background: #606061; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    audio: none; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -moz-box-shadow: 1px 1px 3px #000; 
    -webkit-box-shadow: 1px 1px 3px #000; 
    box-shadow: 1px 1px 3px #000; 
} 

.close:hover { 
    background: #00d9ff; 
}

HTML：

<a href="#openModal"> 
    <img src="img/video-play.png" width="125" height="125"> 
</a></h2>   

<div id="openModal" class="modalDialog"> 
<div><a href="#close" title="Close" class="close">X</a> 

<iframe src="http://player.vimeo.com/video/14266818" width="600" 
    height="400px" frameborder="0" webkitallowfullscreen mozallowfullscreen  
    allowfullscreen></iframe> 
</div></div>

来源

2014-01-20 user3216078

你能设置一个工作示例的小提琴吗？当用户点击“关闭”时，你会做什么？ – Phlume

它关闭模态窗口。模式和视频关闭，但音频继续....叹息 – user3216078

我有一个模式一个VIMEO以及和我用下面的脚本完全关闭电影时，“X”荷兰国际集团脱离模式。

$('#videoToggleOff').click(function(){ 
    $('iframe#myVideo').attr('src',''); 
    $('iframe#myVideo').attr('src','your vimeo link here'); 
});

HTML

莫代尔退出按钮

<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="videoToggleOff"><h4 class="videoText">X</h4></button>

iframe的模态

<iframe id="myVideo" src='your vimeo link' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

剧本基本上消除被点击退出时的视频，但然后重置URL所以如果用户再次点击播放其不破坏。

来源

2014-01-20 18:44:05

要么我做错了什么或不幸的是，这不起作用 - 新按钮没有关闭模式，即使视频暂停，音频仍然在播放。感谢您的帮助 - 如果您想到按钮无法关闭模式的任何原因，请高兴地听到它。 – user3216078

我正在使用Bootstrap以及Bootstrap.js，其中包含JQuery来控制模式。如果您没有使用引导程序并使用其他JS来控制模式，则需要更新关闭模式按钮代码才能使用脚本。 –

音频不会停止时关闭HTML5模式与嵌入式视频

回答

相关问题