h5的播放器樣式設置，通過jquery和js原生代碼共同實現 ...
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--插入播放按鈕得文字圖標格式（具體使用方法可以百度http://fontawesome.dashgame.com/）--> 7 <link rel="stylesheet" href="../css/font-awesome.css"> 8 <!--頁面結構設置得樣式--> 9 <style> 10 body { 11 padding: 0; 12 margin: 0; 13 font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif; 14 background-color: #F7F7F7; 15 } 16 17 a { 18 text-decoration: none; 19 } 20 .playerTitle{ 21 width:100%; 22 margin: 0 auto; 23 line-height:100px; 24 font-size: 40px; 25 text-align: center; 26 } 27 .player{ 28 width: 720px; 29 height: 360px; 30 margin: 0 auto; 31 background: url("../images/loading.gif") center no-repeat; 32 background-size: cover; 33 position: relative; 34 } 35 video{ 36 height:100%; 37 margin: 0 auto; 38 display: none; 39 } 40 .controls { 41 width: 720px; 42 height: 40px; 43 position: absolute; 44 left: 0px; 45 bottom: -40px; 46 background-color: #000; 47 } 48 .controls > .switch{ 49 width: 20px; 50 height: 20px; 51 display: block; 52 font-size: 20px; 53 color: #fff; 54 position: absolute; 55 left: 10px; 56 top: 10px; 57 } 58 .controls > .expand{ 59 width: 20px; 60 height: 20px; 61 display: block; 62 font-size: 20px; 63 color: #fff; 64 position: absolute; 65 right: 10px; 66 top: 10px; 67 } 68 .controls > .progress{ 69 width: 430px; 70 height: 10px; 71 position: absolute; 72 left:40px; 73 bottom:15px; 74 background-color: #555; 75 } 76 .controls > .progress > .bar{ 77 width:100%; 78 height:100%; 79 border-radius: 3px; 80 cursor: pointer; 81 position: absolute; 82 left: 0; 83 top: 0; 84 opacity: 0; 85 z-index: 999; 86 } 87 .controls > .progress > .loaded{ 88 width:60%; 89 height:100%; 90 background-color: #999; 91 border-radius: 3px; 92 position: absolute; 93 left: 0; 94 top: 0; 95 z-index: 2; 96 } 97 .controls > .progress > .elapse{ 98 width:0%; 99 height:100%; 100 background-color: #fff; 101 border-radius: 3px; 102 position: absolute; 103 left: 0; 104 top: 0; 105 z-index: 3; 106 } 107 .controls > .time{ 108 height: 20px; 109 position: absolute; 110 left:490px; 111 top: 10px; 112 color: #fff; 113 font-size: 14px; 114 } 115 </style> 116 </head> 117 <body> 118 <h3 class="playerTitle">視頻播放器</h3> 119 <div class="player"> 120 <video src="../mp4/chrome.mp4"></video> 121 <div class="controls"> 122 <!--javascript:; a鏈接點擊不讓跳轉 fa 庫名fa-play 文字名 文字型檔使用方法--> 123 <a href="javascript:;" class="switch fa fa-play"></a> 124 <a href="javascript:;" class="expand fa fa-expand"></a> 125 <div class="progress"> 126 <!--點擊的透明層，效果是點擊改變進度條和播放得當前時間--> 127 <div class="bar"></div> 128 <!--緩衝進度條（由於是本地視頻載入比較快所以就沒法感受到沒寫0.0）--> 129 <div class="loaded"></div> 130 <!--播放進度條--> 131 <div class="elapse"></div> 132 </div> 133 <div class="time"> 134 <!--播放當前時間--> 135 <span class="currentTime">00:00:00</span> 136 \ 137 <!--視頻時間總長度--> 138 <span class="totalTime">00:00:00</span> 139 </div> 140 </div> 141 </div> 142 <!--基於jquery的文件引入--> 143 <script src="./jquery.min.js"></script> 144 <script> 145 /*通過jq來實現功能*/ 146 $(function(){ 147 /*1.獲取播放器 對象的轉換,把jquery轉換為dom對象*/ 148 var video=$("video")[0]; 149 150 /*2.實現播放與暫停*/ 151 $(".switch").click(function(){ 152 /*實現播放與暫停的切換：如果是暫停>>播放 ，如果是播放 >> 暫停*/ 153 if(video.paused){ 154 video.play(); 155 /*移除暫停樣式，添加播放樣式*/ 156 } 157 else{ 158 video.pause(); 159 /*移除播放樣式，添加暫停樣式*/ 160 } 161 /*設置標簽的樣式 fa-pause:暫停 fa-play：播放*/ 162 $(this).toggleClass("fa-play fa-pause"); 163 }); 164 165 /*3.實現全屏操作*/ 166 $(".expand").click(function(){ 167 /*全屏>>不同瀏覽器需要添加不同的首碼>>能力測試*/ 168 if(video.requestFullScreen){ 169 video.requestFullScreen(); 170 } 171 else if(video.webkitRequestFullScreen){ 172 video.webkitRequestFullScreen(); 173 } 174 else if(video.mozRequestFullScreen){ 175 video.mozRequestFullScreen(); 176 } 177 else if(video.msRequestFullScreen){ 178 video.msRequestFullScreen(); 179 } 180 }); 181 182 /*4.實現播放業務邏輯：當視頻文件可以播放時觸發下麵的事件*/ 183 video.oncanplay=function(){ 184 setTimeout(function(){ 185 /*1.將視頻文件設置為顯示*/ 186 video.style.display="block"; 187 /*2.獲取當前視頻文件的總時長(以秒做為單位，同時獲取了小數值)，計算出時分秒*/ 188 var total=video.duration; //01:01:40 00:00:36 189 /*3.計算時分少 60*60=3600 190 * 3700:3700/3600 191 * 3700:3700%3600 >> 100 /60*/ 192 /*var hour=Math.floor(total/3600); 193 /!*補0操作*!/ 194 hour=hour<10?"0"+hour:hour; 195 var minute=Math.floor(total%3600/60); 196 minute=minute<10?"0"+minute:minute; 197 var second=Math.floor(total%60); 198 second=second<10?"0"+second:second;*/ 199 var result=getResult(total) 200 /*4.將計算結果展示在指定的dom元素中*/ 201 $(".totalTime").html(result); 202 },2000); 203 } 204 205 /*通過總時長計算出時分秒*/ 206 function getResult(time){ 207 var hour=Math.floor(time/3600); 208 /*補0操作*/ 209 hour=hour<10?"0"+hour:hour; 210 var minute=Math.floor(time%3600/60); 211 minute=minute<10?"0"+minute:minute; 212 var second=Math.floor(time%60); 213 second=second<10?"0"+second:second; 214 /*返回結果*/ 215 return hour+":"+minute+":"+second; 216 } 217 218 /*5.實現播放過程中的業務邏輯，當視頻播放時會觸發ontimeupdate事件 219 * 如果修改currentTime值也會觸發這個事件，說白了，只要currenTime值變化，就會觸發這個事件*/ 220 video.ontimeupdate=function(){ 221 /*1.獲取當前的播放時間*/ 222 var current=video.currentTime; 223 /*2.計算出時分秒*/ 224 var result=getResult(current); 225 /*3.將結果展示在指定的dom元素中*/ 226 $(".currentTime").html(result); 227 /*4.設置當前播放進度條樣式 0.12>>0.12*100=12+%>12%*/ 228 var percent=current/video.duration*100+"%"; 229 $(".elapse").css("width",percent); 230 } 231 232 /*6.實現視頻的跳播*/ 233 $(".bar").click(function(e){ 234 /*1.獲取當前滑鼠相對於父元素的left值--偏移值*/ 235 var offset= e.offsetX; 236 /*2.計算偏移值相對總父元素總寬度的比例*/ 237 var percent=
