HTML5和css3實例:制作HTML5網頁視頻播放器

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> HTML5和css3實例:制作HTML5網頁視頻播放器

編輯：CSS進階教程

播放器最終效果預覽圖

導讀：毫無疑問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>

當然我們還需要添加一個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的設置文檔。

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

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

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

接下來再添加視頻控制器布局：將它放在視頻底部，高度為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); 
}

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

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

上一頁:CSS實例教程:IE6絕對定位錯位問題的解決方案
下一頁:CSS學習教程:CSS對網頁圖片img的控制

CSS進階教程

高效編寫CSS代碼:WEBJX分享15個CSS開發工具: 對於Web開發人員來說，好用的CSS工具可以讓那些枯燥的工作變得有趣，並且還可以幫你更高效的編寫CS
提高CSS的網頁渲染效率11個注意點: CSS學習越深入，我們需要關注的細節之處就越多，今天我們通過11個注意點來提高CSS的網頁渲染效率。
簡單介紹Web Developer插件制作網頁: Firefox浏覽器是一個良好支持W3C標准的開放源代碼的浏覽器，擁有Linux/Windows/M

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

CSS網頁布局全精通 CSS初級入門(1)：整體布局聲明間距浮動與對齊的最佳方案 CSS教程:設計制作網頁的CSS經驗 CSS3教程:邊框屬性border的極致應用 CSS基礎教程:CSS屬性結合起來使用 CSS小技巧：IE8浏覽器的css hack 小結：一個CSS代碼參考圖 Web開發與設計的 Cheet Sheet CSS 制作的三級菜單特效代碼

DIV CSS 佈局教程網

相關文章