DeathGhost

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

这篇文章发布于 2019年07月13日 01:04 星期六 阅读 547 次,评论 0 条

DeathGhost 编辑,归类于javascript »

我们可以通过playbackRate属性对web音频或视频进行速率控制,进而对部分用户提供辅助性选择体验。

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

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

playbackRate 视频音频播放速率
playbackRate 视频音频播放速率

在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条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。


孙志锋more,08年毕业于外事EC专业,从事5年服装B2C运营管理于杭;现,西安从事IT领域前端设计开发工作。
4

目录

32

文章

7

评论

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕