html5视频标签video视频倍速播放的实现

html5视频标签video视频倍速播放的实现

倍速播放主要用到的是H5的基础属性，所以这里波波不多解释。开发者不熟悉的情况下还是建议看H5的相关文档。

具体代码：

HTML部分

  1. <video id="video" width="180" height="314" autobuffer controls src="./sing-song.mp4" type="video/mp4"></video>
  2. <p>选择播放速率：<select id="selRate">
  3.     <option value="0.5">0.5</option>
  4.     <option value="1" selected>1.0</option>
  5.     <option value="1.25">1.25</option>
  6.     <option value="1.5">1.5</option>
  7.     <option value="2">2.0</option>
  8. </select></p>
  9. <p><button id="btnPlay">倍速播放</button></p>

JS部分

  1. var eleSelect = document.getElementById('selRate');
  2. var eleButton = document.getElementById('btnPlay');
  3. // 视频元素 
  4. var video = document.getElementById('video');
  5. // 改变播放速率 
  6. eleSelect.addEventListener('change', function () {
  7.     video.playbackRate = this.value;
  8. });
  9. // 点击播放按钮 
  10. eleButton.addEventListener('click', function () {
  11.     video.play();
  12. });

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！