title: Stop html5 video and swf player from playing when tab is out of focus
body: <p>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). </p>
  
  <p>My problem is whenever I select a different tab, the video continues to play when out of focus.</p>
  
  <p>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:</p>
  
  <p>JS: </p>
  
  <pre><code>$('#tabs').tabs({
      select: function(event, ui) {
          if (ui.tab.id != 'videos') {
          $("#myvid")[0].pause();
          }
      }
  });
  </code></pre>
  
  <p>Also, here's my HTML: </p>
  
  <pre><code>&lt;div id="videos"&gt; 
  &lt;div id="VideoContainer"&gt; 
  &lt;video id="myvid" poster="img/poster-showreel.jpg" width="470" height="265" fullscreen="true" controls preload&gt; 
  &lt;source src="showreel.mp4"&gt;&lt;/source&gt; 
  &lt;source src="showreel.webm"&gt;&lt;/source&gt; 
  &lt;/video&gt; 
  &lt;/div&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p>The problem is, now IE kicks back an error ('Object doesn't support this property…') since it uses a flash-based player.</p>
  
  <p>How is it possible to stop the video from playing (in all browsers) when the tab is no longer selected or in focus?</p>
  
  <p>-- <br>
  <em>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.</em></p>