title: Video.js - play a blob (local file @ the client) created with createObjectURL
body: <p>I would like to play a video locally (without uploading it to the server).
  I can do that in pure javascript and html5 like so:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;video id="video1"&gt;&lt;/video&gt;
  &lt;input type="file" id="fileInput"  multiple /&gt;
  </code></pre>
  
  <p>javascript with jQuery:</p>
  
  <pre><code>var $video = $('#video1');
  $video.prop('src', URL.createObjectURL($('#fileInput').get(0).files[0]));
  $video.get(0).play();
  </code></pre>
  
  <p>and it works.</p>
  
  <p>but with video.js with the following code:</p>
  
  <pre><code>var myPlayer = videojs('video1').ready(function () {
              // ready
              var filename = URL.createObjectURL($('#fileInput').get(0).files[0]);
              this.src(filename);
              this.load();  
              this.play();
          });
  </code></pre>
  
  <p>I get the following error:</p>
  
  <blockquote>
    <p>VIDEOJS: TypeError: Cannot read property '1' of null {stack: (...), message: "Cannot read property '1' of null"}</p>
  </blockquote>
  
  <p>I am guessing that this is because the blob does not have a file extension, it looks like this:</p>
  
  <blockquote>
    <p>blob:http%3A//localhost%3A9000/5621470e-593a-4255-8924-f48731b97803</p>
  </blockquote>
  
  <p>does anyone know the reason of this error and a way to play a local file on the client with video.js?</p>
  
  <p>Thanks,
  Lior</p>