实现基于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,有问题可以问我哦~~
这里就主要说说其中比较困难的地方(网上搜到的需求还是蛮大的):比如播放进度条的展现和控制吧~~还挺好玩的,声音控制就相对简单了,也不说了~~
在进度条的位置,我放置了一个几个层,用于控制进度条
<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,有问题可以问我哦~~
相关文章推荐
- 歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)
- 基于JS实现带动画效果的流程进度条
- js实现图片上传预览及进度条
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- AJAX实现基于WEB的文件上传的进度控制
- 基于jquery实现智能提示控件intellSeach.js
- 游戏任务成就体系的实现(五):通讯模块(MsgUtil)基于NodeJS+TCP的机制的实现
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
- 基于Retrofit+Okio+RxBus实现文件下载(带下载进度)
- 基于ffmpeg+SDL2 实现简单rtsp播放器
- 基于node.js及express实现中间件,实现post、get
- JS+WCF实现进度条实时监测数据加载量的方法详解
- js实现图片上传预览及进度条
- Bootstrap实现基于carousel.js框架的轮播图效果
- <canvas>+JS如何实现可拖拽并且显示百分比的环形进度条
- 基于uploadify.js实现多文件上传和上传进度条的显示
- 基于Javascript实现文件实时加载进度的方法
- 基于js的网页计算器实现
- 基于Vue.js实现tab滑块效果