您的位置:首页 > Web前端 > JavaScript

实现基于WMP的用js实现的播放器,含进度条哦~~

2007-05-16 11:26 363 查看
为了让web上的wmp样式更丰富,因此需要为wmp写javascript脚本,花了一天的时间做了一个,自我感觉样式还不错,并且加深了对javascript的使用和理解,至于如何通过javascript控制wmp的参数,网上的资料太多太多,我就不说啦~~~

这里就主要说说其中比较困难的地方(网上搜到的需求还是蛮大的):比如播放进度条的展现和控制吧~~还挺好玩的,声音控制就相对简单了,也不说了~~

在进度条的位置,我放置了一个几个层,用于控制进度条

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td width="100%" align=left valign="baseline" style="cursor:hand" onmouseout="noshowtime()" onmousemove="showtime(this)" onclick="goto(this)"> 
<div id="foreDiv" style="HEIGHT:16px; position:absolute; left:136px; bottom:13px; width:1px; z-index:1; background-image:url(images/player/2.jpg)"></div><div id="playerinfo" style="z-index:2;position:absolute; left:136px; bottom:13px; overflow:visible; font-size:small; text-align:center;" ></div>
<div id="time" style= "DISPLAY: none; FONT-SIZE: 12px; Z-INDEX: 100;left:136px; bottom:30px; WIDTH: 20px; COLOR: white; POSITION: absolute; outset: ; hight: 10px"></div>
</td></tr></table>

然后是写javascript啦~~~节选出一部分吧,还蛮长的,几个比较重要的方法,可作参考。

function updatetime()
{
if(WindowsMediaPlayer.controls.currentPositionString=='')
{
playerinfo.innerHTML = "00:00" + " / " + WindowsMediaPlayer.currentMedia.durationString;
varfullscreen=0;
}
else
{
varfullscreen=1;
playerinfo.innerHTML = WindowsMediaPlayer.controls.currentPositionString + " / " + WindowsMediaPlayer.currentMedia.durationString;
if((document.documentElement.clientWidth>270)&&( foreDiv.style.width!=document.documentElement.clientWidth-270))
{
foreDiv.style.width=(document.documentElement.clientWidth-270)* WindowsMediaPlayer.controls.currentPosition/WindowsMediaPlayer.currentMedia.duration;
}
else foreDiv.style.width=1;
}
}

function play()
{
if (WindowsMediaPlayer.controls.isavailable('play'))
{
WindowsMediaPlayer.controls.play();
playerinfo.innerHTML = "播放"
varfullscreen=1;
playerinfo.innerHTML = ' 音量:'+WindowsMediaPlayer.settings.volume;
state=setInterval("updatetime()",100);

}
}

function showtime(t2)
{
//t2.setCapture();
var tx=event.clientX;

time.style.display="";
var timeto = WindowsMediaPlayer.currentMedia.duration * (tx-138)/(document.documentElement.clientWidth-270);

if(WindowsMediaPlayer.URL!="")
{

timeto = Math.floor(timeto);
var hour= Math.floor(timeto / 3600).toString();
var minute= Math.floor(timeto / 60).toString();
var sec = Math.floor(timeto % 60).toString();
time.style.left = tx;
time.innerHTML = hour + ":" + minute + ":" + sec ;
}
//t2.releaseCapture();

}



本来鼠标放上去可以显示拖放到的位置,可惜不好截屏~~嘎嘎~~

如需代码的,可以加我msn:FatalKiss2000@hotmail.com

鉴于n多人找过我看源码,为了方便还是上传了资源: http://download.csdn.net/user/lhfzd2004,有问题可以问我哦~~
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: