从所选持续时间循环播放视频

时间:2016-09-28 12:27:33

标签: javascript jquery html5 html5-video

我的设计中有一个视频文件,长度为2分钟。视频第一次从头开始播放,然后视频必须在1.00秒到2.00秒内播放。这可以用jquery吗?我尝试了其他方法。它有效,但视频有一个跳跃。 Change video source after the first video ends

以下是我的代码:

JQuery的:

document.getElementById('bgvid').addEventListener('ended', myHandler, false);

function myHandler(e) {
   //*what to do?*//
}

HTML:

div class="anim-logo ">
    <video playsinline autoplay muted  poster="assets/img/video3.jpg" id="bgvid">
    <source src="assets/img/video3.webm" type="video/webm">
    <source src="assets/img/video3.mp4" type="video/mp4">
</video>
      </div><!--end of anim logo-->

1 个答案:

答案 0 :(得分:4)

您可以这样做:

&#13;
&#13;
var video = document.getElementById('videoElm')
video.addEventListener('ended',function(){
    // set the video's start position to the video's duration minus 10 seconds. "video.currentTime" is in milliseconds, "video.duration" is in seconds
    video.currentTime = (parseInt(video.duration) - 10) * 1000;
    video.play();
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <video id="videoElm" autoplay muted>
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
&#13;
&#13;
&#13;