循环播放 HTML5 视频，

发布于 2024-12-05 05:05:49 字数 531 浏览 1 评论 0原文

我正在尝试使用 jQuery 循环一段 HTML 视频，特别是当视频达到 7 秒时，我希望它循环回 0。我无法将实际视频剪切到 7 秒并使用“循环”由于 firefox 和 mobile safari 不支持，因此在 video 标签内运行该功能。

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

有什么想法吗？

<脚本类型=“text/javascript”> // 当达到 7 秒时循环回到 0 的脚本

...

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小草泠泠 2024-12-12 05:05:49

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

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

回复收藏 0 原文

只是在用心讲痛 2024-12-12 05:05:49

这是一个小小的替代方案......
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>

Here is a slight alternative...
https://stackoverflow.com/a/25722747/3681899

Important: Be careful with large files as it's more likely to pause.

<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>

回复收藏 0 原文

~没有更多了~