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

前端之家收集整理的这篇文章主要介绍了HTML5视频不会在Android设备上循环播放前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
经过几个小时的尝试,我想问一下如何使用 HTML5视频标签Android设备上循环播放视频.

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

<video id="model_video" autoplay loop preload="auto" data-setup="{}" width="90%"  height="90%" poster="images/black.jpg">

没有启动视频.但是通过在JS中调用video.start()可以很容易地解决这个问题.但循环不起作用.即使支持循环属性,也会导致问题.使用属性loop = false或甚至缺少循环属性,它仍然设置为true.

有几个网站指出需要添加一个eventlistener.但不幸的是,它没有用.

解决方法

解决方案是使用JS将loop属性设置为false.即使将loop = false作为视频标记属性或缺少循环属性,video.loop也会返回true.因此,为了完成循环,以下代码片段完成了这一操作:
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();

干杯!

原文链接:https://www.f2er.com/html5/168489.html

猜你在找的HTML5相关文章