我有一个包含跳过按钮的视频播放器,以便用户可以跳过视频到最后。
这是html
<video id="video1" style="height: 100%" class="video-js vjs-default-skin" controls muted autoplay="true">
</video>
跳过功能
function skipVideoTime(){
$('.skip_button').on('click', function () {
var vid = $("#video1")[0];
var vidDuration = Math.floor(vid.duration);
skipTime(vidDuration);
console.log(vidDuration);
})
}
function skipTime(time) {
var vid = $("#video1")[0];
vid.play();
vid.pause();
vid.currentTime = time;
vid.play();
console.log(vid.duration);
};
$(function () {
skipVideoTime();
});
以下是来自上述功能的控制台日志
32.534
32
现在,当我单击按钮时,它跳到32分钟,因为我使用数学楼层功能,如果我删除数学楼层,以便它可以跳到32.534
,它不起作用,
我需要改变什么来获得我想要的东西?
我相信你不需要再次调用play()
函数。因为一旦媒体被寻找到最后(直到它的总持续时间),调用play()
将什么都不做,但从一开始就再次运行视频。看看下面的代码片段。
var video = document.getElementById("myvid");
var button = document.getElementById("button");
button.addEventListener("click", function(e) {
console.log(video.duration);
video.play();
video.pause();
video.currentTime = video.duration;
// video.play();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<video src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls id="myvid"></video>
<button id="button">skip</button>
</body>
</html>