視頻播放器
阿新 • • 發佈：2018-11-05
image ges set 不同的 ogre 結束 order bubuko fff
某個HTML5視頻中，老師布置的作業……
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> figcaption{ text-align: center; font-size: 2em; font-family: cursive; font-weight: bolder; } .player{ width: 710px; height: 420px; margin:0 auto; padding: 20px; background: black; border-radius: 5px; position: relative; } video{ height: 400px; } .switch.fa-play{ /* 幾級寫的三角形 padding: 0px; display: inline-block; border-left:15px solid #ffffff; border-right: 10px solid transparent; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-top: 8px; margin-left: -15px;*/ height: 20px; width: 20px; margin-left: -15px; margin-top: 5px; display: inline-block; } img{ width: 18px; height: 18px; } .expand.fa-expand{ float: right; margin-top: 6px; margin-right: -18px; } .expand.fa-expand img{ width: 14px; height: 14px; } .progress{ width: 80%; margin-top: -18px; margin-left: 10px; } .progress div{ border-radius: 5px; } .progressBG{ background: gray; height: 10px; width: 100%; } .loaded{ background: lightgray; height: 10px; width: 0px; margin-top: -10px; } .line{ height: 10px; background: #ff9999; width: 0%; z-index: 20; margin-top: -10px; } .bar{ background: transparent; height: 10px; width: 100%; z-index: 20; margin-top: -10px; } .timer{ float: right; margin-top: -12px; color: white; font-size: 12px; margin-right: 24px; } .voice{ float: right; margin-right: -122px; margin-top: -12px; } </style> <script> /** figure 標簽規定獨立的流內容（圖像、圖表、圖片、代碼等等） figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。 請使用figcaption元素為figure添加標題 **/ </script> </head> <body> <figure> <figcaption>視頻播放器</figcaption> <div class="player"> <video src="1.mp4"></video> <!-- <video src="//vdse.bdstatic.com//a0f03cd8fdac820e38415ebbc1b22e80.mp4?authorization=bce-auth-v1/40f207e648424f47b2e3dfbb1014b1a5/2017-05-11T09:02:31Z/-1//648b2365f868d010992d4f5b82f24561599b47d194bb987113a06b559dc616e1"></video> <div class="controls"> --> <!-- 播放/暫停 --> <a href="javascript:;" class="switch fa fa-play"> <img src="images/播放.svg"> </a> <!-- 全屏 --> <a href="javascript:;" class="expand fa fa-expand"> <img src="images/全屏.svg"> </a> <!-- 進度條 --> <div class="progress"> <div class="progressBG"></div> <div class="loaded"></div> <div class="line"></div> <div class="bar"></div> </div> <!-- 時間 --> <div class="timer"> <span class="current">00:00:00</span> <span class="total">00:00:00</span> </div> <!-- 聲音 --> <a href="javascript:;" class="voice"> <img src="images/聲音.svg"> </a> </div> </div> </figure> <!-- 引入jquery文件 --> <script type="text/javascript" src="jquery-2.2.3.min.js"></script> <script> $(function(){ var video=$(‘video‘)[0], line=$(‘.line‘);//獲取視頻播放時的進度條 //播放和暫停視頻 $(‘a.switch‘).on(‘click‘,function(){ if(video.paused){ video.play(); $(this).find(‘img‘).attr(‘src‘,‘images/暫停.svg‘); }else{ video.pause(); $(this).find(‘img‘).attr(‘src‘,‘images/播放.svg‘); } }); //視頻可以播放的時候的事件 video.oncanplay=function(){ video.style.display="block"; //video.duration 返回視頻的長度已秒計 h=Math.floor(video.duration/3600); m=Math.floor(video.duration/60); s=Math.floor(video.duration%60); h=h<10?"0"+h:h; m=m<10?"0"+m:m; s=s<10?"0"+s:s; //顯示總時長 $(".total").text(h+":"+m+":"+s); } //更新播放進度條的效果實現 video.ontimeupdate=function(){ //video.ontimeupdate當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）運行的腳本 //兩件事 //進度條走起來 //時間不停的更新 var value=0;//進度條默認的寬度 if(video.currentTime>0){ //計算進度條的長度 value=video.currentTime/video.duration*100; } line.css(‘width‘,value+"%"); //顯示當前的進度時間 h=Math.floor(video.currentTime/3600); m=Math.floor(video.currentTime/60); s=Math.floor(video.currentTime%60); h=h<10?"0"+h:h; m=m<10?"0"+m:m; s=s<10?"0"+s:s; $(‘.current‘).text(h+":"+m+":"+s); //緩存 var timeRange=video.buffered; console.log(timeRange); console.log(‘start‘+timeRange.start(0)); console.log(‘end‘+timeRange.end(0)); value2=timeRange.end(0)/155.518*100; $(‘.loaded‘).css(‘width‘,(value2>100?100:value2)+"%"); } //跳躍 $(‘.bar‘).on(‘click‘,function(e){ //獲取的是鼠標點擊的位置的橫坐標 video.currentTime=(e.offsetX/$(".bar").width())*video.duration; // $(‘.switch‘).find(‘img‘).attr(‘src‘,‘images/播放.svg‘); }) //視頻播放結束事件 video.onended=function(){ //播放按鈕的類樣式還原 $(‘.switch‘).find(‘img‘).attr(‘src‘,‘images/暫停.svg‘); line.css("width",0); video.currentTime=0; } //全屏 $(‘.expand‘).on("click",function(){ video.webkitRequestFullScreen(); }) //聲音 $(‘.voice‘).on(‘click‘,function(){ if(video.muted){ video.muted=false;//不靜音 $(this).find(‘img‘).attr(‘src‘,‘images/聲音.svg‘); }else{ video.muted=true;//靜音 $(this).find(‘img‘).attr(‘src‘,‘images/靜音.svg‘); } }) }) </script> </body> </html>
圖片來自阿裏圖標庫
效果如下：
實現，全屏，暫停，播放，靜音，跳躍播放功能
視頻播放器