Youtube видео не останавливается в IE, если я скрываю его родительский div - PullRequest
Новая
       0

Youtube видео не останавливается в IE, если я скрываю его родительский div

0 голосов
/ 07 сентября 2010

Так, например, у меня есть такая структура:

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 в Internet Explorer!

Пожалуйста, не отправляйте ответы с помощью jQuery или любой библиотеки, только чистый Javascript, спасибо!

Ответы [ 2 ]

2 голосов
/ 07 сентября 2010

Переключение свойства CSS display не является надежным способом уничтожения Flash. Как вы обнаружили, поведение в разных браузерах различно. Вам лучше было бы вырезать элемент из DOM, используя domElement.parentNode.removeChild(domElement)

1 голос
/ 14 января 2011

В случае IE7, кажется, что объект Youtube не «выгружается», когда он скрыт, по сравнению с IE8 или FF 3.6.Например, в IE8, если объект скрыт, функция youtubeobject.stopVideo не определена, но в IE7 она все еще существует.

Я думаю, что более элегантным решением является проверка, еслиФункция «stopVideo» существует в объекте Youtube, а затем вызывается. 

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