title: How can I prevent HTML5 audio or video from playing when removed from the page?
body: <p>Please feel free to suggest a better title for this post, as I wasn't sure how to properly describe the problem in one short question.</p>
  
  <p>I've got a media player page with an HTML5 player and the option for the visitor to choose to play the video or audio for that page.  While one is playing, a button to switch to the other is available.  For example, if the visitor is playing audio, a "Switch to Video" button is available, which essentially removes the current content and replaces it.  This effectively removes the current HTML5 player from the DOM tree as well, of course. In addition to replacing the content, a 'pause' event is triggered on any audio or video element on the page prior to loading the new content.</p>
  
  <p>Unfortunately, if you switch between audio and video quickly enough, you'll end up with multiple items playing simultaneously.</p>
  
  <p>I need to make sure this doesn't happen.</p>
  
  <p>How can I ensure that when I replace the player, the previously loading file does not play?</p>
  
  <p>To see this happening, go to <a href="http://www.onlinechurchmediacenter.com/mc/vertigoelectric/5628" rel="nofollow">http://www.onlinechurchmediacenter.com/mc/vertigoelectric/5628</a>, choose either audio or video, and once it starts playing keep clicking the "Play Audio" or "Play Video" link which appears below the player.  If you continuously click this quickly enough, you'll begin to notice multiple instances of the audio/video playing over each other.</p>