HTML 5 Autoplay Google Chrome Android Not Playing

Question

I'm trying to play automatically a video when the user open the page on browser. On my laptop autoplay works on all browsers, but on android it doesn´t work on Google Chrome and in Iphone it doesn't works in safari. I already did a search and google chrome in android doesn't support html5 video tag so i used some javascript but it doesn't work too. Why? What should i do? Here's my code

<video id="video" autoplay autobuffer controls="controls" allowFullScreen >
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm" webView.mediaPlaybackRequiresUserAction = NO;>
<source src="video.theora.ogv" type="video/ogg">
<source src="video.flv" type="video/flv">
<source src="video.vob" type="video/vob">
<source src="video.mov" type="video/mov">
</video>    
<script type="text/javascript">
var video = document.getElementById('video');                           video.addEventListener('video',function(){
video.play();
});

                                video.addEventListener("domready", function(){                                              video.play();
});

                                video.addEventListener("ended", function(){ 
window.location = "http://www.google.com"
});
</script>

Solution 1

Muted autoplay for video is supported by Chrome for Android as of version 53. Playback will start automatically for a video element once it comes into view if both autoplay and muted are set, and playback of muted videos can be initiated progamatically with play(). Previously, playback on mobile had to be initiated by a user gesture, regardless of the muted state.

<video autoplay muted>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
</video>

Solution 2

I was also trying to autoplay videos on android chrome and found this:

On Android, html5 video autoplay attribute does not work

#1 [email protected]

Yes. It is as design. "autoplay" is disabled for Chrome for Android.

Apparently it's intentional.

Comments

[Randy]

This is correct. But to add: Android appears to be very sensitive about how starts playing a video (presumably due to data usage). The autostart attribute nor the loop attribute work on android. Javascript cannot start the video either with one exception: Javascript can start a video as long as it is during another event (ie. Touch event).

[Ddddan]

@Randy, do you have any documentation for this? I.e. what types of events are allowed? Evidently window.onload or video.loadedmetadata isn't acceptable.

[Randy]

I don't have any documentation on this. This was mostly through trial and error. From my experience, it seemed as though any physical touch event would allow javascript to start a video. I was working on an app with a WebView and I was able to send javascript to the WebView. Oddly enough, this seemed to count as a valid user touch 'event' and it let me play videos.

[Ed_]

@Randy I would be really keen to hear more about how you managed to trigger the javascript play() from an app - can you elabaorate?

[Ed_]

@Randy - found this setting - it should help if you're developing for android 4.1+. Saved my life.

[Randy]

Thanks @EdHinchliffe! I'll give that a shot. And what I was using earlier was a complete 'hack'. Basically when you use webview.loadUrl('javascript:fakeEvent();'); it seemed to 'elevate' permissions (or something) for a short period of time. This 'elevated' level would let me call vid.play() on the video.

[Abadaba]

@EdHinchliffe how do I use the setMediaPlaybackRequiresUserGesture property in my cordova app? Where do I make the change?

[Ed_]

I've never used cordova, sorry. You need to change the settings on the webview before it loads a video, but I don't know if cordova gives you access to this?

[Nilzor]

Autoplay for muted videoes ("muted" attribute) will be supported from Chrome v52 on Android developers.google.com/web/updates/2016/07/autoplay?hl=en