在视频网站中我们常常会看到工具栏中有“倍速”或“倍速播放”等功能操作,进而满足部分群体需求。
当然了,这种设计属于辅助性功能体验,我们可以将其进行辅助性设计添加。
在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>元素和上面的方法一样,达到音频与视频速率的变动。
- 本文固定链接: https://phpmianshi.com/?id=3307
- 转载请注明: admin 于 PHP面试网 发表
《本文》有 0 条评论