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

2023-12-02 0 807

定义和用法

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>

到此这篇关于Html5播放器实现倍速播放的方法示例的文章就介绍到这了,更多相关Html5倍速播放内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持悠久资源网!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 HTML5 Html5播放器实现倍速播放的方法示例 https://www.u-9.cn/sheji/html5/27782.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务