灯箱关闭时停止并播放 Iframe 视频
Posted
技术标签:
【中文标题】灯箱关闭时停止并播放 Iframe 视频【英文标题】：Stop and play Iframe video when lightbox closes 【发布时间】：2013-04-22 09:22:08 【问题描述】：我正在制作一个应该显示 youtube 视频的灯箱。 我遇到的第一个问题是，当我关闭灯箱时，我的 youtube 视频仍然可以播放。
然后我添加了：$('iframe').remove();
__
但是随后 iframe 离开了，当我单击激活灯箱的链接时，只会打开一个空白框。
如何让我的 iframe 在移除后再次加载？
或者，当我关闭灯箱时，还有其他方法可以让视频停止吗？
我的代码在这里：
<html>
<head>
<title>Youtube Lightbox</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">
body
font-family: Arial;
.backdrop
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
.box
position:absolute;
top:20%;
left:30%;
width:500px;
height:300px;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
</style>
<script type="text/javascript">
$(document).ready(function()
$('.lightbox').click(function()
$('.backdrop, .box').animate('opacity':'.50', 300, 'linear');
$('.box').animate('opacity':'1.00', 300, 'linear');
$('.backdrop, .box').css('display', 'block');
);
$('.backdrop').click(function()
close_box();
);
);
function close_box()
$('.backdrop, .box').animate('opacity':'0', 300, 'linear', function()
$('.backdrop, .box').css('display', 'none');
$('iframe').remove();
);
</script>
</head>
<body>
<h1>This is a webpage...</h1>
<a href="#" class="lightbox">Open Youtube lightbox</a>
<div class="backdrop"></div>
<div class="box"><iframe src="http://www.youtube.com/embed/some/video" frameborder="0" allowfullscreen></iframe></div>
</body>
</html>
希望你能帮帮我！ :) 谢谢。
顺便说一句。我研究了论坛并找到了类似的主题，但还没有我可以使用的答案。
【问题讨论】：
【参考方案1】： function close_box()
$('.backdrop, .box').animate('opacity':'0', 300, 'linear', function()
$('.backdrop, .box').css('display', 'none');
$('iframe').remove();
var video = $('iframe').attr("src");
$('iframe').attr("src","");
$('iframe').attr("src",video);
);
【讨论】：
【参考方案2】：该功能将停止您的视频，而不删除视频 src
function unsetVideoLink(id)
var src = $(id).attr('src');
$(id).attr('src','');
$(id).attr('src',src);
【讨论】：
【参考方案3】：您可以使用 jQuery 将 iframe 的 src 属性更改为空，然后使用以下命令重新加载它（如果它不自行重新加载）：
function close_box()
$('.backdrop, .box').animate('opacity':'0', 300, 'linear', function()
$('.backdrop, .box').css('display', 'none');
$('#box iframe').prop('src', '#');
document.getElementById(FrameID).contentDocument.location.reload(true);
);
（我从this link得到这个）
唯一的缺点是第二次打开灯箱时视频会重新加载，第一次打开灯箱需要更改功能。
作为说明，我建议您在打开灯箱之前不要加载 iframe，这意味着您可以做的最好的事情是在需要时使用 JavaScript 添加代码。多花 0.000001 秒，不用担心。 I use it in my website 并提供非常快速的加载（当然是网站的加载）并保持浏览器非常轻便。
但另一种方法（我真的很喜欢这个方法）是在 iframe 上触发 space keypress，从而停止视频，因此当它再次打开时，您会发现它在同一时刻暂停。
比如：
function close_box()
$('.backdrop, .box').animate('opacity':'0', 300, 'linear', function()
$('.backdrop, .box').css('display', 'none');
var e = jQuery.Event("keyup");
e.which = 23; // The spacebar key code is 23
$('#box iframe').trigger(e);
);
【讨论】：
但是感谢您的链接，这帮助了我： $( '#iframe' ).attr( 'src', function ( i, val ) return val; );以上是关于灯箱关闭时停止并播放 Iframe 视频的主要内容，如果未能解决你的问题，请参考以下文章
单击链接 javascript 时停止所有播放 iframe 视频