从选定的持续时间开始循环播放视频
Play video in loop from the selected duration
我的设计中有一个长度为 2 分钟的视频文件。第一次,视频将从头开始播放,然后视频必须从 1.00 秒到 2.00 秒循环播放。使用 jquery 可以做到吗?我尝试过其他方法。它有效,但视频有跳跃。 。
这是我的代码:
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-->
你可以这样做:
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();
});
<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>
我的设计中有一个长度为 2 分钟的视频文件。第一次,视频将从头开始播放,然后视频必须从 1.00 秒到 2.00 秒循环播放。使用 jquery 可以做到吗?我尝试过其他方法。它有效,但视频有跳跃。
这是我的代码:
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-->
你可以这样做:
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();
});
<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>