音视频播放-白红宇

音视频播放

阅读量：340 次

发布时间：2019-03-04

本文共 1346 字，大约阅读时间需要 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/

你可能感兴趣的文章