HTML5播放器里怎么读时间
在HTML5中，我们可以使用<video>标签来创建一个视频播放器，同时通过JavaScript和CSS来实现丰富的功能，读取视频的时间是非常重要的一个功能，本文将详细介绍如何在HTML5播放器中读取时间，并提供相关问题与解答的栏目。
使用JavaScript获取视频时间
1、1 获取视频元素
我们需要获取到<video>标签的实例，可以通过以下方式获取：
<video id="myVideo" width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
var video = document.getElementById("myVideo");
1、2 获取当前播放时间
要获取当前播放时间，我们可以使用currentTime属性：
var currentTime = video.currentTime;
console.log("当前播放时间(秒):" + currentTime);
1、3 获取视频时长
要获取视频时长，我们可以使用duration属性：
var duration = video.duration;
console.log("视频时长(秒):" + duration);
使用CSS美化时间显示
为了让时间显示更加美观，我们可以使用CSS来设置样式，我们可以设置字体大小、颜色等：
timeDisplay {
font-size: 18px;
color: 333;
}
将时间显示在页面上
要将时间显示在页面上，我们可以创建一个<div>元素，并将时间渲染到该元素中，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
timeDisplay {
font-size: 18px;
color: 333;
}
</style>
</head>
<body>
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<div id="timeDisplay"></div>
<script>
var video = document.getElementById("myVideo");
var timeDisplay = document.getElementById("timeDisplay");
var currentTime = video.currentTime;
var duration = video.duration;
var elapsedTime = (currentTime / duration) * 100; // 将时间转换为百分比表示已播放时间占总时长的比例
timeDisplay.innerHTML = "已播放时间：" + elapsedTime.toFixed(2) + "%"; // 将已播放时间显示在页面上
</script>
</body>
</html>
相关问题与解答
Q1:如何让视频播放器支持全屏模式？
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/196484.html
微信扫一扫 