HTML5 视频不会在 Android 设备上循环播放

Posted

技术标签:

【中文标题】HTML5 视频不会在 Android 设备上循环播放【英文标题】:HTML5 video will not loop on Android devices 【发布时间】:2012-06-28 20:50:36 【问题描述】:

经过几个小时的尝试,我想问一下如何使用 html5 视频标签在 android 设备上循环播放视频。

为了独立于某种浏览器,我包含了 video.js 来播放视频。在 Firefox 和 Chrome 上一切正常,但在我的 Android 设备(带有 Android 4.0.4 的 SSG3)上,视频无法启动或循环播放。

<video id="model_video" autoplay loop preload="auto" data-setup=""    poster="images/black.jpg"> 

没有开始播放视频。但这很容易通过在 JS 中调用 video.start() 来解决。但是循环不适用于此。即使似乎支持循环属性,它也会导致问题。使用属性 loop=false 或者即使缺少 loop 属性,它仍然设置为 true。

有几个网站指出需要添加事件监听器。但不幸的是,它没有奏效。

【问题讨论】:

【参考方案1】:

解决方法是使用JS将loop属性设置为false。即使将 loop=false 作为视频标签的属性或缺少循环属性,video.loop 也会返回 true。所以为了完成循环,下面的 sn-p 做到了:

    var video = document.getElementById("model_video"); 
    //this did the trick
    video.loop = false; 
    video.addEventListener('ended', function()  
      video.currentTime=0.1; video.play(); , false);
    video.play();

干杯!

【讨论】:

从meta 来到这里。如果这您问题的答案,您应该使用旁边的透明勾号图标将其标记为您的答案。

以上是关于HTML5 视频不会在 Android 设备上循环播放的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 视频 - 在 Android 设备上精确寻找帧?

如果定位在视口之外,html5 视频不会在 OSX Safari 中自动播放

HTML5 视频控件在 Android 设备上以全屏模式消失

WebView 中的 Android HTML5 视频

可以在 iOS 设备上强制 HTML5 视频预加载吗?

html5视频android:全屏保持纵横比