音视频播放-白红宇

音视频播放

阅读量：340 次

发布时间：2019-03-04

本文共 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/

你可能感兴趣的文章