简体   繁体   English

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

[英]HTML5 video will not loop on Android devices

After some hours of trying, I want to ask how to loop a video on Android devices using the HTML5 video tag. 经过几个小时的尝试,我想问一下如何使用HTML5视频标签在Android设备上循环播放视频。

To be some kind of browser independent, I included video.js to play the videos. 为了某种独立于浏览器,我添加了video.js来播放视频。 Everything worked fine for Firefox and Chrome, but on my Android device (SSG3 with Android 4.0.4) the video won't start or loop. 一切都适用于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"> 

did not start the video. 没有启动视频。 But this was easily solved by calling video.start() in JS. 但是通过在JS中调用video.start()可以很容易地解决这个问题。 But looping does not work with that. 但循环不起作用。 Even if the loop attribute seems to be supported, it causes problems. 即使似乎支持循环属性,也会导致问题。 With attribute loop=false or even with the missing loop attribute, it is still set to true. 使用属性loop = false或甚至缺少循环属性,它仍然设置为true。

There are a couple of websites pointing out that there is the need of adding an eventlistener. 有几个网站指出需要添加一个eventlistener。 But unfortunately, it didn't work. 但不幸的是,它没有用。

The solution is to set the loop attribute to false using JS. 解决方案是使用JS将loop属性设置为false。 Even with loop=false as an attribute of the video tag or with missing loop attribute, video.loop returns true. 即使将loop = false作为视频标记的属性或缺少循环属性,video.loop也会返回true。 So to get the looping done, the following snippet did the trick: 因此,为了完成循环,以下代码段完成了这一操作:

    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();

Cheers! 干杯!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM