如果我隐藏其父 div，Youtube 视频不会在 IE 中停止答案

【问题标题】：Youtube video doesn't stop in IE if I hide its parent div如果我隐藏其父 div，Youtube 视频不会在 IE 中停止
【发布时间】：2010-09-06 23:19:04
【问题描述】：

例如，我有这样的结构：

Javascript

function toggle(id){
    var element = document.getElementById("id");

    if(element.style.display != 'block'){
        element.style.display = 'none';
    } else {
        element.style.display = 'block';
    }
}

HTML

<div onclick="toggle('holder')">Toggle Video</div>

<div id="holder" style="display:none">
   <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/A_hp2ubJaNo?fs=1&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/A_hp2ubJaNo?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
</div>

当我点击Toggle Video视频shows up和starts playing时，当我再次点击视频hides out但视频在Internet Explorer中是still playing！

请不要使用 jQuery 或任何库发布任何答案，只能使用纯 Javascript，谢谢！

【问题讨论】：

你能显示toggle()吗？我想它会切换element.style.display，但为了完整起见......
@Marcel Korpel 我编辑了我的问题。

标签： javascript internet-explorer youtube youtube-api

【解决方案1】：

切换 CSS display 属性并不是杀死 Flash 的可靠方法。正如您所发现的，浏览器之间的行为是不同的。你最好使用domElement.parentNode.removeChild(domElement)从DOM中裁剪元素

【讨论】：

也许可以，但适用于所有浏览器，IE 除外，这就是问题所在：P

【解决方案2】：

在 IE7 的情况下，与 IE8 或 FF 3.6 相比，Youtube 的对象在隐藏时似乎不会“卸载”自身。例如，在 IE8 中，如果对象被隐藏，则函数 youtubeobject.stopVideo 是未定义的，但在 IE7 中它仍然存在。

我认为更优雅的解决方案是检查 Youtube 对象中是否存在“stopVideo”函数，然后调用它。

function toggle(id){
    var element = document.getElementById("id");

    if(element.style.display != 'block'){
        element.style.display = 'none';
        var ytobject = document.getElementById("youtubeplayerid");
        if(ytobject.stopVideo) {
            ytobject.stopVideo();
        }
    } else {
        element.style.display = 'block';
        var element = document.getElementById("youtubeplayerid");
        if(ytobject.playVideo) {
            ytobject.playVideo();
        }
    }
}

【讨论】：