HTML5學習第6篇—video：自己實現video的播放控制元件（新增樣式版）
阿新 • • 發佈：2018-11-30
本篇部落格接著上一篇文章，實現了一個帶樣式的video播放控制元件，程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>video control</title> <link rel="stylesheet" type="text/css" href="../css/font-awesome.css"> <link rel="stylesheet" type="text/css" href="../css/myplay.css"> </head> <body> <figure> <figcaption>視訊播放</figcaption> <div class="player"> <video id="myVideo" src="../mov/mov_bbb.mp4"></video> <div class="controls"> <a href="javascript:#" class="switch fa fa-play"></a> <a href="javascript:#" class="expend fa fa-expand"></a> <div class="progress"> <div class="line"></div> <div class="bar"></div> </div> <div class="times"> <span class="current">00:00:00</span>/ <span class="totalTime">00:00:00</span> </div> </div> </div> </figure> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> //獲取視訊物件 H5寫法 var myVideo = document.querySelector("#myVideo"); //播放或暫停 document.querySelector('.switch').addEventListener("click",function(){ //切換播放樣式 jq寫法 $('.switch').toggleClass("fa-play fa-pause"); //判斷當前視訊是否暫停 if(myVideo.paused){ myVideo.play();//播放 }else{ myVideo.pause();//暫停 } }); //全屏 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; } //全屏和退出全屏 $(".expend").on("click",function(){ //切換樣式 $(".expend").toggleClass("fa-expand fa-compress") if(isFullScreen()){ exitFullscreen(); }else{ goFullScreen(); } }); //拖動進度時 $(".bar").on("click",function(e){ var time = myVideo.duration*(e.offsetX/$(".bar").width()); myVideo.currentTime = time; }); //更新播放進度 myVideo.addEventListener("timeupdate",function(){ //更新進度條 var pValue = (myVideo.currentTime/myVideo.duration)*100; $(".line").css("width",pValue+"%"); //顯示當前播放進度的時間 document.querySelector(".current").innerText = getTimeBySecond(myVideo.currentTime); }); //播放結束時 myVideo.addEventListener("ended",function(){ //播放按鈕類樣式進行還原 $(".switch").removeClass("fa-pause").addClass("fa-play"); $(".line").css("width",0); //設定當前播放時間 myVideo.currentTime = 0; //視訊播放狀態為設定為停止 myVideo.pause(); }); //當視訊元資料載入時執行 myVideo.addEventListener("loadedmetadata",function(){ //設定總時長 document.querySelector(".totalTime").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 < 10 ? "0" + hour:hour) + ":" + (minute < 10 ? "0" + minute:minute) + ":" + (second < 10 ? "0" + second:second); }; </script> </body> </html>
css樣式表
.body{ padding: 0; margin: 0; background-color: #FFF; } figcaption{ text-align: center; font-size: 24px; margin: 20px; } a{ text-decoration: none; } .player{ width: 720px; height: 360px; margin: 0 auto; background-color: #000; position: relative; } video{ height: 100%; margin: 0 5% 0 5%; } .controls{ width: 720px; height: 40px; background-color: #1C192C; position: absolute; left: 0px; bottom: 0px; z-index: 100; border-radius: 4px; } .controls .switch{ float: left; width: 20px; height: 20px; color:#fff; position: absolute; top:11px; left:11px; } .controls .expend{ float: right; width: 20px; height: 20px; color:#fff; position: absolute; top:11px; right:11px; } .progress{ width: 500px; height: 10px; border-radius: 3px; background-color: #999; position: absolute; top:15px; left: 35px; } .progress .line{ width: 0; height: 100%; background-color:#F7F5F5; left: 0; top: 0; position: absolute; } .progress .bar{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .times{ position: absolute; top: 11px; right: 45px; color: #fff; font-size: 14px; }