播放器
1、windows Media Player:(ie專用)
| 屬性/方法名: | 說明: |
| URL:String; | 指定媒體位置,本機或網絡地址 |
| uiMode:String; | 播放器界面模式,可為Full, Mini, None, Invisible |
| playState:integer; | 播放狀態,1=停止,2=暫停,3=播放,6=正在緩沖,9=正在連接,10=準備就緒 |
| enableContextMenu:Boolean; | 啟用/禁用右鍵菜單 |
| fullScreen:boolean; | 是否全屏顯示 |
| [controls] | wmp.controls //播放器基本控制 |
| controls.play; | 播放 |
| controls.pause; | 暫停 |
| controls.stop; | 停止 |
| controls.currentPosition:double; | 當前進度 |
| controls.currentPositionString:string; | 當前進度,字符串格式。如“00:23” |
| controls.fastForward; | 快進 |
| controls.fastReverse; | 快退 |
| controls.next; | 下一曲 |
| controls.previous; | 上一曲 |
| [settings] | wmp.settings //播放器基本設置 |
| settings.volume:integer; | 音量,0-100 |
| settings.autoStart:Boolean; | 是否自動播放 |
| settings.mute:Boolean; | 是否靜音 |
| settings.playCount:integer; | 播放次數 |
| [currentMedia] | wmp.currentMedia //當前媒體屬性 |
| currentMedia.duration:double; | 媒體總長度 |
| currentMedia.durationString:string; | 媒體總長度,字符串格式。如“03:24” |
| currentMedia.getItemInfo(const string); | 獲取當前媒體信息"Title"=媒體標題,"Author"=藝術家,"Copyright"=版權信息,"Description"=媒體內容描述,"Duration"=持續時間(秒),"FileSize"=文件大小,"FileType"=文件類型,"sourceURL"=原始地址 |
| currentMedia.setItemInfo(const string); | 通過屬性名設置媒體信息 |
| currentMedia.name:string; | 同 currentMedia.getItemInfo("Title") |
| [currentPlaylist] | wmp.currentPlaylist //當前播放列表屬性 |
| currentPlaylist.count:integer; | 當前播放列表所包含媒體數 |
| currentPlaylist.Item[integer]; | 獲取或設置指定項目媒體信息,其子屬性同wmp.currentMedia |
問題一:播放后(axWindowsMediaPlayer1.currentMedia.duration)無法及時獲取播放文件的總時間
?方案:使用?? axWindowsMediaPlayer1.newMedia(URL).duration? (獲取的是總的毫秒數,url為播放文件的路徑。)
一個小例子:
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head><meta charset="utf-8" /><title></title><style type="text/css">* {padding:0px;margin:0px;font-size:12px;color:#333;font-family:"微軟雅黑"}.fl {float:left}.clearfix:after {content: "."; display: block; height: 0!important; line-height: 0; font-size: 0; overflow: hidden; visibility: hidden; clear: both; }.clearfix {*zoom: 1; *display: table; }.player_box {border:1px solid #0094ff;width:300px;background-color:#e1e1e1;margin:10px;padding:10px;}.btn {background-color:#0094ff;color:#fff;margin-right:10px;width:50px;display:block;float:left;text-align:center;height:22px;line-height:22px;cursor:pointer}.jd_duration {width:180px;background-color:#cdcdcd;height:15px;position:relative;cursor:pointer;}.jd {background-color:#0094ff;height:15px;}.jp-current-time,.jp-duration {position:absolute;top:16px;}.jp-current-time {left:0px;}.jp-duration {right:0px;}.dn {display:none;}</style><script src="js/jquery-1.8.3.js"></script><script>//載入播放控件function LoadMusicControls() {var playBox = document.getElementById("playBox");var str = "";str += "";str += "<OBJECT id=\"WindowsMediaPlayer\" height=\"0\" width=\"0\" classid=\"clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6\" style=\"position:relative;left:0px; top:0px;width:0px;height:0px;\" class=\"musicojb\">";str += "<PARAM NAME=\"url\" VALUE=\"\">";str += "<PARAM NAME=\"rate\" VALUE=\"1\">";str += "<PARAM NAME=\"balance\" VALUE=\"0\">";str += "<PARAM NAME=\"currentPosition\" VALUE=\"0\">";str += "<PARAM NAME=\"defaultFrame\" VALUE=\"\">";str += "<PARAM NAME=\"playCount\" VALUE=\"1\">";str += "<PARAM NAME=\"autoStart\" VALUE=\"0\">";str += "<PARAM NAME=\"currentMarker\" VALUE=\"0\">";str += "<PARAM NAME=\"invokeURLs\" VALUE=\"0\">";str += "<PARAM NAME=\"baseURL\" VALUE=\"\">";str += "<PARAM NAME=\"volume\" VALUE=\"100\">";str += "<PARAM NAME=\"mute\" VALUE=\"-1\">";str += "<PARAM NAME=\"uiMode\" VALUE=\"none\">";str += "<PARAM NAME=\"stretchToFit\" VALUE=\"-1\">";str += "<PARAM NAME=\"windowlessVideo\" VALUE=\"0\">";str += "<PARAM NAME=\"enabled\" VALUE=\"-1\">";str += "<PARAM NAME=\"enableContextMenu\" VALUE=\"-1\">";str += "<PARAM NAME=\"fullScreen\" VALUE=\"0\">";str += "<PARAM NAME=\"SAMIStyle\" VALUE=\"\">";str += "<PARAM NAME=\"SAMILang\" VALUE=\"\">";str += "<PARAM NAME=\"SAMIFilename\" VALUE=\"\">";str += "<PARAM NAME=\"captioningID\" VALUE=\"\">";str += "<PARAM NAME=\"enableErrorDialogs\" VALUE=\"0\">";str += "<PARAM name=\"SendPlayStateChangeEvents\" value=\"0\">";str += "<PARAM name=\"SendOpenStateChangeEvents\" value=\"0\">";str += "<PARAM NAME=\"_cx\" VALUE=\"5080\">";str += "<PARAM NAME=\"_cy\" VALUE=\"5080\">";str += "<\/OBJECT>";playBox.innerHTML = str;}window.onload = function () {//加載播放控件LoadMusicControls();var oWindowsMediaPlayer = document.getElementById("WindowsMediaPlayer");var oControls = $(oWindowsMediaPlayer).find("");var oPlay = document.getElementById("play");var oPause = document.getElementById("pause");var oStop = document.getElementById("stop");var oSeekBar = document.getElementById("seekBar"), oSeekBarW = oSeekBar.offsetWidth;var oPlayBar = document.getElementById("playBar"); //進度條var oCurrentTime = document.getElementById("currentTime");var oDurationTime = document.getElementById("durationTime");// oWindowsMediaPlayer.controls.currentPosition 當前播放進度 時間// oWindowsMediaPlayer.currentMedia.duration 總播放長度 時間//play//alert(oWindowsMediaPlayer.newMedia("ILovedYou.wav").duration)var jd = null;oPlay.onclick = function () {var songName = "ILovedYou.wav"; //歌曲路徑this.style.display = "none";oPause.style.display = "block";if (!oWindowsMediaPlayer.URL) {oWindowsMediaPlayer.URL = songName;};oWindowsMediaPlayer.controls.play();//顯示進度和時間jd = setInterval(function () {//如果播放開始if (oWindowsMediaPlayer.controls.currentPositionString) {oCurrentTime.innerHTML = oWindowsMediaPlayer.controls.currentPositionString;oDurationTime.innerHTML = oWindowsMediaPlayer.currentMedia.durationString;//進度條var nowJd = oWindowsMediaPlayer.controls.currentPosition;var nowLen = oWindowsMediaPlayer.currentMedia.duration;oPlayBar.style.width = Math.ceil(parseInt(nowJd * 10000 / nowLen, 10) * oSeekBarW / 10000) + "px";//如果播放結束//alert(oWindowsMediaPlayer.controls.currentPosition)if ((oWindowsMediaPlayer.currentMedia.duration - oWindowsMediaPlayer.controls.currentPosition) * 100000 < 1) {oWindowsMediaPlayer.controls.stop();oCurrentTime.innerHTML = "00:00";oPlayBar.style.width = "0px";oPlay.style.display = "block";oPause.style.display = "none";clearInterval(jd);}}}, 10)//手動控制進度oSeekBar.onclick = function (event) {var event = window.event || event;var iLeft = window.event.offsetX;oPlayBar.style.width = iLeft + "px";oWindowsMediaPlayer.controls.currentPosition = Math.ceil((iLeft / oSeekBarW) * 10000) * oWindowsMediaPlayer.currentMedia.duration / 10000;oCurrentTime.innerHTML = oWindowsMediaPlayer.controls.currentPositionString;};};//oPauseoPause.onclick = function () {this.style.display = "none";oPlay.style.display = "block";if (oWindowsMediaPlayer.controls.isavailable('pause')) {oWindowsMediaPlayer.controls.pause();};clearInterval(jd);};//stopoStop.onclick = function () {if (oWindowsMediaPlayer.controls.isavailable('stop')) {oWindowsMediaPlayer.controls.stop();};oPlay.style.display = "block";oPause.style.display = "none";//進度條oPlayBar.style.width = 0;clearInterval(jd);oCurrentTime.innerHTML = "00:00";oSeekBar.onclick = null;};}</script></head> <body><div id="playBox" style="display:none"></div><div class="player_box clearfix"><div class="fl"><span class="btn play_btn" id="play">play</span><span class="btn oPause_btn dn" id="pause">pause</span><span class="btn stop_btn" id="stop">stop</span></div><div class="jd_duration fl" id="seekBar"><div class="jd" id="playBar" style="width:0px;"></div><div class="jp-current-time" id="currentTime">00:00</div><div class="jp-duration" id="durationTime">00:00</div></div></div> </body> </html>
2、jPlayer(官方地址:http://www.jplayer.org/)
????? 一個jquery插件,官方網站上有具體的使用方法。易上手。
????? 支持格式:
- HTML5:? mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
- Flash:???? mp3, mp4 (AAC/H.264), rtmp, flv
參考:http://www.blueidea.com/tech/web/2006/3494.asp
總結
- 上一篇: 计算机毕设(附源码)JAVA-SSM老年
- 下一篇: 运筹帷幄之中决胜千里之外 菜鸟初识