html---自定義視訊播放控制檯
阿新 • • 發佈:2019-01-27
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <style> #box{ width:500px; height:40px; background:#ff0000; border-radius:10px; <!--圓角--> box-shadow:1px 1px 2px 2px #232; <!--陰影--> border:1px solid #ff0000 } .play{ <!--用css畫三角形--> width:0px;height:0px; border-left:16px solid #fff; border-top:12px solid rgba(255,255,255,0); <!--rgba指定顏色--> border-bottom:12px solid rgba(255,255,255,0); float:left; margin-top:10px; margin-left:10px;cursor:pointer; } .pause{ <!--用css畫兩條豎線--> width:6px;height:18px; border-left:4px solid #fff; border-right:4px solid #fff; float:left; margin-top:10px; margin-left:10px;cursor:pointer; } #progress{ float:left; width:60%;height:8px;background:#fff; box-shadow:1px 1px 2px 2px #232; border-radius:5px; margin-top:16px; margin-left:16px; position:relative; } #bar{ width:10%;height:100%;background:#ccc;border-radius:3px; display:inline-block;position:absolute;top:0;left:0; } #control{ width:17px;height:17px;position:absolute;border-radius:100%; left:0;top:-4px;background:#fff;box-shadow:1px 1px 2px 2px #132; cursor:pointer; } .soundon{ width:10px;height:8px; border-right:13px solid #fff; border-top:6px solid rgba(255,255,255,0); border-bottom:6px solid rgba(255,255,255,0); float:left; margin-top:10px; margin-left:10px;cursor:pointer; } .soundoff{ width:10px;height:8px; border-right:13px solid #000; border-top:6px solid rgba(255,255,255,0); border-bottom:6px solid rgba(255,255,255,0); float:left; margin-top:10px; margin-left:3px;cursor:pointer; } #volume{ float:left; width:15%;height:5px;background:#fff; box-shadow:1px 1px 2px 2px #232; border-radius:5px; margin-top:16px; margin-left:2px; position:relative; } #volume-bar{ width:10%;height:100%;background:#ccc;border-radius:3px; display:inline-block;position:absolute;top:0;left:0; } #volume-control{ width:15px;height:15px;position:absolute;border-radius:100%; left:0;top:-4px;background:#fff;box-shadow:1px 1px 2px 2px #132; cursor:pointer; } #full{ width:15px;height:15px;border:3px solid #ccc;cursor:pointer;float:left; margin-top:10px;margin-left:15px;transition:0.5s all; } #full:hover{ width:20px;height:20px;border:3px solid #ccc;cursor:pointer;float:left; margin-top:7px;margin-left:13px; } </style> <script> window.onload=function () { //box物件 var box=document.getElementById("box"); //視訊物件 var video=document.getElementById("video"); //播放按鈕 var play=document.getElementById("play"); //進度條 var progress=document.getElementById("progress"); //灰色進度條 var bar=document.getElementById("bar"); //聲音按鈕 var control=document.getElementById("control"); //喇叭 var sound=document.getElementById("sound"); //全屏 var full=document.getElementById("full") full.addEventListener("click",function () { //video.mozRequestFullScreen() video.webkitRequestFullScreen() },false) play.onclick=function () { if(video.paused){ play.className="pause"; video.play(); }else{ play.className="play"; video.pause(); } } //進度條 video.addEventListener("timeupdate",function () { var scales=video.currentTime/video.duration; bar.style.width=progress.offsetWidth*scales+"px"; control.style.left=progress.offsetWidth*scales+"px"; },false); //進度條拖拽 control.onmousedown=function (e) { video.pause(); document.onmousemove=function (e) { var leftv=e.clientX-progress.offsetLeft-box.offsetLeft; if(leftv<=0){ leftv=0; } if(leftv>=progress.offsetWidth){ leftv=progress.offsetWidth; } control.style.left=leftv+"px" } document.onmouseup=function () { var scales=control.offsetLeft/progress.offsetWidth; video.currentTime =video.duration*scales; video.play(); document.onmousemove=null; document.onmousedown=null; } } sound.onclick=function () { if(video.muted){ video.muted=false; sound.className="soundon" }else{ video.muted=true; sound.className="soundoff" } } } </script> </head> <body> <video src="iceage4.mp4" controls=controls id="video"> </video> <div id="box"> <!--播放暫停按鈕--> <div id="play" class="play"> </div> <!--進度條--> <div id="progress"> <span id="bar"> </span> <div id="control"> </div> </div> <!--喇叭--> <div id="sound" class="soundon"> </div> <!--聲音控制--> <div id="volume"> <span id="volume-bar"> </span> <div id="volume-control"> </div> </div> <div id="full"> </div> </div> </body> </html>