首页 > 前端 > HTML5 音频或视频实现倍速播放
2021
09-01

HTML5 音频或视频实现倍速播放

在视频网站中我们常常会看到工具栏中有“倍速”或“倍速播放”等功能操作,进而满足部分群体需求。

当然了,这种设计属于辅助性功能体验,我们可以将其进行辅助性设计添加。

在HTML5中基于<audio><video>元素我们可以通过JavaScript控制playbackRate属性值对其实现功能操作。

语法:

audio|video.playbackRate=playbackspeed

示例:

// HTML 部分:
<audio src="audio.mp3" controls id="audio"></audio>
<select id="select" onchange="changeRate()">
   <option value="1" selected>1</option>
   <option value="0.5">0.5</option>
   <option value="2">2</option>
</select>

添加<audio>元素,放置一个速率选择标签,通过changeRate变更音频或视频速率。

const audio = document.getElementById('audio');
const select = document.getElementById('select');
// change rate ...
function changeRate() {
    audio.playbackRate = select.options[select.selectedIndex].value;
}

playbackRate我们可以设置0.5(慢)、1(正常)、2(快),以变更播放速度。

<video>元素和上面的方法一样,达到音频与视频速率的变动。


本文》有 0 条评论

留下一个回复