建站
咨詢
售后
建站咨詢
新聞中心
今天將為大家介紹三款HTML 5的視頻和音頻播放器，這里就不多廢話了，首先先看第一款。
創(chuàng)新互聯(lián)專注于興安盟烏蘭浩特企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),購(gòu)物商城網(wǎng)站建設(shè)。興安盟烏蘭浩特網(wǎng)站建設(shè)公司,為興安盟烏蘭浩特等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
HTML5視頻和音頻播放器jPlayer
由于官方下載回來(lái)的文件只有幾個(gè)核心JS，具體的例子還需要根據(jù)上面的教程自己搭建。下面就一起來(lái)看看每個(gè)demo的簡(jiǎn)要實(shí)現(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作為個(gè)性化的環(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"
- });
- });
在線示例
主要就是這幾個(gè)例子，官網(wǎng)上本來(lái)還可以切換皮膚的，我就不做上去了。最后將所有例子打包供大家下載學(xué)習(xí)。
示例源碼下載
#p#
第二款：VideoJS介紹
簡(jiǎn)單介紹一下VideoJS的特點(diǎn)。
開(kāi)源，我們可以利用VideoJS的源碼將它應(yīng)用到自己的程序中，并且可以修改其源碼，但要遵循開(kāi)源協(xié)議。
輕量級(jí)，沒(méi)有使用圖片。
完全可以用CSS定制播放器的外觀。
不依賴其他腳本庫(kù)。
使用非常簡(jiǎn)單。
不僅使用簡(jiǎn)單，擴(kuò)展也非常簡(jiǎn)單。
在各個(gè)瀏覽器之間有統(tǒng)一的外觀。
支持全屏播放。
可以控制音量。
遇到不支持HTML5的瀏覽器可以轉(zhuǎn)換成FLASH來(lái)播放。
上面這段話是翻譯過(guò)來(lái)的，有什么錯(cuò)誤請(qǐng)大家指出，呵呵。如何，聽(tīng)上去很強(qiáng)大吧，我也是這么覺(jué)得。由于國(guó)情原因，訪問(wèn)國(guó)外的網(wǎng)站經(jīng)常要被重置，于是我就將VideoJS的源代碼下了回來(lái)放在青藤園網(wǎng)站上，方便大家欣賞和學(xué)習(xí)。
在線示例
源碼下載
#p#
第三款：ZEN Audio Player使用介紹
上面向大家介紹了兩個(gè)HTML5音頻和視頻播放器VideoJS和jPlayer。今天再來(lái)介紹一個(gè)音頻播放器ZEN Audio Player。說(shuō)白了ZEN Audio Player是基于jPlayer的，如果你仔細(xì)看過(guò)jPlayer這篇文章的話，應(yīng)該還記得里面有一個(gè)個(gè)性化的環(huán)形音頻播放器示例，說(shuō)白了，ZEN Audio Player就是基于jPlayer給這個(gè)環(huán)形播放器重新寫(xiě)了一個(gè)皮膚，下圖是它在Chrome瀏覽器下的展示效果，在firefox下效果稍微差點(diǎn)，可能界面兼容性還有點(diǎn)問(wèn)題。
我不知道為什么，當(dāng)我想從github上下載這個(gè)播放器的示例源碼時(shí)，要么打不開(kāi)，要么就非常慢，可能是github自身的問(wèn)題，也有可能是萬(wàn)惡的GFW的問(wèn)題，所以最終我是根據(jù)其示例頁(yè)面將頁(yè)面元素和用到的js、css一點(diǎn)點(diǎn)湊起來(lái)的，最終把這個(gè)demo和源碼發(fā)上來(lái)，方便大家下載和學(xué)習(xí)，身在中國(guó)，訪問(wèn)國(guó)外的網(wǎng)站實(shí)在是太累太累了。
在線示例
源碼下載
ZEN Audio Player的官方網(wǎng)站是http://lab.simurai.com/ui/zen-player/
文章題目：三款HTML 5的視頻和音頻播放器
標(biāo)題來(lái)源：http://m.5511xx.com/article/ccshecj.html
