使用js以特定时间循环html5视频 [英] loop a html5 video in specific timline with js

问题描述

我有一个html5视频盒里面只有一个视频。在这个视频中，他们是一个动画人物，有不同的动作。作为一个例子：第二个1-5数字走进里面，第二个5-7数字说你好，...我想用js控制这些动画，我想循环主动画。

i had a html5 video box with only one video inside. in this video their is a animated figure with different moves. as an example: second 1-5 the figure walks inside, second 5-7 the figure say "hello", ... i would like to control these animations with js and i would like to loop the main animation.

这是html5视频播放器：

this is the html5 videoplayer:

<video id="vidplayer">
<source src="animation.mp4" type="video/mp4"</source>
</video> 

我测试了以下代码，在第二个7-9之间循环播放视频，但它不起作用：

i have tested following code to loop the video between the second 7-9 and it doesnt work:

var vid = $("#vidplayer").get(0);

vid.ontimeupdate = function(e) {
    if(this.currentTime = 9) {
        vid.currentTime = 7;
        }
    };

仅适用于

(this.currentTime >= 9)

但是这个> =我不能使用超过9秒的动画（如21-29秒）。

but with this ">=" i cant use animations above 9 seconds (like 21-29 seconds).

你能帮我吗？谢谢！

推荐答案

我遇到了同样的问题并写了一个插件来解决它。请参阅 https://github.com/phhu/videojs-abloop 。这允许使用javascript命令来控制视频部分的循环。该示例显示了如何使用回调或其他方式控制切换视频的不同部分。

I had the same problem and wrote a plugin to solve it. See https://github.com/phhu/videojs-abloop . This allows javascript commands to be used to control looping of section of video. The example shows how you might control switching different sections of video using callbacks or otherwise.

这篇关于使用js以特定时间循环html5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！