揭祕視訊網站video視訊倍速播放的實現
阿新 • • 發佈:2019-02-06
一、關於視訊倍速播放
B站,或者騰訊視訊等主流視訊網站視訊現在都支援倍速播放功能。
這個功能對於當下快節奏的生活而言,是很有用的,說誇張點是延長了我們的生命,哈哈哈。
對於一個靠技術吃飯人,總免不了關注點在技術實現上,究竟是如何實現的呢?且看~
二、HTML5 video視訊倍速播放的實現
噹噹噹當,實現其實很簡單,使用playbackRate
屬性控制下就好了。
playbackRate
屬性是個可讀寫的控制音視訊播放速率的屬性。
語法如下:
// 視訊獲取速率 var videoSpeed = video.playbackRate; // 視訊設定播放速率,如正常速度播放 video.playbackRate = 1.0; // 獲取音訊播放速率 var audioSpeed = audio.playbackRate; // 音訊設定播放速率,如正常速度播放 audio.playbackRate = 1.0;
倍速播放控制簡易demo
例如,我們下拉選擇2.0倍速,然後點選下面的播放按鈕:
就可以看到土味視訊效果了。
相關程式碼如下:
var select = document.querySelector('select'); var button = document.querySelector('button'); // 視訊元素 var video = document.querySelector('video'); // 改變播放速率 select.addEventListener('change', function () { video.playbackRate = this.value; }); // 點選播放按鈕 button.addEventListener('click', function () { video.play(); });
其實關鍵程式碼就下面這一行:
video.playbackRate = this.value;
是不是簡單得有點超乎想象了呢?
三、結束語
倍速播放是HTML5 video視訊播放天然支援功能,因此,視訊網站通常倍速播放只在HTML5視訊播放器中支援,傳統的flash播放器沒有這個功能,例如愛奇藝視訊:
夏日炎炎,就這些,一個技術小tips,希望能夠讓你有所收穫。
感謝閱讀,歡迎交流!