当我滚动时，有没有办法显示自定义计时，如下面的我的屏幕截图。
示例，由于这是 33 秒的视频，滚动时它应显示滚动下方的计时 00:03
下面是我的 html5 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom HTML5 Video Player</title>
</head>
<body>
<div id="container">
<h1> HTML5 Video </h1>
<div id="video_container">
<video controls="true">
<source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4">
<source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type="video/ogg">
<!-- LINK TO FLASH FALLBACK PLAYER HERE. COULD BE EMBED OR OBJECT ELEMENT -->
</video>
</div>
</div>
</body>
</html>
最佳答案
var video = document.getElementById("Video1");
function seek() {
video.addEventListener("timeupdate", function() {
// Current time
var vTime = video.currentTime;
var left_begin = 105; //position where you want the displayed text to begin
var left_end = 180; // position where it is at the end
var width = left_end - left_begin;
$("#curTime").css({
left:left_begin + (width * (vTime / video.duration)) + "px"
});
console.log( $("#curTime").offset().left);
document.getElementById("curTime").textContent = vTime.toFixed(1);
}, false);
}#curTime {
left: 100px;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="Video1" width="320" height="240" controls onseeking="seek()">
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
</video>
<div id="curTime"></div>看起来像 Microsoft为您提供答案。向下滚动到“我在哪里”。那里有一个小的 javascript 函数可以获取当前时间。然后，您可以使用返回的值创建您自己的元素，该元素将出现在视频下方并滑动。
对于seeking事件，可以使用onseeking函数，如w3schools tutorial 。
希望有帮助。
关于jquery - HTML5 视频在滚动条上显示自定义计时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48666833/