HTML5學習第5篇—viedo：自己實現viedo的播放控制元件（簡版）
阿新 • • 發佈：2018-11-30
最近正在學習html5新增的媒體元素video，為了能夠更熟悉video的屬性、方法和事件，決定自己實現一下video的播放控制元件，因為是初學，只是寫了個簡版。程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>video 練習</title> </head> <body> <button onclick="playorpause()">播放/暫停</button> <button onclick="closeVoice()">靜音/取消靜音</button> <input type="range" id="volume" min="0" max="100" value="20" onchange="changeVolume(this)"> <button onclick="changeScreen()">全屏/退出全屏</button> <br> <video id="myVideo" src="../mov/mov_bbb.mp4" width="500px"> 您的瀏覽器不支援是視訊播放 </video> <div style="width: 500px"> <label id="startTimeLabel">0:00</label> <input type="range" id="progressBar" min="0" max="100" style="width: 80%" onchange="changeProgress(this)" value="0"> <label id="totalTimeLabel"></label> </div> <script type="text/javascript"> var myVideo = document.querySelector("#myVideo"); //播放或暫停 function playorpause(){ if(myVideo.paused){ myVideo.play(); }else{ myVideo.pause(); } } //設定靜音和取消靜音 function closeVoice(){ myVideo.muted = !myVideo.muted; } //改變聲音大小 function changeVolume(obj){ myVideo.volume = obj.value/100; console.log(myVideo.volume); } //全屏 function goFullScreen() { element = document.getElementById('myVideo'); if (element.requestFullscreen) { //w3c element.requestFullscreen(); } else if (element.mozRequestFullScreen) { //moz Firefox element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { //IE element.msRequestFullscreen(); } else if (element.oRequestFullscreen) { //Opera element.oRequestFullscreen(); } else if (element.webkitRequestFullscreen) { //webkit核心 Chrome Safari element.webkitRequestFullScreen(); } else { var docHtml = document.documentElement; var docBody = document.body; var cssText = 'width:100%;height:100%;overflow:hidden;'; docHtml.style.cssText = cssText; docBody.style.cssText = cssText; element.style.cssText = cssText + ';' + 'margin:0px;padding:0px;'; document.IsFullScreen = true; } } //退出全屏 function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.oCancelFullScreen) { document.oCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else { var docHtml = document.documentElement; var docBody = document.body; var videobox = document.getElementById('videobox'); docHtml.style.cssText = ""; docBody.style.cssText = ""; videobox.style.cssText = ""; document.IsFullScreen = false; } } //判斷是否全屏 function isFullScreen(){ return document.fullscreen || document.msFullscreenElement || document.msFullscreenElement || document.mozFullScreen || document.oFullScreen || document.webkitIsFullScreen; } function changeScreen(){ console.log(document.webkitIsFullScreen); if(isFullScreen()){ exitFullscreen(); }else{ goFullScreen(); } } function changeProgress(obj){ console.log(obj.value); var time = myVideo.duration*(obj.value/100); myVideo.currentTime = time; console.log(time); } myVideo.addEventListener("timeupdate",function(){ var pValue = (myVideo.currentTime/myVideo.duration)*100; document.querySelector('#progressBar').value = pValue; }); myVideo.addEventListener("ended",function(){ myVideo.currentTime = 0; myVideo.pause(); }); myVideo.addEventListener("loadedmetadata",function(){ document.querySelector('#totalTimeLabel').innerText = getTimeBySecond(myVideo.duration); }); function getTimeBySecond(second){ var hour = parseInt(second / (60* 60)); var minute = parseInt((second/60) % 60); var second = parseInt(second % 60); return (hour > 0 ?((hour < 10 ? "0" + hour:hour) + ":") : "") + (minute < 10 ? "0" + minute:minute) + ":" + (second < 10 ? "0" + second:second); } </script> </body> </html>