Autostart html5 video using android 4 browser

It seems that Android 4+ changed the requirements for the play() method to require user interaction. If you trigger play() from within a user event handler (eg. touchstart or mousedown), then you can play the video as long as you run it inside the same event loop.

This means that you shouldn’t use async triggers to call play(), but rather call play inside the same event handler without setTimeout() and such, so stuff like time-delayed play is out of the question.

One way is to use the same trick on Android 4 as in iOS – use the first user interaction event to play() and pause() the video. This will enable the video for manipulation later, since you played it during a user initiated action. After you’ve successfully primed the video, you can call play methods at any time later, regardless of whether the call was made inside the event handler loop or not.

EDIT: Here’s a sample code that works on HTC and Samsung, but not Galaxy Nexus 4.1 (requires user interaction to play):

var myVideo = document.getElementById('myvideo');

myVideo.addEventListener('canplay', function() {
  myVideo.play();
});

myVideo.load();
myVideo.play();

Leave a Comment