Question

所以例如我有这样的结构：

的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，但视频 still playing < / strong>在Internet Explorer中！

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

Answer 1

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

从DOM中剪切元素

Answer 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();
        }
    }
}

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

2 个答案: