偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

HTML 5、CSS3、JS開發(fā)播放器完全指南

作者：HTML5
開發(fā) 前端
雖然國內(nèi)還沒有完全普及HTML5瀏覽器，但在各大本土瀏覽器廠商的努力下，支持HTML5的瀏覽器在中國瀏覽器市場的占有率也在不斷增長中。

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

1.下載MediaElement.js

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

2.HTML標記

首先需要鏈接(link)一個jQuery庫，這里使用的是Google托管的jQuery庫。然后我們在鏈接”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)然我們還需要添加一個HTML5 video標記來創(chuàng)建一個視頻播放器，再添加一些屬性將它初始化。（注：poster是指視頻的預(yù)覽圖）

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

接下來我們再加入下面的代碼來創(chuàng)建控制面板，需要添加的控制器或功能有：

alwaysShowControls – “true”則設(shè)置video控制面板永遠顯示，”false”則在鼠標移走后隱藏。

videoVolume – “horizontal”設(shè)置音量滑動控制器為水平

其它功能：暫停播放、前進播放、聲音和全屏

  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è)置請查閱MediaElement.js的設(shè)置文檔。

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

先修改一下樣式設(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添加樣式，下面的代碼全部都是用來控制布局的，沒有對播放器樣式做任何修改。

  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; } 

HTML5+CSS3+jQuery制作視頻播放器完全指南

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

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

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

接下來再添加視頻控制器布局：將它放在視頻底部，高度為34px，再添加一個背景顏色，配合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. } 

HTML5+CSS3+jQuery制作視頻播放器完全指南

#p#

5.視頻控制器

這一步我們要做的只是將控制器居右放置。所以首先我們將所有的按鈕放到控制面板上，之后再對它們的寬度、位置和背景圖片做詳細的調(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; } 

HTML5+CSS3+jQuery制作視頻播放器完全指南

6.音量滑動控制器

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

  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. } 

HTML5+CSS3+jQuery制作視頻播放器完全指南

#p#

7.進度條

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

  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; } 

HTML5+CSS3+jQuery制作視頻播放器完全指南

8.進度條控制器和時間提示框

這一步就該給進度條添加一個進度條控制器和一個時間提示框，同樣我們還是調(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; } 

HTML5+CSS3+jQuery制作視頻播放器完全指南

9.綠色的已播放進度條

本教程的***一步就是在進度條和音量滑動條上添加綠色的已播放進度條和音量顯示，這個也很簡單。

  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. } 

HTML5+CSS3+jQuery制作視頻播放器完全指南

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

Demo下載地址：

本地下載

designmodo.com

原文鏈接http://blog.jobbole.com/19321/

【編輯推薦】

  1. HTML 5打造桌面應(yīng)用
  2. HTML 5實現(xiàn)的圖片拖拽分組效果
  3. HTML 5實現(xiàn)淘寶語音搜索功能
  4. HTML 5實現(xiàn)手機搖一搖的功能
  5. HTML 5和CSS3快速制作便簽特效
責(zé)任編輯：張偉 來源： 伯樂在線
HTML5
相關(guān)推薦

2013-01-30 15:59:29

adobeCSS3HTML5

2012-05-03 09:51:09

HTML5

2011-11-25 13:18:40

HTML 5

2012-05-11 09:37:34

HTML5

2012-05-30 09:22:56

Hybrid App助HTML5JavaScript

2011-03-22 08:54:02

HTML 5CSS3JavaScript

2012-05-24 11:03:55

HTML5

2011-11-18 13:25:48

HTML 5

2013-03-04 13:14:00

Adobe Edge HTML5

2012-02-29 09:27:36

ibmdw

2011-09-21 11:02:17

HTML 5

2012-06-04 13:44:08

2011-11-17 09:24:27

HTML 5

2010-03-22 08:56:12

2011-07-15 09:10:44

HTML 5CSS3

2013-07-09 09:24:29

響應(yīng)式HTML5CSS3

2011-08-30 16:39:34

HTML 5

2023-03-16 10:20:55

CSS選擇器

2014-12-03 10:21:50

HTML5

2010-05-05 17:23:30

OperaCTO
點贊
收藏

51CTO技術(shù)棧公眾號