Question

我正在尝试将视频添加到我的主页以替换滑块。

我了解移动设备禁用自动播放的方式和原因。

然而，FacebookHome和Youtube将在手机上自动播放。

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

我正在使用HTML5方法，但它不是在移动设备上自动播放。看看Facebook Home，代码看起来很相似，所以我不理解。

非常感谢任何帮助。

<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>

Answer 1

大多数移动平台（Android，iOS）上的自动播放都会被阻止以避免糟糕的用户体验 - 视频只能跟随用户播放行动。你通常可以通过触发play（）来解决它另一个事件（例如，加载的事件）

Facebook Home提供的视频类型扩展程序.ogv仅适用于FireFox Beta（我尝试过Google Chrome和Android默认浏览器，但它只显示海报图片）

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

Demo

另一个解决方案是添加event listener以触发用户点击视频元素时播放的视频

<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适用于Firefox测试版（内部窗口）但是在Android浏览器中它调用视频播放器应用程序来播放视频

资源：

手机上的自动播放视频？ Facebook Home就是这么做的。我错过了什么？

1 个答案: