用javascript控制调用media player播放器例子[转]

最新推荐文章于 2025-06-23 15:28:44 发布

原创最新推荐文章于 2025-06-23 15:28:44 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #button #url #windows #null #file

这是一个使用JavaScript控制媒体播放器的实例，支持播放列表。用户可以通过输入媒体资源URL，将其添加到播放列表，然后播放选中的歌曲。示例中包含了添加、删除歌曲，以及播放、暂停、快进、快退等控制功能，但不包含循环播放的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此范例界面较为简单，支持播放列表。建立播放列表的步骤为：
1)在文本框中输入媒体资源的地址，可以是HTTP地址，相对地址和绝对地址
2)点击“添加到媒体列表”按钮，将媒体资源信息放到媒体列表中
3)在媒体列表中，点击“添加”链接，将媒体加入到播放列表中
4)重复若干遍，加入所有歌曲
5)点击“播放选中的歌曲“，就开始播放播放列表中的所有打勾的媒体文件
6)循环播放，部分代码贴出来了，但此范例没有实现此功能

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 + " <a href='#' onclick='addSong("" + strSong + "");'>添加</a>";

strHtml += " <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 = " <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>

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>

<br>

<label>

调节声音

</label>

<br>

<br>

</select>

<option value="invisible">invisible</option>

</select>

媒体列表:<br>

</table>

</div>

<br>

播放列表:<br>

</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>

<br>可输入:1)HTTP地址: 如http://www.aaa.com/xxx.mp3

<br>2).相对位置: 如yyy.wmv

<br>3).绝对位置: 如file:///D:/bbb/zzz.wma

<br>

跳到<input type="text" id="txtPosition" size="5" value="1.0">秒播放

//另附连续播放功能部分代码，主要实现多条节目连续播放，而且多条节目有自己的出点和入点。以及播放器的相关播放状态控制。
xml数据格式如下：

<clip>

<filename>//198.9.0.149/pdd共享文件夹/Temp/35_相声test.avi</filename>

</clip>

<clip>

<filename>//198.9.0.149/pdd共享文件夹/Temp/dvcam_00.mov</filename>

</clip>

<clip>

<filename>//198.9.0.149/pdd共享文件夹/Temp/jm1.wmv</filename>

</clip>

</filegroup>

var FileListIndex = -1;

function MediaPlayFunc()

{

var ItemNodeList=FileListXmlDoc.documentElement.selectNodes("/filegroup/clip");

var len = ItemNodeList.length;

if (len>0)

{

if(FileListIndex == -1)

FileListIndex = 0;

else if(FileListIndex + 1 == len)

{

el("xplayer").controls.stop();

//el("xplayer").controls.play();

return;

}

else

FileListIndex = FileListIndex + 1;

if(ItemNodeList[FileListIndex].selectSingleNode("filename") != null)

{

var url = ItemNodeList[FileListIndex].selectSingleNode("filename").text;

//需要转换成桢格式

var inframe = ItemNodeList[FileListIndex].selectSingleNode("inframe").text;

var outframe = ItemNodeList[FileListIndex].selectSingleNode("outframe").text;

/***********用此方法报权限不足错误*****************

//addmedia(ItemNodeList[i].selectSingleNode("filename").text);

//新建一个指定URL的Media。

//var playlist=el("xplayer").currentPlaylist;

//var currMedia = el("xplayer").newMedia(url);

//把新建的Media item添加到播放器列表

//playlist.appendItem(currMedia);

/****************************************************/

el("xplayer").controls.currentPosition = inframe/25.0;

var timelong = (outframe - inframe)/25.0*1000.0

//让播放器开始播放

XPlayer.setUrl(url);

if(el("xplayer").openState!=13) //13 open state

{

el("xplayer").controls.play();

if(el("xplayer").openState!=6) //6 open but no flow state

{

pubListTimer = setTimeout(MediaPlayFunc,timelong);

}

return;

}

else

{

if(el("xplayer").playState == 3) //3 play state

{

el("xplayer").controls.pause();

}

注意：该代码仅能在IE下运行，系统必须安装Windows Media Player