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

ID:16209 / 打印

定义和用法

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 Canvas 绘制股市走势图
下一篇: HTML5 Web Worker(多线程处理)

作者:admin @ 24资源网   2024-11-01

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。