您的位置:首页技术文章
文章详情页

Html5播放器实现倍速播放的方法示例

【字号: 日期:2022-06-12 14:09:17浏览:65作者:猪猪

Html5播放器,实现倍速播放的方法示例,playbackRate 属性设置或返回音频的当前播放速度。

定义和用法

playbackRate 属性设置或返回音频的当前播放速度。

playbackspeed
指示音频的当前播放速度。

例值:
1.0 正常速度
0.5 半速(更慢)
2.0 倍速(更快)
-1.0 向后,正常速度
-0.5 向后,半速

示例代码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><font face="Tahoma"><span style="white-space: normal;"></span></font>
标签: HTML