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

问题

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>

回答1:

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:

• Ogg - Wikipedia
• Android webview html5 video autoplay not working on android 4.0.3: Best answer
• Making HTML5 Video work on Android phones

来源：https://stackoverflow.com/questions/19107878/autoplay-video-on-mobile-facebook-home-does-it-what-am-i-missing