·您當前的位置:主頁 > 技術教程 > 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. }); 

                           

                          熱門文章推薦

                          請稍候...