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, clicki

Answer 1

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 2

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

Answer 3

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

Answer 4

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.

Answer 5

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 6

simply clear the container of the video like this:

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