4

I have a video element in my ember.js app that I'm setting the src of with window.URL.createObjectURL(file) to generate a preview before uploading. After capturing from a video file input, the rendered html looks like this:

<video class="video-review" controls="1" autoplay="1"
  src="blob:http://66efcd0.ngrok.com/bb427ce0-af04-4763-bb59-3be85b936895">
</video>
// * ngrok is just a port forwarding util for testing

The video shows up fine, and plays fine if I manually tap on it.

I need the video to play immediately after it has loaded. The problem is that autoplay does not work, and I can not get the video to play from javascript. In the console (after video has loaded vid.load()) I tried:

vid = $('video.video-review').get(0)
vid.play()

This does not work. However, if I manually tap on the video and play it, (and give it focus) then calling vid.play() from the console DOES work and plays the video fine. So I tried giving the video focus:

vid.focus() and jquery $(vid).focus()
vid.play()

No luck.

How can I get an HTML video to play with javascript in mobile Safari?? - and why is autoplay not working?

Also here is the code that assigns the video attributes (triggered by an observer on the file change event):

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();
Robert Carter Mills
  • 793
  • 1
  • 9
  • 19

1 Answers1

3

You can't. Calling play on the video only works if it's in response to a user action, like in a click event handler. This is by design.

Can you autoplay HTML5 videos on the iPad?

Community
  • 1
  • 1
aldel
  • 6,489
  • 1
  • 27
  • 32