欧美激情网,国产欧美亚洲高清,欧美屁股xxxxx,欧美群妇大交群,欧美人与物ⅴideos另类,区二区三区在线 | 欧洲

知識(shí)學(xué)堂
  • ·聯(lián)系電話:+86.023-75585550
  • ·聯(lián)系傳真:+86.023-75585550
  • ·24小時(shí)手機(jī):13896886023
  • ·QQ 咨 詢：361652718 513960520
當(dāng)前位置 > 首頁 > 知識(shí)學(xué)堂 > 網(wǎng)站建設(shè)知識(shí)
HTML5和css3實(shí)例:制作HTML5網(wǎng)頁視頻播放器
更新時(shí)間：2012-05-15 | 發(fā)布人：本站 | 點(diǎn)擊率：508 次

播放器最終效果預(yù)覽圖

導(dǎo)讀：毫無疑問HTML5已經(jīng)是大勢(shì)所趨，知名視頻網(wǎng)站YouTube在兩年前就開始推廣HTML5播放器來代替Flash。雖然國內(nèi)還沒有完全普及HTML5瀏覽器，但在各大本土瀏覽器廠商的努力下，支持HTML5的瀏覽器在中國瀏覽器市場(chǎng)的占有率也在不斷增長中。本教程將會(huì)手把手地教你制作一個(gè)基于HTML5& CSS3& JavaScript 技術(shù)的視頻播放器。

1.下載MediaElement.js

首先下載MediaElement.js腳本文件，這是一個(gè)開源的HTML5音、視頻插件，解壓后你會(huì)得到3個(gè)文件—— "flashmediaelement.swf"、 "mediaelement-and-player.min.js"和 "silverlightmediaelement.xap" ，分別是使用Flash、 JavaScript和 SilverLight實(shí)現(xiàn)視頻播放，并且新建一個(gè)"js"文件夾并把它們放進(jìn)去（當(dāng)然本例中并不需要 "flashmediaelement.swf" 和 "silverlightmediaelement.xap" 兩個(gè)文件，可以刪去。）。

2.HTML標(biāo)記

首先需要鏈接(link)一個(gè)jQuery庫，這里使用的是Google托管的jQuery庫。然后我們?cè)阪溄?mediaelement-and-player.min.js"文件和CSS文件。 

  1. <head> 
  2.     <title>Video Player</title> 
  3.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
  4.     <script src="js/mediaelement-and-player.min.js"></script> 
  5.     <link rel="stylesheet" href="css/style.css" media="screen"> 
  6. </head>

當(dāng)然我們還需要添加一個(gè)HTML5 video標(biāo)記來創(chuàng)建一個(gè)視頻播放器，再添加一些屬性將它初始化。（注：poster是指視頻的預(yù)覽圖）

  1. <video width="640" height="267" poster="media/cars.png"> 
  2.     <source src="media/cars.mp4" type="video/mp4"> 
  3. </video>

接下來我們?cè)偌尤胂旅娴拇a來創(chuàng)建控制面板，需要添加的控制器或功能有：

  • alwaysShowControls – "true"則設(shè)置video控制面板永遠(yuǎn)顯示，"false"則在鼠標(biāo)移走后隱藏。
  • videoVolume – "horizontal"設(shè)置音量滑動(dòng)控制器為水平
  • 其它功能：暫停播放、前進(jìn)播放、聲音和全屏 
    1. <script type="text/javascript">// <![CDATA[ 
    2. $(document).ready(function() { 
    3.     $('video').mediaelementplayer({ 
    4.         alwaysShowControls: true, 
    5.         videoVolume: 'horizontal', 
    6.         features: ['playpause','progress','volume','fullscreen'] 
    7.     }); 
    8. }); 
    9. // ]]></script>

更多設(shè)置請(qǐng)查閱MediaElement.js的設(shè)置文檔。

3.播放器基本樣式設(shè)計(jì)

先修改一下樣式設(shè)置：

  1. .mejs-inner, 
  2. .mejs-inner div, 
  3. .mejs-inner a, 
  4. .mejs-inner span, 
  5. .mejs-inner button, 
  6. .mejs-inner img { 
  7.     margin: 0; 
  8.     padding: 0; 
  9.     border: none; 
  10.     outline: none; 
  11. }

再給video container添加樣式，下面的代碼全部都是用來控制布局的，沒有對(duì)播放器樣式做任何修改。

  1. .mejs-container { 
  2.     position: relative; 
  3.     background: #000000; 
  4. } 
  5.  
  6. .mejs-inner { 
  7.     position: relative; 
  8.     width: inherit; 
  9.     height: inherit; 
  10. } 
  11.  
  12. .me-plugin { position: absolute; } 
  13.  
  14. .mejs-container-fullscreen .mejs-mediaelement, 
  15. .mejs-container-fullscreen video, 
  16. .mejs-embed, 
  17. .mejs-embed body, 
  18. .mejs-mediaelement { 
  19.     width: 100%; 
  20.     height: 100%; 
  21. } 
  22.  
  23. .mejs-embed, 
  24. .mejs-embed body { 
  25.     margin: 0; 
  26.     padding: 0; 
  27.     overflow: hidden; 
  28. } 
  29.  
  30. .mejs-container-fullscreen { 
  31.     position: fixed; 
  32.     left: 0; 
  33.     top: 0; 
  34.     right: 0; 
  35.     bottom: 0; 
  36.     overflow: hidden; 
  37.     z-index: 1000; 
  38. } 
  39.  
  40. .mejs-background, 
  41. .mejs-mediaelement, 
  42. .mejs-poster, 
  43. .mejs-overlay { 
  44.     position: absolute; 
  45.     top: 0; 
  46.     left: 0; 
  47. } 
  48.  
  49. .mejs-poster img { display: block; }

4.控制面板樣式設(shè)置

讓我們先從添加“播放按鈕”開始：

  1. .mejs-overlay-play { cursor: pointer; } 
  2.  
  3. .mejs-inner .mejs-overlay-button { 
  4.     position: absolute; 
  5.     top: 50%; 
  6.     left: 50%; 
  7.     width: 50px; 
  8.     height: 50px; 
  9.     margin: -25px 0 0 -25px; 
  10.     background: url(../img/play.png) no-repeat; 
  11. }

接下來再添加視頻控制器布局：將它放在視頻底部，高度為34px，再添加一個(gè)背景顏色，配合RGBA來設(shè)置透明度。最后給按鈕添加基本樣式和圖元。

  1. .mejs-container .mejs-controls { 
  2.     position: absolute; 
  3.     width: 100%; 
  4.     height: 34px; 
  5.     left: 0; 
  6.     bottom: 0; 
  7.     background: rgb(0,0,0); 
  8.     background: rgba(0,0,0, .7); 
  9. } 
  10.  
  11. .mejs-controls .mejs-button button { 
  12.     display: block; 
  13.     cursor: pointer; 
  14.     width: 16px; 
  15.     height: 16px; 
  16.     background: transparent url(../img/controls.png); 
  17. }


5.視頻控制器

這一步我們要做的只是將控制器居右放置。所以首先我們將所有的按鈕放到控制面板上，之后再對(duì)它們的寬度、位置和背景圖片做詳細(xì)的調(diào)整。

  1. .mejs-controls div.mejs-playpause-button { 
  2.     position: absolute; 
  3.     top: 12px; 
  4.     left: 15px; 
  5. } 
  6.  
  7. .mejs-controls .mejs-play button, 
  8. .mejs-controls .mejs-pause button { 
  9.     width: 12px; 
  10.     height: 12px; 
  11.     background-position: 0 0; 
  12. } 
  13.  
  14. .mejs-controls .mejs-pause button { background-position: 0 -12px; } 
  15.  
  16. .mejs-controls div.mejs-volume-button { 
  17.     position: absolute; 
  18.     top: 12px; 
  19.     left: 45px; 
  20. } 
  21.  
  22. .mejs-controls .mejs-mute button, 
  23. .mejs-controls .mejs-unmute button { 
  24.     width: 14px; 
  25.     height: 12px; 
  26.     background-position: -12px 0; 
  27. } 
  28.  
  29. .mejs-controls .mejs-unmute button { background-position: -12px -12px; } 
  30.  
  31. .mejs-controls div.mejs-fullscreen-button { 
  32.     position: absolute; 
  33.     top: 7px; 
  34.     right: 7px; 
  35. } 
  36.  
  37. .mejs-controls .mejs-fullscreen-button button, 
  38. .mejs-controls .mejs-unfullscreen button { 
  39.     width: 27px; 
  40.     height: 22px; 
  41.     background-position: -26px 0; 
  42. } 
  43.  
  44. .mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }

6.音量滑動(dòng)控制器

音量滑動(dòng)控制器的設(shè)置也一樣，設(shè)置好位置和大小，再添加一個(gè)圓角效果就可以了。

  1. .mejs-controls div.mejs-horizontal-volume-slider { 
  2.     position: absolute; 
  3.     cursor: pointer; 
  4.     top: 15px; 
  5.     left: 65px; 
  6. } 
  7.  
  8. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { 
  9.     width: 60px; 
  10.     background: #d6d6d6; 
  11. } 
  12.  
  13. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
  14.     position: absolute; 
  15.     width: 0; 
  16.     top: 0; 
  17.     left: 0; 
  18. } 
  19.  
  20. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
  21. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
  22.     height: 4px; 
  23.  
  24.     -webkit-border-radius: 2px; 
  25.     -moz-border-radius: 2px; 
  26.     border-radius: 2px; 
  27. }

7.進(jìn)度條

進(jìn)度條的設(shè)置也同樣簡單，將它緊貼在控制面板上方就可以了，之后就是設(shè)置不同狀態(tài)（all和loaded狀態(tài)）的背景顏色�，F(xiàn)在將它初始化為零就可以在影片播放時(shí)自動(dòng)改變了。（但是你看不出來。）

  1. .mejs-controls div.mejs-time-rail { 
  2.     position: absolute; 
  3.     width: 100%; 
  4.     left: 0; 
  5.     top: -10px; 
  6. } 
  7.  
  8. .mejs-controls .mejs-time-rail span { 
  9.     position: absolute; 
  10.     display: block; 
  11.     cursor: pointer; 
  12.     width: 100%; 
  13.     height: 10px; 
  14.     top: 0; 
  15.     left: 0; 
  16. } 
  17.  
  18. .mejs-controls .mejs-time-rail .mejs-time-total { 
  19.     background: rgb(152,152,152); 
  20.     background: rgba(152,152,152, .5); 
  21. } 
  22.  
  23. .mejs-controls .mejs-time-rail .mejs-time-loaded { 
  24.     background: rgb(0,0,0); 
  25.     background: rgba(0,0,0, .3); 
  26. } 
  27.  
  28. .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }

8.進(jìn)度條控制器和時(shí)間提示框

這一步就該給進(jìn)度條添加一個(gè)進(jìn)度條控制器和一個(gè)時(shí)間提示框，同樣我們還是調(diào)整位置，設(shè)置寬度、高度和背景圖片，再添加一些排版樣式。

  1. .mejs-controls .mejs-time-rail .mejs-time-handle { 
  2.     position: absolute; 
  3.     cursor: pointer; 
  4.     width: 16px; 
  5.     height: 18px; 
  6.     top: -3px; 
  7.     background: url(../img/handle.png); 
  8. } 
  9.  
  10. .mejs-controls .mejs-time-rail .mejs-time-float { 
  11.     position: absolute; 
  12.     display: none; 
  13.     width: 33px; 
  14.     height: 23px; 
  15.     top: -26px; 
  16.     margin-left: -17px; 
  17.     background: url(../img/tooltip.png); 
  18. } 
  19.  
  20. .mejs-controls .mejs-time-rail .mejs-time-float-current { 
  21.     position: absolute; 
  22.     display: block; 
  23.     left: 0; 
  24.     top: 4px; 
  25.  
  26.     font-family: Helvetica, Arial, sans-serif; 
  27.     font-size: 10px; 
  28.     font-weight: bold; 
  29.     color: #666666; 
  30.     text-align: center; 
  31. } 
  32.  
  33. .mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }

9.綠色的已播放進(jìn)度條

本教程的最后一步就是在進(jìn)度條和音量滑動(dòng)條上添加綠色的已播放進(jìn)度條和音量顯示，這個(gè)也很簡單。

  1. .mejs-controls .mejs-time-rail .mejs-time-current, 
  2. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
  3.     background: #82d344; 
  4.     background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%); 
  5.     background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); 
  6.     background: -o-linear-gradient(top, #82d344 0%, #51af34 100%); 
  7.     background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%); 
  8.     background: linear-gradient(top, #82d344 0%, #51af34 100%); 
  9. }

總結(jié)：雖然很簡單，但這確實(shí)是一個(gè)很不錯(cuò)的開源（CC許可證3.0）視頻播放器！經(jīng)過設(shè)置還可以支持多種視頻格式，所以它不僅僅可以被用來做網(wǎng)絡(luò)視頻播放器，如果你還愿意給它增加一些功能，甚至可以把它可以做成跨平臺(tái)的本地視頻播放器。

相關(guān)文章