Html5播放器实现倍速播放的方法示例
定义和用法
playbackRate 属性设置或返回音频的当前播放速度。
| playbackspeed |
指示音频的当前播放速度。 例值:
|
示例代码1:
代码示例:
<video id="video" controls src="**.mp4" type="video/mp4"></video> 选择倍速播放: <select id="select"> <option value="0.5">0.5</option> <option value="1" selected>1.0</option> <option value="1.25">1.25</option> <option value="1.5">1.5</option> <option value="2">2.0</option> </select>
var select = document.getElementById('select');
var video = document.getElementById('video');
select.addEventListener('change', function () {
video.playbackRate = this.value;
})
示例2:
应用倍速实例。
<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
vid: 'e785b2c81c9e018296671a1287e99615_e',
});
</script>
| speed | boolean/array | [2, 1.5, 1.2, 0.5] | 设置为false则关闭倍速,可传入数组自定义显示哪几种倍速,速率1不需要填入,会自动添加,所设置速率值必须大于0,少于或等于3,最多设置6种速率(不包含1),所设置值会按由大到小自动排序 |
设置倍速代码如下:
<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
wrap: '#player',
width: 800,
height: 533,
speed:[2, 1.5, 1.2, 0.5], //倍速播放参数设定值
vid: 'e785b2c81c9e018296671a1287e99615_e',
});
</script>
到此这篇关于Html5播放器实现倍速播放的方法示例的文章就介绍到这了,更多相关Html5倍速播放内容请搜索万象站长学堂以前的文章或继续浏览下面的相关文章,希望大家以后多多支持万象站长学堂!
您可能感兴趣的文章
- 2025-10-22 23:37给原生html中添加水印遮罩层的实现示例
- 2025-10-23 19:01html中table固定头部表格tbody可上下左右滑动
- 2025-10-23 19:42Dreamweaver cs5怎么使用实时视图?
- 2025-10-22 08:47HTTP返回码大全(中英解释)
- 2025-10-23 20:30CSS3的几个标签速记(推荐)
- 2025-10-22 09:48macOS 12.4Beta4值得更新吗?macOS 12.4Beta4更新介绍
- 2025-10-23 21:14Dreamweaver页面怎么制作悬浮在固定位置的导航?
- 2025-10-22 11:22Kylin 下挂载软驱的方法
- 2025-10-23 21:57css前端知识点总结(必看篇)
- 2025-10-22 12:25电脑锁屏键是哪个 电脑快速锁屏按键教程




粤公网安备 13010202004186