在计时器上显示当前视频时间(小时:分钟:秒)是一种常见的功能需求,可以通过以下步骤实现:
综上所述,实现在计时器上显示当前视频时间的功能,需要使用HTML5的video标签、JavaScript的Date对象和DOM操作。以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>显示当前视频时间</title>
</head>
<body>
<video id="myVideo" src="video.mp4"></video>
<div id="timer"></div>
<script>
var video = document.getElementById("myVideo");
var timer = document.getElementById("timer");
video.addEventListener("timeupdate", function() {
var duration = video.duration;
var currentTime = video.currentTime;
var durationDate = new Date();
durationDate.setHours(0, 0, duration);
var currentDateTime = new Date();
currentDateTime.setHours(0, 0, currentTime);
var durationHours = durationDate.getHours();
var durationMinutes = durationDate.getMinutes();
var durationSeconds = durationDate.getSeconds();
var currentHours = currentDateTime.getHours();
var currentMinutes = currentDateTime.getMinutes();
var currentSeconds = currentDateTime.getSeconds();
timer.textContent = formatTime(currentHours) + ":" + formatTime(currentMinutes) + ":" + formatTime(currentSeconds) + " / " + formatTime(durationHours) + ":" + formatTime(durationMinutes) + ":" + formatTime(durationSeconds);
});
function formatTime(time) {
return time < 10 ? "0" + time : time;
}
</script>
</body>
</html>
在上述示例代码中,video标签的src属性被设置为"video.mp4",你可以将其替换为你自己的视频文件的URL。计时器的显示格式为"当前时间 / 总时长",例如"00:01:23 / 00:05:00"。
领取专属 10元无门槛券
手把手带您无忧上云