Autoplay video on mobile? Facebook Home does it. What am I missing?

StackOverflow https://stackoverflow.com/questions/19107878

Frage

I'm trying to add a video to my homepage in replace of a slider.

I understand how and why mobile devices disable autoplay.

However FacebookHome and Youtube will autoplay on mobile.

https://bg-bg.facebook.com/home

I'm using HTML5 method but it's not autoplaying on mobile. looking at Facebook Home, the code looks similar so I'm not understanding.

Any help would be much appreciated.

<video width="100%"  poster="poster.jpg" loop="1" autoplay="1">

 <source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">

</video>
War es hilfreich?

Lösung

Autoplay on most mobile platforms (Android, iOS) gets blocked to avoid poor user experiences - video should only play following a user action. You can usually work around it by triggering the play() on another event (eg the onloaded event)

Facebook Home provides a video type extension .ogv which worked on FireFox Beta only (I tried both Google chrome And Android default browser, but it just shows the poster image)

<video poster="Poster.jpg" autoplay="1" loop="1">
<source src="myVideo.mp4">
<source src="myVideo.ogv">
</video>

Demo

Another solution is to add event listener to trigger the video to be played when the user clicks on the video element

<video id="myVideo" poster="Poster.jpg">
<source src="myVideo.mp4">
<source src="myVideo.ogv">
</video>

JS: 

var video = document.getElementById('myVideo');
video.addEventListener('click',function(){
  video.play();
},false);

Demo Works with Firefox beta (Inside windows) But for in Android Browser it calls Video Player App to play the video

Resources:

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top