今天將為大家介紹三款HTML 5的視頻和音頻播放器，這里就不多廢話了，首先先看第一款。

HTML5視頻和音頻播放器jPlayer

由于官方下載回來的文件只有幾個核心JS，具體的例子還需要根據(jù)上面的教程自己搭建。下面就一起來看看每個demo的簡要實現(xiàn)代碼和在線示例：

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作為個性化的環(huán)形音頻播放器

初始化的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" 
    });     
}); 

在線示例

主要就是這幾個例子，官網(wǎng)上本來還可以切換皮膚的，我就不做上去了。最后將所有例子打包供大家下載學習。

示例源碼下載

#p#

第二款：VideoJS介紹

簡單介紹一下VideoJS的特點。

開源，我們可以利用VideoJS的源碼將它應(yīng)用到自己的程序中，并且可以修改其源碼，但要遵循開源協(xié)議。

輕量級，沒有使用圖片。

完全可以用CSS定制播放器的外觀。

不依賴其他腳本庫。

使用非常簡單。

不僅使用簡單，擴展也非常簡單。

在各個瀏覽器之間有統(tǒng)一的外觀。

支持全屏播放。

可以控制音量。

遇到不支持HTML5的瀏覽器可以轉(zhuǎn)換成FLASH來播放。

上面這段話是翻譯過來的，有什么錯誤請大家指出，呵呵。如何，聽上去很強大吧，我也是這么覺得。由于國情原因，訪問國外的網(wǎng)站經(jīng)常要被重置，于是我就將VideoJS的源代碼下了回來放在青藤園網(wǎng)站上，方便大家欣賞和學習。

在線示例

源碼下載

#p#

第三款：ZEN Audio Player使用介紹

上面向大家介紹了兩個HTML5音頻和視頻播放器VideoJS和jPlayer。今天再來介紹一個音頻播放器ZEN Audio Player。說白了ZEN Audio Player是基于jPlayer的，如果你仔細看過jPlayer這篇文章的話，應(yīng)該還記得里面有一個個性化的環(huán)形音頻播放器示例，說白了，ZEN Audio Player就是基于jPlayer給這個環(huán)形播放器重新寫了一個皮膚，下圖是它在Chrome瀏覽器下的展示效果，在firefox下效果稍微差點，可能界面兼容性還有點問題。

我不知道為什么，當我想從github上下載這個播放器的示例源碼時，要么打不開，要么就非常慢，可能是github自身的問題，也有可能是萬惡的GFW的問題，所以最終我是根據(jù)其示例頁面將頁面元素和用到的js、css一點點湊起來的，最終把這個demo和源碼發(fā)上來，方便大家下載和學習，身在中國，訪問國外的網(wǎng)站實在是太累太累了。

在線示例

源碼下載

ZEN Audio Player的官方網(wǎng)站是http://lab.simurai.com/ui/zen-player/