Flash 视频仍在使用 jQuery 删除的 DIV 上播放（IE 错误）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1806032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flash video still playing on DIV that is removed using jQuery (IE bug)
提问by Simon
I have some jQuery tabs one of which holds a flash video. When I play the video in one tab and click to another in FF or Safari the video stops along with the sound, clicking back to the video tab reloads the content - as expected.
我有一些 jQuery 标签，其中一个包含 Flash 视频。当我在一个选项卡中播放视频并在 FF 或 Safari 中单击另一个选项卡时，视频与声音一起停止，单击返回视频选项卡会重新加载内容 - 正如预期的那样。
In Internet Explorer this is not the case, the video continues to play even when the tab is not selected. My understanding is that when display:none(jQuery hide()) is applied the DOM element is essentially removed from layout - why is this not happening with IE browsers, how can I fix it?
在 Internet Explorer 中，情况并非如此，即使未选择选项卡，视频也会继续播放。我的理解是，当应用display:none(jQuery hide()) 时，DOM 元素基本上从布局中删除 - 为什么 IE 浏览器不会发生这种情况，我该如何解决？
回答by Marlon Creative
To remove the video and then re-add it, add the following to your function that closes the video window:
要删除视频然后重新添加它，请将以下内容添加到关闭视频窗口的函数中：
// Remove and re-add video
var clone = $("#video-holder").clone(true);
$("#video-holder").remove();
$("#video").html(clone);
Where you have a surrounding "video" div, and inside a "video-holder" div that houses the embed code.
在您周围有一个“视频”div 的地方，以及在包含嵌入代码的“视频持有人”div 内。
回答by Divya Manian
You could try removing the element when you are tabbing away from the div containing the flash like $("object").remove();
当您从包含 Flash 的 div 移开时，您可以尝试删除该元素，例如 $("object").remove();
回答by david
Simply do like this to refresh :
只需像这样刷新：
var a = document.getElementById('div_movie').innerHTML;
document.getElementById('div_movie').innerHTML = a;
回答by Alex
$("#VideoContainer").html("");
$("#VideoContainer").html("");
Seemed to be the right answer, but if I click the same element twice it stays empty.
似乎是正确的答案，但如果我单击同一个元素两次，它会保持为空。
回答by BuKToP
simply clear the container of the video like this:
只需像这样清除视频的容器：
$("#VideoContainer").html("");
$("#VideoContainer").html("");
回答by Gokhan Demirtas
$("#flashContainer").empty()
will also flush the embed code and stop Flash
还将刷新嵌入代码并停止 Flash
回答by SolidALb
My solution, This should work:
我的解决方案，这应该有效：
$('#myVideoContainer object').remove();
回答by giacatho
It's unnecessary to use JQuery, a pure Javascript solution is enough. Just replace the player div with a clone of itself:
没有必要使用 JQuery，一个纯 Javascript 解决方案就足够了。只需将播放器 div 替换为自身的克隆：
oldVideoDiv = document.getElementById(videoId);
newVideoDiv = oldVideoDiv.cloneNode(true);
oldVideoDiv.parentNode.replaceChild(newVideoDiv, oldVideoDiv);
oldVideoDiv = document.getElementById(videoId);
newVideoDiv = oldVideoDiv.cloneNode(true);
oldVideoDiv.parentNode.replaceChild(newVideoDiv, oldVideoDiv);
回答by Kai Noack
We had the same issue. Flash video was embedded using swfobject.embedSWF(...), however, IE9 did not stop the video when the div was hidden using jquery.
我们有同样的问题。Flash 视频是使用 swfobject.embedSWF(...) 嵌入的，但是，当使用 jquery 隐藏 div 时，IE9 并没有停止视频。
Simple workardound: Call the swfobject.embedSWF(...) again to (re)load the swf into the same target div.
简单的解决方法：再次调用 swfobject.embedSWF(...) 以（重新）将 swf 加载到同一目标 div 中。
If you have a video with autoplay, try to load another empty swf file when hiding. Cheers
如果您的视频具有自动播放功能，请尝试在隐藏时加载另一个空的 swf 文件。干杯
回答by Adriana
I had the same problem with an embedded YouTube video. This was the final solution that worked in IE, Firefox, Chrome and Safari:
我在嵌入 YouTube 视频时遇到了同样的问题。这是适用于 IE、Firefox、Chrome 和 Safari 的最终解决方案：
Below is the jQuery script, HTML, and CSS used to solve IE's problem of continuing to play the sound when an embedded YouTube video is hidden.
下面是 jQuery 脚本、HTML 和 CSS，用于解决 IE 隐藏嵌入的 YouTube 视频时继续播放声音的问题。
This is the jQuery script (which I placed just before the ending body tag):
这是 jQuery 脚本（我放在结束 body 标签之前）：
<script type="text/javascript">
$(function() {
$('.close').click(function() {
// needed to find some way to remove video and then replace it because IE would close the div but continue to play sound
$('iframe').hide(); // must hide the YouTube iframe first or closing it before playing will cause a black window in IE
$('#video1').hide('fast'); // then hide the container div that has the video div that has the YouTube iframe in it
var bringback = $("#tinleyvideo").clone(true); //clone the div that has the YouTube iframe and assign it to a variable
$("#tinleyvideo").remove(); // remove the div that has the YouTube iframe
$("#video1").html(bringback); // replace or recreate the div that has the YouTube iframe using the variable with cloned information
});
$('.tourism').click(function() {
$('iframe').show(); // show the YouTube iframe
$('#video1').show('fast'); // show the div that contains the YouTube video div
});
});
Here is the HTML structure. The link tag with the class of "tourism" is an image link used to bring up the popup window with the video. The div tag with the ID of "Video1" is a container div for the div with the ID of "tinleyvideo" which contains the YouTube embeded iframe code. The link tag with the class of "close" hides the video using jQuery.
这是 HTML 结构。具有“旅游”类的链接标签是一个图像链接，用于显示带有视频的弹出窗口。ID 为“Video1”的 div 标签是 ID 为“tinleyvideo”的 div 的容器 div，其中包含 YouTube 嵌入的 iframe 代码。类为“close”的链接标签使用 jQuery 隐藏视频。
<a href="#" class="tourism"><img src="images/home_video.jpg" width="217" height="161" border="0"/></a>
<div id="video1">
<div id="tinleyvideo"><a href="#" class="close" style='float:left; color:white; padding-bottom:10px; font-size:12px;'>Close</a><br />
<iframe width="560" height="315" src="http://www.youtube.com/embed/XxnM7UzquSs?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
The CSS (it positions the popup, initially sets it's display to none, and adds other custom styling):
CSS（它定位弹出窗口，最初将其显示设置为无，并添加其他自定义样式）：
#video1 {
position: absolute;
top:240px;
left:220px;
width:560px;
height:360px;
display: none;
-moz-border-radius: 10px;
padding: 10px;
background-color: #486A74;
border: 3px solid #DCC35C;
z-index:400;
}
Hope this helps.
希望这可以帮助。
