武林網(wǎng)(www.survivalescaperooms.com)文章簡介：HTML5+CSS3+jQuery制作視頻播放器完全指南.

播放器最終效果預覽圖

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

1.下載MediaElement.js

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

2.HTML標記

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

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

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

更多設置請查閱MediaElement.js的設置文檔。

3.播放器基本樣式設計

先修改一下樣式設置：

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

4.控制面板樣式設置

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

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