按钮跳过html5视频到最后

问题描述 投票:0回答:1

我有一个包含跳过按钮的视频播放器,以便用户可以跳过视频到最后。

这是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,它不起作用,

我需要改变什么来获得我想要的东西?

javascript jquery html html5
1个回答
2
投票

我相信你不需要再次调用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>
© www.soinside.com 2019 - 2024. All rights reserved.