效果圖如下：
代碼示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> <style type="text/css"> *{ margin: 0; padding: 0; } figcaption{ text-align: center; font-size: 25px; font-family: "微軟雅黑"; line-height: 150px; } .player{ width: 720px; height: 360px; border:1px solid #000; margin: 100px auto; background-color: pink; text-align: center; background: url(images/loading.gif); position: relative; } .player video{ height: 100%; margin: 0 auto; display: block; } .controls{ width: 700px; height: 40px; background-color: rgba(255,255,0,0.3); position: absolute; bottom: 10px; left: 10px; } .controls .switch{ width: 20px; height: 20px; position: absolute; left: 10px; bottom: 10px; text-align: center; line-height: 20px; color: yellow; } .controls .progress{ width: 435px; height: 10px; background-color: rgba(255,255,255,0.4); position: absolute; left: 40px; bottom:15px; border-radius: 5px; overflow: hidden; } .curr-progress{ width: 30%; height: 10px; background-color: #fff; border-radius: 5px; } .time{ width: 120px; height: 20px; position: absolute; left: 490px; bottom: 10px; font-size: 12px; line-height: 20px; text-align: center; } .extend{ width: 20px; height: 20px; position: absolute; right: 20px; bottom: 10px; text-align: center; line-height: 20px; color: yellow; } </style> </head> <body> <figure> <figcaption>視頻案例</figcaption> <div class="player"> <video src="video/fun.mp4"></video> <!-- 控制條 --> <div class="controls"> <!-- 播放暫停按鈕 --> <a href="#" class="switch icon-play"></a> <!-- 進度條 --> <div class="progress"> <!-- 當前進度 --> <div class="curr-progress"></div> </div> <!-- 時間 --> <div class="time"> <span class="curr-time">00:00:00</span>/ <span class="total-time">00:00:00</span> </div> <!-- 全屏 --> <div class="extend icon-resize-full"></div> </div> </div> </figure> <script type="text/javascript"> // 思路： // 1.點擊按鈕，實現播放暫停並且切換圖標 // 2.算出視頻的總時長顯示出來 // 3.當視頻播放的時候，進度條同步，當前時間同步 // 4.點擊實現全屏 //獲取所需圖標 var video = document.querySelector('video'); //播放按鈕 var playBtn = document.querySelector('.switch'); //當前進度條 var currProgress = document.querySelector('.curr-progress'); //當前時間 var currTime = document.querySelector('.curr-time'); //總時間 var totalTime = document.querySelector('.total-time'); //總屏 var extend = document.querySelector('.extend'); //1.點擊按鈕，實現播放暫停並且切換圖標 playBtn.onclick = function(){ //判斷是否處於播放狀態，是,就暫停，更換成暫停的圖片 if (video.paused) { video.play(); this.classList.remove('icon-play'); this.classList.add('icon-pause'); }else{ video.pause(); this.classList.remove('icon-pause'); this.classList.add('icon-play'); } } // 2.算出視頻的總時長顯示出來 video.oncanplay = function(){ //計算出視頻的總時長 var tTime = video.duration; //轉換時長 var h = Math.floor(tTime/3600); var m = Math.floor(tTime%3600/60); var s = Math.floor(tTime%60); //轉換格式 h = h>10?h:"0"+h; m = m>10?m:"0"+m; s = s>10?s:"0"+s; //在頁面上顯示 totalTime.innerHTML = h+":"+m+":"+s; } // 3.當視頻播放的時候，進度條同步，當前時間同步 video.ontimeupdate = function(){ //獲取當前時間 var cTime = video.currentTime; //計算出視頻的總時長 var tTime = video.duration; //轉換時長 var h = Math.floor(cTime/3600); var m = Math.floor(cTime%3600/60); var s = Math.floor(cTime%60); //轉換格式 h = h>10?h:"0"+h; m = m>10?m:"0"+m; s = s>10?s:"0"+s; //在頁面上顯示 currTime.innerHTML = h+":"+m+":"+s; //進度條同步 當前時間/總時間 var value = cTime/tTime; currProgress.style.width = value*100+"%"; //當播放完畢之后，播放暫停按鈕要轉換成暫停按鈕 if (cTime===tTime) { playBtn.classList.remove('icon-play'); playBtn.classList.add('icon-pause'); } } // 點擊按鈕全屏 extend.onclick = function(){ video.webkitRequestFullScreen(); } </script> </body> </html>