Stop html5 video and swf player from playing when tab is out of focus

I am using an html5 video (html5media.com) inside a tab (jQuery UI tabs). When the video plays inside old IE browsers, it falls back to Flowplayer (swf player).

My problem is whenever I select 开发者_如何学Goa different tab, the video continues to play when out of focus.

Thanks for someone here helping me earlier, I was able to have the video pause play in all browsers except IE 8 and older when using this syntax below:

JS:

$('#tabs').tabs({
    select: function(event, ui) {
        if (ui.tab.id != 'videos') {
        $("#myvid")[0].pause();
        }
    }
});

Also, here's my HTML:

<div id="videos"> 
<div id="VideoContainer"> 
<video id="myvid" poster="img/poster-showreel.jpg" width="470" height="265" fullscreen="true" controls preload> 
<source src="showreel.mp4"></source> 
<source src="showreel.webm"></source> 
</video> 
</div> 
</div> 

The problem is, now IE kicks back an error ('Object doesn't support this property…') since it uses a flash-based player.

How is it possible to stop the video from playing (in all browsers) when the tab is no longer selected or in focus?

--

If you are a moderator who wants to delete this post, please explain why. I believe this is a legit question whereby I have not found a straight forward answer that encompasses a solution for all browsers.

You're going to have to stop the flash player as well using javascript. Flowplayer comes with its own api which once enabled on your site will allow you to modify the flash video directly through javascript. Go here, download the file and include it in your header. Once that's done you can add a line to your javascript to stop the flowplayer as well:

$('#tabs').tabs({
    select: function(event, ui) {
        if (ui.tab.id != 'videos') {
        $("#myvid")[0].pause();
        // get a handle to the flowplayer and stop it
        $f().stop();
        }
    }
});

You might still get an error if you make both calls... add a check for the swf.

$('#tabs').tabs({
        select: function(event, ui) {
            if (ui.tab.id != 'videos') {
              if ( $("'"+ui.tab.id+" object'").length >= 1 ){ 
                // get a handle to the flowplayer and stop it
                $f().stop();
              } else {
                $("#myvid")[0].pause();
              }
            }
        }
    });