title: Using video.js with dynamically created video tags
body: <p>I'm currently using video.js to handle flash fallback from html5 video.  When a user clicks a thumbnail on my site, I dynamically (with js/jquery) create and insert the required html into a jquery ui dialog window, which then displays the video, either using html5 or flash fall-back.  Here is the relevant code:</p>
  
  <pre><code>    //setup jquery ui dialog window 
      $( "div#video_box" ).dialog({
              autoOpen: false,
              modal: true,
              width: 'auto',
              resizable: false,
              draggable: true,
              close: function() {
                  $("video").remove()
              }
           });
  
      //the following code runs after a video thumbnail click event.  
  {
      var $videoBox = $("div#video_box"),
      url = VIDEOSTORAGE + id ,  //url to s3 storage bucket + id of the video/thumbnail that was clicked
      html ="";
      html += "&lt;video id='downloadedVideo_"+id+"' class='video-js vjs-default-skin' width='320' height='240' controls preload='auto' width='640' height='264' poster='"+PHOTOSTORAGEMEDIUM + id'&gt;";
      html += "&lt;source src='"+url+".mp4' type='video/mp4' /&gt;";
      html += "&lt;/video&gt;";
      $videoBox.html(html);
      $("#downloadedVideo_"+id).load();
      $videoBox.dialog( "open" );
      _V_("downloadedVideo_"+id);  //initialize video player
  }
  </code></pre>
  
  <p>This code works perfectly on all browsers the first time that a video thumbnail is clicked.  My bug triggers when a user clicks on the video thumbnail for a video that he has already watched.</p>
  
  <p>In FF I'm getting a "no video with supported mime type is found" error on the second pass.  Both chrome and safari load and play the video on the second pass; but do so using their default html5 player rather than the video.js player.  </p>
  
  <p>I think that my problem is that video.js must be initialized using unique video-tag ids, and the second time a user clicks a video thumbnail my code tries to initialize the player with a video-tag id that it has already used.  </p>
  
  <p>Does anyone know a clean way to avoid this problem?</p>
  
  <p>Thanks in advance for your help. </p>