![]()
播放器最終效果預覽圖
1.下載MediaElement.js
首先下載MediaElement.js腳本文件，這是一個開源的HTML5音、視頻插件，解壓後你會得到3個文件—— "flashmediaelement.swf"、 "mediaelement-and-player.min.js"和 "silverlightmediaelement.xap" ，分別是使用Flash、 JavaScript和 SilverLight實現視頻播放，並且新建一個"js"文件夾並把它們放進去（當然本例中並不需要 "flashmediaelement.swf" 和 "silverlightmediaelement.xap" 兩個文件，可以刪去。）。
2.HTML標記
首先需要鏈接(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>
當然我們還需要添加一個HTML5 video標記來創建一個視頻播放器，再添加一些屬性將它初始化。（注：poster是指視頻的預覽圖）
- <video width="640" height="267" poster="media/cars.png">
- <source src="media/cars.mp4" type="video/mp4">
- </video>
接下來我們再加入下面的代碼來創建控制面板，需要添加的控制器或功能有：
- alwaysShowControls – "true"則設置video控制面板永遠顯示，"false"則在鼠標移走後隱藏。
- videoVolume – "horizontal"設置音量滑動控制器爲水平
- 其它功能：暫停播放、前進播放、聲音和全屏
- <script type="text/javascript">// <![CDATA[
- $(document).ready(function() {
- $('video').mediaelementplayer({
- alwaysShowControls: true,
- videoVolume: 'horizontal',
- features: ['playpause','progress','volume','fullscreen']
- });
- });
- // ]]></script>
更多設置請查閱MediaElement.js的設置文檔。
由於篇幅有限，詳情請點http://blog.csdn.net/chenguangning123/article/details/8107719
