1. ·您当前的位置:主页 > 技术教程 > Html5技术 >

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

      时间:2019-03-21 11:31csdn.net
      [html5]html5视频标签video视频倍速播放的实现,playbackRate倍速播放的实例

      playbackRate倍速播放的实例:

      HTML5视频标签代码:

      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">酷播视频CUPLAYER播放</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. }); 

       

      热门文章推荐

      请稍候...
      彩票软件开发公司