技术开发 频道

一个javascript写的media player播放器


【IT168技术文档】

  界面较为简单,支持播放列表 。
  建立播放列表的步骤为:
  1)在文本框中输入媒体资源的地址,可以是HTTP地址,相对地址和绝对地址
  2)点击“添加到媒体列表”按钮,将媒体资源信息放到媒体列表中
  3)在媒体列表中,点击“添加”链接,将媒体加入到播放列表中
  4)重复若干遍,加入所有歌曲
  5)点击“播放选中的歌曲“,就开始播放 播放列表中的所有打勾的媒体文件

  完整代码如下:
<script language="JavaScript"> function el(objname) { return document.getElementById(objname); } //增加一首歌到播放器列表,这样,播放器放完一首歌之后,会继续放下一首 function addmedia(url) { // 取得当前的播放列表 var playlist=Player.currentPlaylist;//新建一个指定URL的Media。 var currMedia = Player.newMedia(url); //把新建的Media item添加到播放器列表 playlist.appendItem(currMedia); } function clearlist() { //Player.currentPlaylist.count返回列表中的歌曲数量 while(Player.currentPlaylist.count>0) { var item =Player.currentPlaylist.item(Player.currentPlaylist.count-1); Player.currentPlaylist.removeItem(item); //从播放列表中删除项 } } //清空播放列表 function clearPlaylist() { clearlist(); var l_tb = el("tabPlayList"); var row_len = l_tb.rows.length; for(var i = 0; i < row_len; i++) l_tb.firstChild.removeChild(l_tb.firstChild.childNodes[0]); } //清空媒体列表 function clearMedialist() { var l_tb = el("tabMediaList"); var row_len = l_tb.rows.length; for(var i = 0; i < row_len; i++) l_tb.firstChild.removeChild(l_tb.firstChild.childNodes[0]); } //播放选中的歌曲 function addSeletedSongToPlayList() { clearlist(); var l_tb = el("tabPlayList"); var row_len = l_tb.rows.length; if(row_len == 0) { //alert("无歌曲"); return; } for(var i=0;i<row_len;i++) { var check = l_tb.rows[i].cells[0].childNodes[0]; var songname = l_tb.rows[i].cells[1].innerText; if(check.checked==true) { addmedia(songname); } } SetPlayMode(el("setplay").options[el("setplay").selectedIndex].value) Player.controls.play(); //让播放器开始播放 } //添加文本输入框中的url到播放列表 function addUrlToList() { //addmedia(document.getElementById("songURL").value ); var l_tb = el("tabMediaList"); var row_len = l_tb.rows.length; var tr = document.createElement("tr"); var td = document.createElement("td"); var strSong = el("songURL").value; var strHtml = strSong + "&nbsp;<a href='#' onclick='addSong("" + strSong + "");'>添加</a>"; strHtml += "&nbsp;<a href='#' onclick='removeSong(this.parentElement.parentElement);'>移除</a>"; td.innerHTML = strHtml; tr.appendChild(td); l_tb.firstChild.appendChild(tr); el("songURL").value = "http://"; } //添加文本输入框中的url到播放列表 function addSong(strSongName) { var l_tb = el("tabPlayList"); var row_len = l_tb.rows.length; var tr = document.createElement("tr"); var td = document.createElement("td"); var strChecked = "<input type='checkbox' checked value='" + strSongName + "'>"; td.innerHTML = strChecked; tr.appendChild(td); td = document.createElement("td"); td.innerHTML = strSongName; tr.appendChild(td); td = document.createElement("td"); var strHtml = "&nbsp;<a href='#' onclick='removePlaySong(this.parentElement.parentElement);'>移除</a>"; td.innerHTML = strHtml; tr.appendChild(td); l_tb.firstChild.appendChild(tr); } //从媒体列表删除 function removeSong(tr) { var l_tb = el("tabMediaList"); l_tb.firstChild.removeChild(tr); } //从播放列表删除 function removePlaySong(tr) { var l_tb = el("tabPlayList"); l_tb.firstChild.removeChild(tr); } //到指定位置播放 function playposition() { Player.controls.currentPosition = parseFloat(el("txtPosition").value); el("txtPosition").value = "1.0"; } function StartMeUp(){Player.controls.play()} function ShutMeDown(){Player.controls.stop()} function Pause(){Player.controls.pause()} function Next(){Player.controls.next()} function Prev(){Player.controls.previous()} function Forward(){Player.controls.fastForward()} function reverse(){Player.controls.fastReverse()} function SetPlayMode(value){Player.settings.setMode(value,true)} function ChangeuiMode(value){Player.uiMode=value;} function AjustSound(){ if(event.srcElement.name=="turnup" && Player.settings.volume<=100) {Player.settings.volume+=10} if(event.srcElement.name=="turndown" && Player.settings.volume>=0) {Player.settings.volume-=10} } </script> <SCRIPT LANGUAGE = "JScript" FOR = "Player" EVENT = "MediaChange"> el("spnCurrentMediaName").innerText = Player.currentMedia.name; el("spnCurrentMediaDuration").innerText = Player.currentMedia.durationString; el("spnCurrentMediaWidth").innerText = Player.currentMedia.imageSourceWidth; el("spnCurrentMediaHeight").innerText = Player.currentMedia.imageSourceHeight; el("spnCurrentMediaMarkerCount").innerText = Player.currentMedia.markerCount; el("spnCurrentSourceURL").innerText = Player.currentMedia.sourceURL; </SCRIPT> <object id="Player" width=300 height=300 classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6"> <param name="URL" value="test.wmv"> <param name="autoStart" value="1"> <param name="balance" value="0"> <param name="baseURL" value> <param name="captioningID" value> <param name="currentPosition" value="0"> <param name="currentMarker" value="0"> <param name="defaultFrame" value="0"> <param name="enabled" value="1"> <param name="enableErrorDialogs" value="0"> <param name="enableContextMenu" value="1"> <param name="fullScreen" value="0"> <param name="invokeURLs" value="1"> <param name="mute" value="0"> <param name="playCount" value="1"> <param name="rate" value="1"> <param name="SAMIStyle" value> <param name="SAMILang" value> <param name="SAMIFilename" value> <param name="stretchToFit" value="0"> <param name="uiMode" value="full"> <param name="volume" value="100"> <param name="windowlessVideo" value="0"> </object> <br> <INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="播放" OnClick="StartMeUp()"> <INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="停止" OnClick="ShutMeDown()"> <input type="BUTTON" name="BtnPause" value="暂停" onClick="Pause()"> <label> <input name="turnup" type="button" id="turnup" value="+" onClick="AjustSound()"> 调节声音 </label> <input name="turndown" type="button" id="turndown" value="-" onClick="AjustSound()"> <br> <input type="BUTTON" name="BtnNext" value="下一个" onClick="Next()"> <input type="BUTTON" name="BtnPrev" value="前一个" onClick="Prev()"> <INPUT TYPE="BUTTON" NAME="BtnForw" VALUE="快进" OnClick="Forward()"> <INPUT TYPE="BUTTON" NAME="BtnReve" VALUE="快退" OnClick="reverse()"> <br> <label>播放模式</label> <select id="setplay" name="setplay" onChange="SetPlayMode(this.options[this.selectedIndex].value)"> <option value="loop" >循环播放</option> <option value="shuffle">随机播放</option> </select> <label>显示模式</label> <select name="Changeui" onChange="ChangeuiMode(this.options[this.selectedIndex].value)"> <option value="none">none</option> <option value="mini">mini</option> <option value="invisible">invisible</option> <option value="full" selected>full</option> </select> <br><br><br><br> 媒体列表:<br> <div id = "divMediaList"> <table id="tabMediaList"> </table> </div> <br> 播放列表:<br> <div id="divPlayList"> <table id="tabPlayList"> </table> </div> <br> 当前播放媒体信息:<br> 名称:<span id="spnCurrentMediaName"></span><br> 长度:<span id="spnCurrentMediaDuration"></span><br> 宽度:<span id="spnCurrentMediaWidth"></span>像素<br> 高度:<span id="spnCurrentMediaHeight"></span>像素<br> 标志数:<span id="spnCurrentMediaMarkerCount"></span><br> 源地址:<span id="spnCurrentSourceURL"></span><br> <br> <br> <INPUT TYPE = "BUTTON" ID = "play" Name="play" VALUE = "播放选中的歌曲" onClick = "addSeletedSongToPlayList();"> <INPUT TYPE = "BUTTON" ID = "clear" Name="clear" VALUE = "清空播放列表" onClick = "clearPlaylist();"> <INPUT TYPE = "BUTTON" ID = "clear" Name="clear" VALUE = "清空媒体列表" onClick = "clearMedialist();"> <br> <input type="Text" name="songURL" value ="http://" size="33"> <INPUT TYPE = "BUTTON" ID = "add" Name="add" VALUE = "添加到媒体列表" onClick = "addUrlToList();"> <br>可输入:1)HTTP地址: 如http://www.aaa.com/xxx.mp3 <br>2).相对位置: 如yyy.wmv <br>3).绝对位置: 如file:///D:/bbb/zzz.wma <br> <br> <input type="button" onclick="alert(Player.versionInfo);" value="播放器版本"> <input type="button" onclick="alert(Player.controls.currentPosition);" value="获取当前位置"> 跳到<input type="text" id="txtPosition" size="5" value="1.0">秒播放 <input type="button" onclick="playposition();" value="确定">
0
相关文章