title: Pausing HTML Embedded Video
body: <p>I'm using this kind of cross-broswer embedding:</p>
  
  <pre><code>&lt;video width="549" height="309" controls poster="video/stills/index_demo_videoScreen.jpg" style="margin-top:20px;"&gt;
      &lt;source src="video/2014-reel-web.mp4" type="video/mp4"&gt;
      &lt;source src="video/2014-reel-web.ogg" type="video/ogg"&gt;
      &lt;embed width="549" height="309" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="video/2014-reel-web.swf"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>It's not the "video for everyone" solution, but it is a lot simpler.  Whatever it doesn't work on, I don't particularly care.</p>
  
  <p>What I need to know is how can I stop the video from playing when the user navigates away from it (as it will still be on the page, just not visible)?</p>
  
  <p>I have this:</p>
  
  <pre><code>$("video").each(function(index) {
      $(this)[0].pause();
  });
  </code></pre>
  
  <p>But that doesn't work if the video has had to fall back to the swf object.  Is it even possible to target it and get it to stop playing?</p>
  
  <p>One thing I tried was using jQuery to replace the HTML content of the video tag with nothing (on the theory that I could rebuild the contents, thus resetting things) but even that just silently does nothing.</p>