title: html video javascript play method not working in mobile Safari
body: <p>I have a video element in my ember.js app that I'm setting the <code>src</code> of with <code>window.URL.createObjectURL(file)</code> to generate a preview before uploading. After capturing from a video file input, the rendered html looks like this:</p>
  
  <pre><code>&lt;video class="video-review" controls="1" autoplay="1"
    src="blob:http://66efcd0.ngrok.com/bb427ce0-af04-4763-bb59-3be85b936895"&gt;
  &lt;/video&gt;
  // * ngrok is just a port forwarding util for testing
  </code></pre>
  
  <p>The video shows up fine, and plays fine if I manually tap on it. </p>
  
  <p>I need the video to play immediately after it has loaded. <strong>The problem is that autoplay does not work, and I can not get the video to play from javascript.</strong> In the console (after video has loaded <code>vid.load()</code>) I tried:</p>
  
  <pre><code>vid = $('video.video-review').get(0)
  vid.play()
  </code></pre>
  
  <p>This does not work. However, if I manually tap on the video and play it, (and give it focus) then calling <code>vid.play()</code> from the console DOES work and plays the video fine. So I tried giving the video focus:</p>
  
  <pre><code>vid.focus() and jquery $(vid).focus()
  vid.play()
  </code></pre>
  
  <p>No luck. </p>
  
  <p><strong>How can I get an HTML video to play with javascript in mobile Safari?? - and why is autoplay not working?</strong></p>
  
  <p>Also here is the code that assigns the video attributes (triggered by an observer on the file change event):</p>
  
  <pre><code>var file = this.get('file');
  window.URL = window.URL || window.webkitURL;
  var vid = this.$('.video-review').get(0);
  vid.src = window.URL.createObjectURL(file);   
  vid.file = file;
  vid.addEventListener('canplaythrough', function() {
    this.play();
  }, false);
  vid.load();
  </code></pre>