如何检查视频是否在不考虑起点的情况下连续播放30秒

Question

我在HTML 中有一个视频元素

<video id="video_player" controls>
<source src="{{object.video_file.url}}" type="video/mp4">
Your browser does not support the video tag.
</video>

我想要的是检查视频是否连续播放了30秒，无论它从哪里开始，以获得计数。

如何在此中为此编写JavaScript

$("#video_player")[0].addEventListener('timeupdate',(e) =>{
// logic
})

Answer 1

您需要跟踪视频何时开始、停止或暂停。让我们把它存储在一个变量中：

var startTime = new Date();

制作一个重置计时器的功能：

function reset() {
startTime = new Date();
}

每当用户启动、停止或暂停视频时，重置计时器：

$('#video_player')[0].addEventListener('play', reset);
$('#video_player')[0].addEventListener('pause', reset);
$('#video_player')[0].addEventListener('stop', reset);

最后，在播放视频时，检查它播放了多长时间：

$('#video_player')[0].addEventListener('timeupdate', (e) => {
let elapsedSeconds = ( new Date() - startTime ) / 1000;
console.log( `Video has been playing for ${elapsedSeconds} seconds` );
if ( elapsedSeconds > 30 ) {
console.log( 'Video has been playing for more than 30 seconds!' );
// Do something special
}
});