循环播放 HTML5 视频，答案

【问题标题】：Looping HTML5 video,循环播放 HTML5 视频，
【发布时间】：2011-09-15 02:41:49
【问题描述】：

我正在尝试使用 jQuery 循环一段 HTML 视频，特别是当视频达到 7 秒时，我希望它循环回 0。我无法将实际视频剪切到 7 秒并使用视频标签中的“循环”功能，因为 firefox 和移动 safari 不支持它。

我需要它循环回 0 的原因是因为我们正在通过 AirPlay 将循环播放的视频流式传输到 Apple TV。我可以让它在 iPhone (Mobile Safari) 上循环播放，但是当它到达视频的“结尾”时，AirPlay 会停止。我想通过永远到达终点来欺骗浏览器无限期地播放。

有什么想法吗？

<script type="text/javascript"> // Script to loop back to back to 0 when it reaches 7 seconds </script>

...

<video id="myVideo" controls="controls" loop="loop"><source src="video.m4v" type="video/mp4" x-webkit-airplay="allow" /></video>

【问题讨论】：

标签： jquery html html5-video airplay

【解决方案1】：

<script type="text/javascript">
    $("#myVideo").bind("timeupdate", function(){
        if(this.currentTime > 7)
            this.currentTime = 0;
    })
</script>

【讨论】：

感谢 Emroot，不幸的是，当它达到 7 时，它似乎并没有循环回 0...我们错过了什么吗？
非常感谢您的帮助，不幸的是，播放头持续了 7 秒...
试过了，但还是没有停止并返回0：<script type="text/javascript"> $("#myVideo").bind("timeupdate", function(){ if(this.currentTime > 7) this.currentTime = 0; this.play(); }) </script>
您是否尝试过使用console.log 来检查事件是否已绑定？也许你需要添加 $(document).ready(function(){//code goes here});

【解决方案2】：

这里有一个小替代方案... https://stackoverflow.com/a/25722747/3681899

重要提示：请小心处理大文件，因为它更有可能暂停。

<video id="video1" width="320" height="240" poster="movie.png" autoplay loop>
  <!--<source src="movie.webm" type="video/webm">-->
  <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg">
  <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <object data="http://www.w3schools.com/tags/movie.mp4" width="320" height="240">
    <!--<embed width="320" height="240" src="movie.swf">-->
  </object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>

<script> 
(function () {
    var vidElem = document.getElementById('video1');
    console.log(vidElem);
    vidElem.addEventListener("timeupdate", function () {
        if (vidElem.currentTime > 7) {
            vidElem.currentTime = 0;
            vidElem.play();
        }
    }, false);
})();
</script>

【讨论】：