循环播放 HTML5 视频,
Posted
技术标签:
【中文标题】循环播放 HTML5 视频,【英文标题】:Looping HTML5 video, 【发布时间】: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>
【问题讨论】:
【参考方案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://***.com/a/25722747/3681899
重要提示:请小心处理大文件,因为它更有可能暂停。
<video id="video1" 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" >
<!--<embed 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>
【讨论】:
以上是关于循环播放 HTML5 视频,的主要内容,如果未能解决你的问题,请参考以下文章
视频 HTML5 / 等到 Readystate === 4 然后循环播放视频