站長資訊網(wǎng)最近一段時間在使用PhoneGap開發(fā)一個App應(yīng)用，App需要播放視頻，本想直接使用html5的video，但使用它在全屏播放時不支持橫屏播放，只能放棄。最終決定還是自己封裝一個播放器算了，免得以后要擴(kuò)展功能麻煩。
最近迷上hi這個單詞，所以我給這個播放器取名叫做：hivideo。
hivideo是一款基于html5的視頻播放器，摒棄video原有的播放控制條樣式，自己重寫了一次。支持暫停、播放進(jìn)度控制、聲音控制、全屏播放。如果是要在手機(jī)端使用hivideo，全屏播放時還支持橫屏播放。
jPlayer : 基于HTML5/Flash的音頻、視頻播放器
jPlayer是一個JavaScript寫的完全免費(fèi)和開源 (MIT) 的jQuery多媒體庫插件 (現(xiàn)在也是一個Zepto插件);
jPlayer可以讓你迅速編寫一個跨平臺的支持音頻和視頻播放的網(wǎng)頁.
jPlayer的豐富API可以讓你創(chuàng)建一個個性化多媒體應(yīng)用，因此也獲得越來越多的社區(qū)成員的支持和鼓勵。
官網(wǎng):www.jplayer.cn
英文：www.jplayer.org
1.準(zhǔn)備
jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf （官網(wǎng)下載）
還有一個音頻文件
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") 用來自動播放 }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支持的音頻文件
文件格式 媒體類型
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
各個瀏覽器的支持各有有所不同
