[英]HTML5 Video Seamless Looping
我知道这个问题已经被问过很多次了,我已经在 StackOverflow 上浏览了其中的每一个。
我只是想在 HTML5 播放器中循环播放一个 5 秒的 MP4 视频并让它无缝连接。 我在本地和网络空间都尝试过 jwplayer 和 video.js,但都没有成功。 我试过使用“结束”事件; 我试过预加载/预缓冲; 我试过听视频的最后一秒,然后从头开始完全绕过停止/播放事件。 我仍然总是看到抖动,我仍然总是看到加载图标(最新的 Chrome 和 Firefox)。
作为参考,这是我最新的 video.js 代码:
<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
width="640" height="480"
data-setup='{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}'>
<source src="video/loop_me.mp4" type="video/mp4" />
</video>
<script type="text/javascript">
var myPlayer = videojs("loop_me");
videojs("loop_me").ready(function(){
this.on("timeupdate", function(){
var whereYouAt = myPlayer.currentTime();
if (whereYouAt > 4) {
myPlayer.currentTime(1);
}
});
});
</script>
有没有人成功地做到了这一点? 而且,如果是这样,您能否发布一个完整的解决方案? 我通常不会要求或想要那些,但我认为这次可能是必要的。
试试这个:
1) 以这种方式编辑您的视频:
[1s][2s][3s][4s][5s]
剪切视频的第 1 秒块并将其 2x 附加到末尾,如下所示:
[2s][3s][4s][5s][1s][1s]
2)使用代码:
<video id="vid" width="100" height="50" loop autoplay preload="true">
<source src="something.mp4" type="video/mp4">
</video>
<!-- Goes to end of body of course -->
<script>
var vid = document.getElementById("vid");
vid.addEventListener("timeupdate", function () {
if(this.currentTime >= 5.0) {
this.currentTime = 0.0;
}
});
</script>
这背后的想法是让视频无缝(视频的结尾是视频的开头)。 此外,您必须确保视频永远不会结束。 loop 属性适用于较小的视频文件,但如果太大(在下一次循环迭代之前),您会在视频末尾看到黑色图像。 基本上在视频结束之前,您正在寻求回到 0.0 秒。
我希望这有帮助。
赫里卡!
我们已经在我工作的地方找到了解决这个问题的实际、真实、无变通的解决方案。 它也通过多个开发人员解释了不一致的行为。
tl;dr 版本是:比特率。 谁会猜到? 我想很多人为此使用标准值,如果您使用 Adobe Media Encoder,那么 HD 视频通常约为 10 Mbit/s。 这还不够。 正确的值应该是18 Mbit/s或更高。 16 还是有点卡。 我无法表达这有多好。 到目前为止,我已经尝试了大约五个小时的最混乱的解决方法,直到我与我们的视频编辑器一起找到了它。
我希望这对每个人都有帮助,并为您节省大量时间!
Doozerman 和 Offbeatmammal 是正确的:在 HTML5 中循环视频不需要 Javascript。
关于每次迭代之前的暂停:在某些浏览器中,我们也可以在测试中观察到循环结束时的暂停。 例如,在内嵌的 22 秒演示视频中... http://www.externaldesign.com/Marlin-Ouverson.html
...在 OS X 下,我们看到大约 0.5 秒。 在循环重复之前暂停——仅在 Firefox 和 Safari 中; Chrome 和 Opera 都播放循环,没有明显的停顿。 但请注意:对于台式机/笔记本电脑浏览器,上述页面提供了一个添加的全屏背景视频,在上述所有四个浏览器中似乎都没有停顿地循环播放。
你不需要任何额外的脚本来处理这种事情。
“视频”标签内置循环属性,使用它,您的视频将循环播放。
<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="480" controls autoplay loop>
<source src="video/loop_me.mp4" type="video/mp4" />
</video>
如果需要,您还可以添加 preload 属性。 如果需要,您可以在此处找到有关视频标签的更多信息: HTML 视频标签
编辑:哎呀。 没有注意到 Offbeatmammals 在您的问题下发表评论。 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.