使用js在特定时间线内循环html5视频
使用js在特定时间线内循环html5视频
提问于 2016-09-29 22:11:20
我有一个html5视频盒子，里面只有一个视频。在这个视频中，他们是一个有着不同动作的动画人物。举个例子:第二个1-5数字走进去，第二个5-7数字说“你好”，...我想用js控制这些动画，我想循环主动画。
这是html5视频播放器：
<video id="vidplayer">
<source src="animation.mp4" type="video/mp4"</source>
</video> 我已经测试了以下代码，在第二个7-9之间循环视频，但它不起作用：
var vid = $("#vidplayer").get(0);
vid.ontimeupdate = function(e) {
if(this.currentTime = 9) {
vid.currentTime = 7;
}
};它只适用于
(this.currentTime >= 9)但是有了这个">=“，我不能使用超过9秒的动画(比如21-29秒)。
你能帮帮我吗？谢谢！
回答 2
Stack Overflow用户
发布于 2016-10-06 04:34:50
您将需要检查您想要在其中循环的片段的开始/停止，以便约束测试。
在下面的示例中，它将从15s标记(或更大)循环回10s；从9s标记循环回7；从5s标记循环回1。
对于生产版本，我可能会创建一个跳转点的数组，并使用它来避免键入时间作为上/下，但这应该会为您提供一个框架来继续：
<video preload="auto" controls id="vidplayer">
<source src="BigBuck.m4v" type='video/mp4;'"></source></video>
<script>
var vid = document.getElementById("vidplayer")
vid.addEventListener('timeupdate', timeupdate, false);
function timeupdate() {
if (vid.currentTime >= 15) {
vid.currentTime = 10;
} else if (vid.currentTime >= 9 && vid.currentTime < 10) {
vid.currentTime = 7;
} else if (vid.currentTime >= 5 && vid.currentTime < 7) {
vid.currentTime = 1;
}
}
</script>
Stack Overflow用户
发布于 2016-12-13 22:32:23
我有同样的问题，并写了一个插件来解决它。参见https://github.com/phhu/videojs-abloop。这允许使用javascript命令来控制视频片段的循环。该示例展示了如何使用回调或其他方式控制切换视频的不同部分。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39772699
复制相关文章
相似问题
腾讯云开发者
