HTML5视频无缝循环
HTML5视频无缝循环
提问于 2013-12-24 10:00:41
我知道这个问题已经被问了很多次了，我已经在StackOverflow上看过了每一个问题。
我只是想在HTML5播放器中循环播放一个5秒的MP4视频，并且让它变得无缝。我在本地和webspace上都尝试过jwplayer和video.js，但都没有成功。我试过使用“and”事件；我试过预加载/预缓冲；我试着监听视频的最后一秒，然后尝试从头开始完全绕过stop/play事件。我仍然总是看到抖动，我仍然总是看到加载图标(最新的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>有没有人成功做到了这一点？如果是这样的话，你能发布一个完整的解决方案吗？我通常不会要求或想要这些，但我认为这一次可能是必要的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-12-27 01:45:37
对于这类东西，你不需要任何额外的脚本。
" video“标签有内置的循环属性，使用这个属性，你的视频就会循环。
<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 video Tag
编辑: Oops。我没有注意到你的问题下面有关于哺乳动物的评论。:)
Stack Overflow用户
发布于 2015-07-03 12:59:00
试试这个：
1)这样编辑您的视频：
[1s][2s][3s][4s][5s]剪切视频的第一个第二个块，并将其添加到末尾2倍，如下所示：
[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.0s。
我希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20753861
复制相关文章
相似问题