本文共 1320 字，大约阅读时间需要 4 分钟。
项目 - 音视频播放
在该项目中，我们需要实现视频时长获取以及实时播放时长显示功能。为此，我们将使用视频标签相关的API来完成相关功能。
首先，我们需要获取视频的时长和当前播放位置，这可以通过视频标签的duration属性和currentTime属性来实现。duration属性返回视频的总时长，currentTime属性则返回当前播放的位置（以秒计）。
其次，我们需要实现视频的播放和暂停功能，分别通过video.play()和video.pause()方法来控制视频播放状态。此外，在视频播放过程中，我们需要实时更新播放进度，并显示当前播放时间。
为了更好地展示播放进度，我们可以在视频播放器中添加一个进度条。进度条的宽度可以根据当前播放位置占总时长的比例来计算：progressWidth = (video.currentTime / video.duration) * 100%。同时，我们还可以为播放时间显示添加具体的时长格式化，比如将时间转换为MM:SS:ccc格式。
在实现上，我们可以通过以下方式来完成：
获取视频时长并显示总时长：
video.oncanplay = function() { // 显示视频总时长 playTime.innerHTML = Time(video.duration);}实现播放控制功能：
play_btns.onclick = function() { if (tag) { video.play(); play_btns.className = "play_b"; tag = false; } else { video.pause(); play_btns.className = ""; tag = true; }}实现实时播放进度更新：
video.ontimeupdate = function() { // 更新播放时间显示 playCur.innerText = Time(video.currentTime); // 更新进度条宽度 slide.style.width = (video.currentTime / video.duration) * 100 + "%";}为了实现时间格式化，我们可以使用以下函数：
function Time(date) { var hours = PadTime(parseInt(date / 3600)); var mis = PadTime(parseInt(date % 3600 / 60)); var sec = PadTime(parseInt(date % 60)); return hours + ':' + mis + ':' + sec;}function PadTime(value) { return value < 10 ? '0' + value : value;} 通过上述方法，我们可以实现视频的播放控制以及实时播放时长显示。
转载地址：http://jtse.baihongyu.com/