0

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

我了解移动设备如何以及为何禁用自动播放。

但是 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>
4

1 回答 1

3

大多数移动平台（Android、iOS）上的自动播放被阻止以避免糟糕的用户体验 - 视频应该只在用户操作之后播放。您通常可以通过在另一个事件（例如 onloaded 事件）上触发 play() 来解决它

Facebook Home 提供了一个仅在 FireFox Beta 上工作的视频类型扩展.ogv（我尝试了 Google chrome 和 Android 默认浏览器，但它只显示海报图像）

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

演示

另一种解决方案是添加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 beta (Inside windows) 但在 Android 浏览器中它会调用 Video Player App 来播放视频

资源：

于 2013-10-01T07:36:50.277 回答