我知道这个问题已经被问了很多次了,我已经在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>
有没有人成功做到了这一点?如果是这样的话,你能发布一个完整的解决方案吗?我通常不会要求或想要这些,但我认为这一次可能是必要的。
发布于 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。我没有注意到你的问题下面有关于哺乳动物的评论。:)
发布于 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。
我希望这能有所帮助。
https://stackoverflow.com/questions/20753861
复制相似问题