站長(zhǎng)資訊網(wǎng)最近一段時(shí)間在使用PhoneGap開(kāi)發(fā)一個(gè)App應(yīng)用，App需要播放視頻，本想直接使用html5的video，但使用它在全屏播放時(shí)不支持橫屏播放，只能放棄。最終決定還是自己封裝一個(gè)播放器算了，免得以后要擴(kuò)展功能麻煩。
最近迷上hi這個(gè)單詞，所以我給這個(gè)播放器取名叫做：hivideo。
hivideo是一款基于html5的視頻播放器，摒棄video原有的播放控制條樣式，自己重寫(xiě)了一次。支持暫停、播放進(jìn)度控制、聲音控制、全屏播放。如果是要在手機(jī)端使用hivideo，全屏播放時(shí)還支持橫屏播放。
jPlayer : 基于HTML5/Flash的音頻、視頻播放器
jPlayer是一個(gè)JavaScript寫(xiě)的完全免費(fèi)和開(kāi)源 (MIT) 的jQuery多媒體庫(kù)插件 (現(xiàn)在也是一個(gè)Zepto插件);
jPlayer可以讓你迅速編寫(xiě)一個(gè)跨平臺(tái)的支持音頻和視頻播放的網(wǎng)頁(yè).
jPlayer的豐富API可以讓你創(chuàng)建一個(gè)個(gè)性化多媒體應(yīng)用，因此也獲得越來(lái)越多的社區(qū)成員的支持和鼓勵(lì)。
官網(wǎng):www.jplayer.cn
英文：www.jplayer.org
1.準(zhǔn)備
jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf （官網(wǎng)下載）
還有一個(gè)音頻文件
2.代碼
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>清冽叮咚短信音</title> </head> <body> <div id="play-box"> <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <ul class="jp-controls"> <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li> <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li> <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li> <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li> <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> </ul> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> </div> </div> </div> </div> <script src="jquery.min.js?1.1.11" type="text/javascript"></script> <script src="jquery.jplayer.min.js?1.1.11" type="text/javascript"></script> <script type="text/javascript"> function toplay(){ var playerc = $("#jquery_jplayer_1"); if (playerc.data().jPlayer && playerc.data().jPlayer.internal.ready === true) { playerc.jPlayer("setMedia", { m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //使用網(wǎng)絡(luò)資源，自行設(shè)定音頻文件 }).jPlayer("play");//jPlayer("play") 用來(lái)自動(dòng)播放 }else { playerc.jPlayer({ ready: function() { $(this).jPlayer("setMedia", { m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //同上 }).jPlayer("play");//同上 }, swfPath: "include/javascript", supplied: "m4a" //acc屬于M4A }); } } setInterval(function(){ toplay(); },3000);//3秒循環(huán)播放 </script> </body> </html>
附：HTML5支持的音頻文件
文件格式 媒體類(lèi)型
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
各個(gè)瀏覽器的支持各有有所不同
