本文主要是介绍h5视频倍速播放功能(视频多倍速观看功能的实例),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
h5视频倍速播放功能(视频多倍速观看功能的实例)
写倍速播放器代码的原理,采用的是video的playbackRate属性 ( playbackRate 属性设置或返回音频/视频的当前播放速度)。
主要代码:
<video id="video" width="180" height="314" autobuffer controls src="./sing-song.mp4" type="video/mp4"></video> <p>选择播放速率:<select id="selRate"><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></p> <p><button id="btnPlay">视频播放</button></p>
var eleSelect = document.getElementById('selRate'); var eleButton = document.getElementById('btnPlay'); // 视频元素 var video = document.getElementById('video'); // 改变播放速率 eleSelect.addEventListener('change', function () {video.playbackRate = this.value; }); // 点击播放按钮 eleButton.addEventListener('click', function () {video.play(); });
倍数功能视频播放器的应用(参考效果)
这篇关于h5视频倍速播放功能(视频多倍速观看功能的实例)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!