Flash video still playing on DIV that is removed using jQuery (IE bug)

Question

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.

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?

Answer 1

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.

Answer 2

You could try removing the element when you are tabbing away from the div containing the flash like $("object").remove();

Answer 3

Simply do like this to refresh :

var a = document.getElementById('div_movie').innerHTML;
document.getElementById('div_movie').innerHTML = a;

Answer 4

$("#VideoContainer").html("");

Seemed to be the right answer, but if I click the same element twice it stays empty.

Answer 5

simply clear the container of the video like this:

$("#VideoContainer").html("");

Answer 6

My solution, This should work:

$('#myVideoContainer object').remove();

Answer 7

It's likely because you're applying the display: none; to the div holding the flash object, not the flash object itself.

I was messing around with a sort of similar issue today and while I don't have an exact solution for you I do have a possibility you could try when you jump between divs to try and turn the player off:

$(flashobjectid).attr('height', '0');

If the flash player you're using happens to be the commonly used jw player then you could do (when you hide the div):

document.getElementById(playerId).sendEvent("PLAY","false"); 

Answer 8

You may need to program a player.stop or player.pause function for the player on the onBlur event of the page.

Answer 9

The most helpful thing you could do is the post which video player you're using. Youtube and Brightcove both have Javascript APIs that you can use to control the player. Like tahdhaze says here, the best thing to do would be to stop the player on the window.onBlur event, and start it again when it gains focus.

Using CSS to stop the video from playing is at best tricky, at worst a hack... use the Flash-Javascript bridge API that comes with the player.

Answer 10

$("#flashContainer").empty() 

will also flush the embed code and stop Flash

Answer 11

It's unnecessary to use JQuery, a pure Javascript solution is enough. Just replace the player div with a clone of itself:

oldVideoDiv = document.getElementById(videoId);

newVideoDiv = oldVideoDiv.cloneNode(true);

oldVideoDiv.parentNode.replaceChild(newVideoDiv, oldVideoDiv);

Answer 12

---

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.

Simple workardound: Call the swfobject.embedSWF(...) again to (re)load the swf into the same target div.

If you have a video with autoplay, try to load another empty swf file when hiding. Cheers

Answer 13

I had the same problem with an embedded YouTube video. This was the final solution that worked in IE, Firefox, Chrome and 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.

This is the jQuery script (which I placed just before the ending body tag):

<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.

<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):

#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.