三款HTML 5的視頻和音頻播放器
今天將為大家介紹三款HTML 5的視頻和音頻播放器，這里就不多廢話了，首先先看第一款。
HTML5視頻和音頻播放器jPlayer
由于官方下載回來的文件只有幾個核心JS，具體的例子還需要根據上面的教程自己搭建。下面就一起來看看每個demo的簡要實現代碼和在線示例：
1、jPlayer作為視頻播放器
初始化的js代碼：
- $(document).ready(function(){
- $("#jquery_jplayer_1").jPlayer({
- ready: function () {
- $(this).jPlayer("setMedia", {m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v", ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv", webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm", poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
- });
- },
- swfPath: "../js",
- supplied: "webmv, ogv, m4v",
- size: {
- width: "640px",
- height: "360px",
- cssClass: "jp-video-360p"
- }
- });
- });
2、jPlayer作為音頻播放器
初始化的js代碼：
- $(document).ready(function(){
- $("#jquery_jplayer_1").jPlayer({
- ready: function (event) {
- $(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a", oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
- });
- },
- swfPath: "../js",
- supplied: "m4a, oga",
- wmode: "window"
- });
- });
3、jPlayer作為個性化的環形音頻播放器
初始化的js代碼：
- $(document).ready(function(){
- var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
- {
- m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
- oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
- }, {
- cssSelectorAncestor: "#cp_container_1",
- swfPath: "../js",
- wmode: "window"
- });
- });
4、jPlayer作為帶播放列表的視頻播放器
初始化的js代碼：
- $(document).ready(function(){
- new jPlayerPlaylist({
- jPlayer: "#jquery_jplayer_1",
- cssSelectorAncestor: "#jp_container_1"
- }, [
- {
- title:"Big Buck Bunny Trailer",
- artist:"Blender Foundation",
- free:true,
- m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
- ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
- webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
- poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
- },
- {
- title:"Finding Nemo Teaser",
- artist:"Pixar",
- m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
- ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
- webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
- poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
- },
- {
- title:"Incredibles Teaser",
- artist:"Pixar",
- m4v: http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v,
- ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",
- webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",
- poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
- }
- ], {
- swfPath: "../js",
- supplied: "webmv, ogv, m4v"
- });
- });
主要就是這幾個例子，官網上本來還可以切換皮膚的，我就不做上去了。最后將所有例子打包供大家下載學習。
#p#
第二款：VideoJS介紹
簡單介紹一下VideoJS的特點。
開源，我們可以利用VideoJS的源碼將它應用到自己的程序中，并且可以修改其源碼，但要遵循開源協議。
輕量級，沒有使用圖片。
完全可以用CSS定制播放器的外觀。
不依賴其他腳本庫。
使用非常簡單。
不僅使用簡單，擴展也非常簡單。
在各個瀏覽器之間有統一的外觀。
支持全屏播放。
可以控制音量。
遇到不支持HTML5的瀏覽器可以轉換成FLASH來播放。
上面這段話是翻譯過來的，有什么錯誤請大家指出，呵呵。如何，聽上去很強大吧，我也是這么覺得。由于國情原因，訪問國外的網站經常要被重置，于是我就將VideoJS的源代碼下了回來放在青藤園網站上，方便大家欣賞和學習。
#p#
第三款：ZEN Audio Player使用介紹
上面向大家介紹了兩個HTML5音頻和視頻播放器VideoJS和jPlayer。今天再來介紹一個音頻播放器ZEN Audio Player。說白了ZEN Audio Player是基于jPlayer的，如果你仔細看過jPlayer這篇文章的話，應該還記得里面有一個個性化的環形音頻播放器示例，說白了，ZEN Audio Player就是基于jPlayer給這個環形播放器重新寫了一個皮膚，下圖是它在Chrome瀏覽器下的展示效果，在firefox下效果稍微差點，可能界面兼容性還有點問題。
我不知道為什么，當我想從github上下載這個播放器的示例源碼時，要么打不開，要么就非常慢，可能是github自身的問題，也有可能是萬惡的GFW的問題，所以最終我是根據其示例頁面將頁面元素和用到的js、css一點點湊起來的，最終把這個demo和源碼發上來，方便大家下載和學習，身在中國，訪問國外的網站實在是太累太累了。
ZEN Audio Player的官方網站是http://lab.simurai.com/ui/zen-player/
