单击弹出窗口时如何暂停视频
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单击弹出窗口时如何暂停视频相关的知识，希望对你有一定的参考价值。
我对编码世界很陌生，我正在开发一个网站，它将有一个按钮，可以播放来自youtube的视频。我在网上找到了如何创建弹出窗口，但是一旦我点击视频，它仍会播放视频，你可以听到它在后台播放。
我尝试了不同的东西，但我仍然无法弄清楚代码的问题是什么。这是我的代码：
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox:target {
outline: none;
display: block;
}
#videoModal {
border-radius: 0;
width: 870px;
margin:auto;}
#videoModal .modal-header {
background: #000;
border: 0;
color: #fff;
position: relative;
height:35px;
margin-bottom: 5px; }
#videoModal .modal-header h3 {
font-size: 18px;
line-height: 22px;
font-family:Arial, Helvetica, sans-serif;
padding:5px;}
#videoModal .modal-body {
height: 489px;
padding: 0;
max-height: none;
overflow: hidden; }
#videoModal .modal-footer:empty {
display: none !important; }
#videoModal .close {
background: none;
color: #fff;
font-size: 24px;
margin: 0;
opacity: 1;
position: absolute;
right: 0;
text-shadow: none;
top: 0;
width: 38px;
border-width: 0px !important;}<a class="vid_link" data-fancybox-type="iframe" href="#img1"><img src="http://www.bbk.ac.uk/lib/images/general/PLAY.jpg" style="width:100%;height:auto;"></a>
<!-- lightbox container hidden with CSS -->
<a href="#_" class="lightbox" id="img1">
<div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;">
<div class="modal-header">
<button type="button" class="close full-height" data-dismiss="modal" aria-hidden="true">X</button>
<h3>Mumford and Sons: Broad-Shouldered Beasts</h3>
</div>
<div class="modal-body"><iframe width="870px" height="489px" src="https://www.youtube.com/embed/84V4AQIZMUg?rel=0&autoplay=1" frameborder="0" allowfullscreen=""></iframe></div>
<div class="modal-footer"></div>
</div></a>答案
希望你对JQuery没问题。您可以在下面添加JS代码。确保从视频iFrame中删除src，因为它将在文档准备好后以编程方式设置。为播放按钮分配ID;我假设id是playBtn。由于页面在刷新时跟踪最近的播放/暂停状态，因此我们只需要在加载时设置src，如果按钮处于播放模式。单击播放按钮后，我们只在空白和视频链接之间切换src。答案中有一个更新的代码段，但我知道由于YouTube API，它在Stackoverflow中无效。因此，我给出了这个小小的描述，让你知道我做了什么。
$(document).ready(function(){
var isVisible = $('#img1:visible').length;
var src = 'https://www.youtube.com/embed/84V4AQIZMUg?rel=0&autoplay=1';
if(isVisible){
$('iframe').attr('src', src);
}
$('#playBtn, #img1').click(function(){
$('iframe').attr('src', $('iframe').attr('src')? "": src);
});
});
$(document).ready(function(){
var isVisible = $('#img1:visible').length;
var src = 'https://www.youtube.com/embed/84V4AQIZMUg?rel=0&autoplay=1';
if(isVisible){
$('iframe').attr('src', src);
}
$('#playBtn, #img1').click(function(){
$('iframe').attr('src', $('iframe').attr('src')? "": src);
});
});.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox:target {
outline: none;
display: block;
}
#videoModal {
border-radius: 0;
width: 870px;
margin:auto;}
#videoModal .modal-header {
background: #000;
border: 0;
color: #fff;
position: relative;
height:35px;
margin-bottom: 5px; }
#videoModal .modal-header h3 {
font-size: 18px;
line-height: 22px;
font-family:Arial, Helvetica, sans-serif;
padding:5px;}
#videoModal .modal-body {
height: 489px;
padding: 0;
max-height: none;
overflow: hidden; }
#videoModal .modal-footer:empty {
display: none !important; }
#videoModal .close {
background: none;
color: #fff;
font-size: 24px;
margin: 0;
opacity: 1;
position: absolute;
right: 0;
text-shadow: none;
top: 0;
width: 38px;
border-width: 0px !important;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="vid_link" data-fancybox-type="iframe" href="#img1"><img src="http://www.bbk.ac.uk/lib/images/general/PLAY.jpg" style="width:100%;height:auto;"></a>
<!-- lightbox container hidden with CSS -->
<a href="#_" class="lightbox" id="img1">
<div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;">
<div class="modal-header">
<button type="button" class="close full-height" data-dismiss="modal" aria-hidden="true">X</button>
<h3>Mumford and Sons: Broad-Shouldered Beasts</h3>
</div>
<div class="modal-body"><iframe width="870px" height="489px" frameborder="0" allowfullscreen=""></iframe></div>
<div class="modal-footer"></div>
</div></a>以上是关于单击弹出窗口时如何暂停视频的主要内容，如果未能解决你的问题，请参考以下文章