html5媒體播放例子程式碼
阿新 • • 發佈：2019-01-30
<!DOCTYPE html> <html> <meta charset=gb2312" /> <div> <div> <video id="video" src="4_1.mp4" width="600">當前瀏覽器不支援video元素</video> </div> <div id="progressTime" style="display:none"> <div style="float:left"> <progress id="progress" max="100" style="width:450px"> </progress> </div> <div id="showTime" style="float:left;margin-left:15px"></div> <div style="clear:both"></div> </div> </div> <div> <input type="button" id ="btnPlay" onclick="playOrPause()" value="播放"/> <input type="button" id="btnSpeedUp" onclick="speedUp()" value="快放" /> <input type="button" id="btnSpeedUpDown" onclick="speedDown()" value="慢放" /> <input type="button" id="btnVolumeUp" onclick="volumeUp()" value="提高音量" /> <input type="button" id="btnVolumeDown" onclick="volumeDown()" value="降低音量" /> </div> </div> <script> var speed=1; //播放速度 var volume=1; //播放音量 var video=document.getElementById("video"); var playBtn=document.getElementById("btnPlay"); var btnSpeedUp=document.getElementById("btnSpeedUp"); var btnSpeedUpDown=document.getElementById("btnSpeedUpDown"); var btnVolumeUp=document.getElementById("btnVolumeUp"); var btnVolumeDown=document.getElementById("btnVolumeDown"); var showTime=document.getElementById("showTime"); video.addEventListener('timeupdate',updateProgress,false); //為播放器新增時間改變監聽事件 var progress=document.getElementById("progress"); progress.onclick=progressOnClick; //為progress控制元件新增點選事件 //播放或暫停 function playOrPause() { var progressTime=document.getElementById("progressTime"); progressTime.style.display=""; //顯示播放進度條和時間 if(video.paused) //如果當前播放狀態為暫停，點選後開始播放 { playBtn.value="暫停"; video.play(); video.playbackRate=speed; video.volume=volume; //啟用控制工具條其他按鈕 btnSpeedUp.disabled=""; btnSpeedUpDown.disabled=""; btnVolumeUp.disabled=""; btnVolumeDown.disabled=""; } else //如果當前播放狀態為播放，點選後暫停播放 { playBtn.value="播放"; video.pause(); //禁用控制條其他按鈕 btnSpeedUp.disabled="disabled"; btnSpeedUpDown.disabled="disabled"; btnVolumeUp.disabled="disabled"; btnVolumeDown.disabled="disabled"; } } //提高播放速度 function speedUp() { video.playbackRate+=1; speed=video.playbackRate; } //降低播放速度 function speedDown() { video.playbackRate-=1; if(video.playbackRate<0) { video.playbackRate=0; } speed=video.playbackRate; } //增大音量 function volumeUp() { if(video.volume<1) { video.volume+=0.1; if(video.volume>0) { video.muted=false; } } volume=video.volume; } //降低音量 function volumeDown() { if(video.volume>0) { video.volume-=0.1; if(video.volume==0) { video.muted=true; } } volume=video.volume; } //播放進度條點選事件，點選後從點選位置開始播放 function progressOnClick(event) { var progress=document.getElementById("progress"); if(event.offsetX) //獲取滑鼠當前點選位置與當前位置相比存在偏移量 { video.currentTime=video.duration*(event.offsetX/progress.clientWidth); //設定播放器新的播放位置 } else { video.currentTime=video.duration*(event.clientX/progress.clientWidth); } } //更新進度條狀態 function updateProgress() { var currentPercent=Math.round(Math.floor(video.currentTime)/Math.floor(video.duration)*100,0);//計算當前播放時長與視訊總時長之比 var progress=document.getElementById("progress"); progress.value=currentPercent; showTime.innerHTML=calculateTime(Math.floor(video.currentTime))+"/"+calculateTime(Math.floor(video.duration));//顯示播放時間 } //將當前傳入的時間轉換為hh:MM:ss的格式 function calculateTime(time) { var h; var m; var s; h=String(parseInt(time/3600,10)); if(h.length==1) { h='0'+h; } m=String(parseInt((time%3600)/60,10)); if(m.length==1) { m='0'+m; } s=String(parseInt(time%60),10) if(s.length==1) { s='0'+s; } return h+":"+m+":"+s; } </script> </html>
效果：
