首頁 > 開發者 > JavaScript

javascript寫的一個MidiaPlayer的類

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

運行時候根據需求，改動這裡即可

mpl.OpenUrl("DuskToDawn.wma");

下面是完整代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>MediaPlayer樣本</title><br /> <mce:style type="text/css"><!--<br /> body<br /> {<br /> font-size:12px;<br /> font-family:宋體;<br /> }<br /> #divMpl<br /> {<br /> height: 137px;<br /> width: 277px;<br /> }<br /> #divMsg<br /> {<br /> height: 155px;<br /> overflow:auto;<br /> width: 376px;<br /> }</p><p>--></mce:style><style type="text/css" mce_bogus="1"> body<br /> {<br /> font-size:12px;<br /> font-family:宋體;<br /> }<br /> #divMpl<br /> {<br /> height: 137px;<br /> width: 277px;<br /> }<br /> #divMsg<br /> {<br /> height: 155px;<br /> overflow:auto;<br /> width: 376px;<br /> }<br /> </style><br /> <mce:script language="javascript" type="text/javascript"><!--<br /> /* MediaPlayer類定義 冰點原創 */<br /> function MediaPlayer()<br /> {<br /> this.dom=null;<br /> }<br /> MediaPlayer.uiMode=<br /> {<br /> Full:"full",<br /> Mini:"mini",<br /> None:"none",<br /> Invisible:"invisible"<br /> }<br /> MediaPlayer.prototype={<br /> CreateAt:function(id) //在指定ID的標籤中建立MediaPlayer控制項，大小由該標籤決定<br /> {<br /> this.dom=document.createElement("object");<br /> this.dom.classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6";<br /> this.dom.style.width="100%";<br /> this.dom.style.height="100%";<br /> var container=document.getElementById(id);<br /> container.innerHTML="";<br /> container.appendChild(this.dom);<br /> this._Init();<br /> },<br /> BindID:function(id) //綁定一個已存在的Object標籤，該標籤應該為一個MediaPlayer控制項<br /> {<br /> this.dom=document.getElementById(id);<br /> this._Init();<br /> },<br /> _Init:function() //初始化，註冊事件<br /> {<br /> var _this=this;<br /> this.dom.attachEvent("PlayStateChange",<br /> function(newState){_this.onPlayStateChange(newState)});<br /> this.dom.attachEvent("Buffering",function(bStart){ _this.onBuffering(bStart) });<br /> this.dom.attachEvent("Error",function(){ _this.onError(); });<br /> this.dom.attachEvent("PositionChange",<br /> function(oldPos,newPos){ _this.onPositionChange(oldPos,newPos); } );<br /> this.dom.attachEvent("StatusChange",function(){ _this.onStatusChange(); })<br /> },<br /> onPlayStateChange:function(newState)<br /> {<br /> switch(newState)<br /> {<br /> case 1: //wmppsStopped<br /> this.onStop();<br /> break;<br /> case 2: //wmppsPaused<br /> this.onPaused();<br /> break;<br /> case 3: //wmppsPlaying<br /> this.onPlay();<br /> break;<br /> case 4: //wmppsScanForward<br /> break;<br /> case 5: //wmppsScanReverse<br /> break;<br /> case 6: //wmppsBuffering<br /> this.onBuffering_SC();<br /> break;<br /> case 7: //wmppsWaiting<br /> break;<br /> case 8: //wmppsMediaEnded<br /> this.onMediaEnded();<br /> break;<br /> case 9: //wmppsTransitioning<br /> this.onTransitioning();<br /> break;<br /> case 10: //wmppsReady<br /> break;<br /> case 11: //wmppsReconnecting<br /> break;<br /> case 12: //wmppsLast<br /> break;<br /> case 0: //wmppsUndefined<br /> break;<br /> default:<br /> break;<br /> }<br /> },<br /> // 事件列表<br /> onStop:function(){},<br /> onPaused:function(){},<br /> onPlay:function(){},<br /> onBuffering_SC:function(){},<br /> onTransitioning:function(){},<br /> onMediaEnded:function(){},<br /> onError:function(){},<br /> onPositionChange:function(oldPos,newPos){},<br /> onStatusChange:function(){},<br /> onBuffering:function(bStart){},</p><p> // 設定 暫時只做兩個<br /> setMode:function(mode){ this.dom.uiMode=mode; },<br /> setValume:function(v){ this.dom.settings.volume=v; },</p><p> // 各種屬性<br /> getMediaName:function()<br /> {<br /> var media=this.dom.currentMedia;<br /> if(media)<br /> {<br /> return media.name;<br /> }<br /> return "";<br /> },<br /> getMediaDuration:function()<br /> {<br /> var media=this.dom.currentMedia;<br /> if(media)<br /> {<br /> return media.duration;<br /> }<br /> return "";<br /> },<br /> getMediaDurationString:function()<br /> {<br /> var media=this.dom.currentMedia;<br /> if(media)<br /> {<br /> return media.durationString;<br /> }<br /> return "";<br /> },<br /> getStatus:function(){ return this.dom.status; },<br /> getPosition:function(){ return this.dom.controls.currentPosition; },<br /> getPositionString:function(){ return this.dom.controls.currentPositionString; },<br /> getPlayState:function(){ return this.dom.playState; },</p><p> // 操作方法<br /> OpenUrl:function(URL){ this.dom.URL=URL; },<br /> Play:function(){ this.dom.controls.play(); },<br /> Pause:function(){ this.dom.controls.pause();},<br /> Stop:function(){ this.dom.controls.stop(); }<br /> }<br /> /* MediaPlayer類定義 冰點原創 */</p><p> var mpl=new MediaPlayer(); //建立一個MediaPlayer<br /> window.onload=function()<br /> {<br /> mpl.CreateAt("divMpl");<br /> mpl.setValume(100);<br /> mpl.setMode(MediaPlayer.uiMode.Full);<br /> mpl.onPlay=function(){ ShowMessage("現正播放["+this.getMediaName()+"]"); };<br /> mpl.onPaused=function(){ ShowMessage("暫停"); };<br /> mpl.onMediaEnded=function(){ ShowMessage("播放結束"); };<br /> mpl.onStop=function(){ ShowMessage("停止"); };<br /> mpl.onPositionChange=function(oldPos,newPos){<br /> var pos1={<br /> min:parseInt(oldPos/60),<br /> sec:parseInt(oldPos%60)<br /> }<br /> var pos2={<br /> min:parseInt(newPos/60),<br /> sec:parseInt(newPos%60)<br /> }<br /> ShowMessage(pos1.min+":"+pos1.sec+ "->"+ pos2.min+":"+pos2.sec);<br /> };<br /> //mpl.onStatusChange=function(){ ShowMessage(this.getStatus()); };<br /> mpl.OpenUrl("DuskToDawn.wma");<br /> window.setInterval("ShowPlayTime()",1000);<br /> }<br /> function ShowPlayTime()<br /> {<br /> if(mpl.getPlayState()==3)<br /> {<br /> ShowStatus(mpl.getPositionString());<br /> }<br /> }<br /> function ShowMessage(str)<br /> {<br /> var msg=document.getElementById("divMsg");<br /> var tn=document.createTextNode(str);<br /> msg.appendChild(tn);<br /> msg.appendChild(document.createElement("br"));<br /> }<br /> function ShowStatus(str)<br /> {<br /> document.getElementById("divStatus").innerHTML=str;<br /> }</p><p>// --></mce:script><br /></head><br /><body><br /><div id="divMpl"></div><br /><div id="divStatus"> </div><br /> <input type="button" value="清空訊息" onclick="document.getElementById('divMsg').innerHTML='';" /><br /><div id="divMsg"></div><br /></body><br /></html><br />

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript session javascript addslashes javascript bindto
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More