溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“HTML 5、CSS3、JS怎么開發(fā)播放器”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“HTML 5、CSS3、JS怎么開發(fā)播放器”吧！
1.下載MediaElement.js
首先下載MediaElement.js腳本文件，這是一個開源的HTML5音、視頻插件，解壓后你會得到3個文件—— “flashmediaelement.swf”、 “mediaelement-and-player.min.js”和 “silverlightmediaelement.xap” ，分別是使用Flash、 JavaScript和 SilverLight實(shí)現(xiàn)視頻播放，并且新建一個”js”文件夾并把它們放進(jìn)去（當(dāng)然本例中并不需要 “flashmediaelement.swf” 和 “silverlightmediaelement.xap” 兩個文件，可以刪去。）。
2.HTML標(biāo)記
首先需要鏈接(link)一個jQuery庫，這里使用的是Google托管的jQuery庫。然后我們在鏈接”mediaelement-and-player.min.js”文件和CSS文件。
<head> <title>Video Player</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="css/style.css" media="screen"> </head>
當(dāng)然我們還需要添加一個HTML5 video標(biāo)記來創(chuàng)建一個視頻播放器，再添加一些屬性將它初始化。（注：poster是指視頻的預(yù)覽圖）
<video width="640" height="267" poster="media/cars.png"> <source src="media/cars.mp4" type="video/mp4"> </video>
接下來我們再加入下面的代碼來創(chuàng)建控制面板，需要添加的控制器或功能有：
alwaysShowControls – “true”則設(shè)置video控制面板永遠(yuǎn)顯示，”false”則在鼠標(biāo)移走后隱藏。
videoVolume – “horizontal”設(shè)置音量滑動控制器為水平
其它功能：暫停播放、前進(jìn)播放、聲音和全屏
<script type="text/javascript">// <![CDATA[ $(document).ready(function() { $('video').mediaelementplayer({ alwaysShowControls: true, videoVolume: 'horizontal', features: ['playpause','progress','volume','fullscreen'] }); }); // ]]></script>更多設(shè)置請查閱MediaElement.js的設(shè)置文檔。
3.播放器基本樣式設(shè)計
先修改一下樣式設(shè)置：
.mejs-inner, .mejs-inner div, .mejs-inner a, .mejs-inner span, .mejs-inner button, .mejs-inner img { margin: 0; padding: 0; border: none; outline: none; }再給video container添加樣式，下面的代碼全部都是用來控制布局的，沒有對播放器樣式做任何修改。
.mejs-container { position: relative; background: #000000; } .mejs-inner { position: relative; width: inherit; height: inherit; } .me-plugin { position: absolute; } .mejs-container-fullscreen .mejs-mediaelement, .mejs-container-fullscreen video, .mejs-embed, .mejs-embed body, .mejs-mediaelement { width: 100%; height: 100%; } .mejs-embed, .mejs-embed body { margin: 0; padding: 0; overflow: hidden; } .mejs-container-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; } .mejs-background, .mejs-mediaelement, .mejs-poster, .mejs-overlay { position: absolute; top: 0; left: 0; } .mejs-poster img { display: block; }
4.控制面板樣式設(shè)置
讓我們先從添加“播放按鈕”開始：
.mejs-overlay-play { cursor: pointer; } .mejs-inner .mejs-overlay-button { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url(../img/play.png) no-repeat; }接下來再添加視頻控制器布局：將它放在視頻底部，高度為34px，再添加一個背景顏色，配合RGBA來設(shè)置透明度。***給按鈕添加基本樣式和圖元。
.mejs-container .mejs-controls { position: absolute; width: 100%; height: 34px; left: 0; bottom: 0; background: rgb(0,0,0); background: rgba(0,0,0, .7); } .mejs-controls .mejs-button button { display: block; cursor: pointer; width: 16px; height: 16px; background: transparent url(../img/controls.png); }
5.視頻控制器
這一步我們要做的只是將控制器居右放置。所以首先我們將所有的按鈕放到控制面板上，之后再對它們的寬度、位置和背景圖片做詳細(xì)的調(diào)整。
.mejs-controls div.mejs-playpause-button { position: absolute; top: 12px; left: 15px; } .mejs-controls .mejs-play button, .mejs-controls .mejs-pause button { width: 12px; height: 12px; background-position: 0 0; } .mejs-controls .mejs-pause button { background-position: 0 -12px; } .mejs-controls div.mejs-volume-button { position: absolute; top: 12px; left: 45px; } .mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute button { width: 14px; height: 12px; background-position: -12px 0; } .mejs-controls .mejs-unmute button { background-position: -12px -12px; } .mejs-controls div.mejs-fullscreen-button { position: absolute; top: 7px; right: 7px; } .mejs-controls .mejs-fullscreen-button button, .mejs-controls .mejs-unfullscreen button { width: 27px; height: 22px; background-position: -26px 0; } .mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }
6.音量滑動控制器
音量滑動控制器的設(shè)置也一樣，設(shè)置好位置和大小，再添加一個圓角效果就可以了。
.mejs-controls div.mejs-horizontal-volume-slider { position: absolute; cursor: pointer; top: 15px; left: 65px; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { width: 60px; background: #d6d6d6; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { position: absolute; width: 0; top: 0; left: 0; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { height: 4px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
7.進(jìn)度條
進(jìn)度條的設(shè)置也同樣簡單，將它緊貼在控制面板上方就可以了，之后就是設(shè)置不同狀態(tài)（all和loaded狀態(tài)）的背景顏色?，F(xiàn)在將它初始化為零就可以在影片播放時自動改變了。（但是你看不出來。）
.mejs-controls div.mejs-time-rail { position: absolute; width: 100%; left: 0; top: -10px; } .mejs-controls .mejs-time-rail span { position: absolute; display: block; cursor: pointer; width: 100%; height: 10px; top: 0; left: 0; } .mejs-controls .mejs-time-rail .mejs-time-total { background: rgb(152,152,152); background: rgba(152,152,152, .5); } .mejs-controls .mejs-time-rail .mejs-time-loaded { background: rgb(0,0,0); background: rgba(0,0,0, .3); } .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }
8.進(jìn)度條控制器和時間提示框
這一步就該給進(jìn)度條添加一個進(jìn)度條控制器和一個時間提示框，同樣我們還是調(diào)整位置，設(shè)置寬度、高度和背景圖片，再添加一些排版樣式。
.mejs-controls .mejs-time-rail .mejs-time-handle { position: absolute; cursor: pointer; width: 16px; height: 18px; top: -3px; background: url(../img/handle.png); } .mejs-controls .mejs-time-rail .mejs-time-float { position: absolute; display: none; width: 33px; height: 23px; top: -26px; margin-left: -17px; background: url(../img/tooltip.png); } .mejs-controls .mejs-time-rail .mejs-time-float-current { position: absolute; display: block; left: 0; top: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #666666; text-align: center; } .mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }
9.綠色的已播放進(jìn)度條
本教程的***一步就是在進(jìn)度條和音量滑動條上添加綠色的已播放進(jìn)度條和音量顯示，這個也很簡單。
.mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { background: #82d344; background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%); background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); background: -o-linear-gradient(top, #82d344 0%, #51af34 100%); background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%); background: linear-gradient(top, #82d344 0%, #51af34 100%); }
感謝各位的閱讀，以上就是“HTML 5、CSS3、JS怎么開發(fā)播放器”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對HTML 5、CSS3、JS怎么開發(fā)播放器這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼