title: VideoJS Flash Fallback Not Working When Dynamically Changing Source
body: <p>I'm having issues with my videos not being played back in firefox.  I'm attempting to dynamically update one <code>video</code> element's source to play multiple videos without re-creating the element every time my function is called. </p>
  
  <p>E.g., first click makes the <code>video</code> source = video1.mp4, next click maintains that <code>video</code> player, but changes the source = video2.mp4 without recreating the element. </p>
  
  <p>My reason for doing this is to only have to use one filetype for all browsers. I realize I could just make another <code>source</code> tag under the <code>video</code> element and give it a MIME type of <code>video/ogg</code> and it would work with HTML5 in firefox, but I want to have a universal format to take the burden off my users. </p>
  
  <p>I can get this to work perfectly fine in chrome, but when changing to firefox the flash player only plays the first video source then
  for some reason becomes undefined. </p>
  
  <p>Firstly, I created a video element inside a lightbox. The lightbox is opened through a function which is called onclick of an anchor tag. When the lightbox is opened, I initialize a videojs player of the video, then set its source to the URL passed into the function. I then load the player, and play it. This works perfectly fine in chrome with HTML5, but in firefox the flash fallback works once then breaks. </p>
  
  <p>I was reading about the problem and thought my problem might be the fact that flash converts the  <code>video</code> element into a flash <code>object</code>, then when I try to reference the video with the same ID again, it isn't found because it doesn't exist as a <code>video</code> element anymore. </p>
  
  <h3>Here is a code sample: <a href="http://jsfiddle.net/7WTrh/12/" rel="nofollow">http://jsfiddle.net/7WTrh/12/</a></h3>
  
  <p>I tested in chrome, and it works, but firefox does not. </p>
  
  <p>Thanks for the help in advance. </p>