HTML5+CSS3+jQuery製作視訊播放器完全指南

發表於2012-05-12

導讀：毫無疑問HTML5已經是大勢所趨，知名視訊網站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實現視訊播放，並且新建一個”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>

<head>

<title>Video Player</title>

</head>

當然我們還需要新增一個HTML5 video標記來建立一個視訊播放器，再新增一些屬性將它初始化。（注：poster是指視訊的預覽圖）

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

</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>

$(document).ready(function() {

$('video').mediaelementplayer({

alwaysShowControls: true,

videoVolume: 'horizontal',

features: ['playpause','progress','volume','fullscreen']

});

// ]]></script>

更多設定請查閱MediaElement.js的設定文件。

3.播放器基本樣式設計

先修改一下樣式設定：

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

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

.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.控制皮膚樣式設定

讓我們先從新增“播放按鈕”開始：

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

.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來設定透明度。最後給按鈕新增基本樣式和圖元。

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

.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.視訊控制器

這一步我們要做的只是將控制器居右放置。所以首先我們將所有的按鈕放到控制皮膚上，之後再對它們的寬度、位置和背景圖片做詳細的調整。

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

.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.音量滑動控制器

音量滑動控制器的設定也一樣，設定好位置和大小，再新增一個圓角效果就可以了。

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

.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.進度條

進度條的設定也同樣簡單，將它緊貼在控制皮膚上方就可以了，之後就是設定不同狀態（all和loaded狀態）的背景顏色。現在將它初始化為零就可以在影片播放時自動改變了。（但是你看不出來。）

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

.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.進度條控制器和時間提示框

這一步就該給進度條新增一個進度條控制器和一個時間提示框，同樣我們還是調整位置，設定寬度、高度和背景圖片，再新增一些排版樣式。

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

.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.綠色的已播放進度條

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

.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%);
}