关于ZAKER 融媒体解决方案 合作 加入

android- 在手机上自动播放视频? Facebook Home.

CocoaChina 10-23

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

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

但是 ,FacebookHome 和 Youtube 将在移动设备上自动播放 .

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

我正在使用 HTML5 方法 , 但无法在移动设备上自动播放 . 在 Facebook 主页上 , 代码看起来类似 , 所以我不明白 .

任何帮助将非常感激 .

<video width="100%" poster="poster.jpg" loop="1" autoplay="1"> <source src="//zkres.myzaker.com/webres/pWeb/zaker/www/movie.mp4" type="video/mp4"><source src="//zkres.myzaker.com/webres/pWeb/zaker/www/movie.ogg" type="video/ogg"></video>

最佳答案

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 提供了一个视频类型扩展名 .ogv, 该扩展名仅在 Fi??reFox Beta 上有效 ( 我尝试使用 Google chrome 和 Android 默认浏览器 , 但只显示了海报图像 )

<video poster="Poster.jpg" autoplay="1" loop="1"><source src="//zkres.myzaker.com/webres/pWeb/zaker/www/myVideo.mp4"><source src="//zkres.myzaker.com/webres/pWeb/zaker/www/myVideo.ogv"></video>

Demo

另一种解决方案是添加事件侦听器 , 以在用户单击视频元素时触发视频播放

<video id="myVideo" poster="Poster.jpg"><source src="//zkres.myzaker.com/webres/pWeb/zaker/www/myVideo.mp4"><source src="//zkres.myzaker.com/webres/pWeb/zaker/www/myVideo.ogv"></video>

JS:

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

Demo可与 Firefox beta ( 在 Windows 中使用 ) 配合使用 , 但在 Android 浏览器中 , 它将调用 Video Player 应用程序来播放视频

资源:

> Ogg – Wikipedia

> Android webview html5 video autoplay not working on android 4.0.3: Best answer

> Making HTML5 Video work on Android phones

以上内容由"CocoaChina"上传发布 查看原文

觉得文章不错,微信扫描分享好友

扫码分享