Html5播放器實現(xiàn)倍速播放的方法示例
發(fā)布時間：2023-01-12 16:36:26 作者：阿酷t(yī)ony 
我要評論
我要評論本文主要介紹了Html5播放器實現(xiàn)倍速播放的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
定義和用法
playbackRate 屬性設(shè)置或返回音頻的當(dāng)前播放速度。
| playbackspeed |
指示音頻的當(dāng)前播放速度。 例值：
|
示例代碼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：
應(yīng)用倍速實例。
<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] | 設(shè)置為false則關(guān)閉倍速，可傳入數(shù)組自定義顯示哪幾種倍速，速率1不需要填入，會自動添加，所設(shè)置速率值必須大于0，少于或等于3，最多設(shè)置6種速率（不包含1），所設(shè)置值會按由大到小自動排序 |
設(shè)置倍速代碼如下：
<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], //倍速播放參數(shù)設(shè)定值
vid: 'e785b2c81c9e018296671a1287e99615_e',
});
</script>
到此這篇關(guān)于Html5播放器實現(xiàn)倍速播放的方法示例的文章就介紹到這了,更多相關(guān)Html5倍速播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 本文給大家分享三種常規(guī)的方法創(chuàng)建自動播放的audio對象，就每種方式通過實例代碼給大家介紹的非常詳細(xì)，對html5音頻自動播放相關(guān)知識感興趣的朋友一起看看吧2021-06-21
Html5通過數(shù)據(jù)流方式播放視頻的實現(xiàn)
這篇文章主要介紹了Html5通過數(shù)據(jù)流方式播放視頻的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2021-04-27
這篇文章主要介紹了Html5頁面播放M4a音頻文件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-24
這篇文章主要介紹了Html5之webcoekt播放JPEG圖片流,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-09-22解決html5中的video標(biāo)簽ios系統(tǒng)中無法播放使用的問題
這篇文章主要介紹了解決html5中的video標(biāo)簽ios系統(tǒng)中無法播放使用的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-10HTML5 video循環(huán)播放多個視頻的方法步驟
這篇文章主要介紹了HTML5 video循環(huán)播放多個視頻的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2020-08-06html5 video全屏播放/自動播放的實現(xiàn)示例
這篇文章主要介紹了html5 video全屏播放/自動播放的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2020-08-06
HTML5 通過Vedio標(biāo)簽實現(xiàn)視頻循環(huán)播放的示例代碼
這篇文章主要介紹了HTML5 通過Vedio標(biāo)簽實現(xiàn)視頻循環(huán)播放的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨2020-08-05- 這篇文章主要介紹了html5中嵌入視頻自動播放的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-05-25
- 這篇文章主要介紹了html5自動播放mov格式視頻的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-14