利用vedio播放視訊和原生js對其進行控制
阿新 • • 發佈：2019-01-31
直接上程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #durationbar{ width: 500px; height: 20px; } #durationbar progress{ width: 100%; height: 100%; } </style> </head> <body> <div> <video id="videoSource" width="500px"> <source src="test.mp4" type="video/mp4"> </video> <div id="durationbar"> <progress id="positionBar" value="0" max="100"></progress> </div> </div> <button id="start">開始</button> <button id="end">停止</button> <button id="pause">暫停</button> <button id="speed">2倍速度</button> <script type="text/javascript"> window.onload=function(){ var oStart = document.getElementById('start'); var oEnd = document.getElementById('end'); var oPause = document.getElementById('pause'); var oSpeed = document.getElementById('speed'); var oVideo = document.getElementById('videoSource'); // 開始函式 oStart.onclick=function(){ oVideo.play(); } // 暫停函式 oPause.onclick=function(){ oVideo.pause(); } // 停止函式 oEnd.onclick=function(){ oVideo.pause(); oVideo.currentTime=0; } // 加速函式 oSpeed.onclick=function(){ oVideo.play();oVideo.playbackRate = 4;//注意這裡速度大於4的時候，就沒有聲音了，聲音得不到同步 } // 這個事件是在視訊播放中一直執行的事件 oVideo.ontimeupdate=function(){ var oPositionBar = document.getElementById('positionBar'); oPositionBar.value= (oVideo.currentTime/oVideo.duration*100); } } </script> </body> </html>