JS网页播放器的进度条究竟怎么做 高分求原理及代码 100分

我是JS散修 我想知道JS网页播放器的进度条究竟怎么做 什么原理
网上找了一堆 全是那几篇文章 找不到
谁能帮我一下 最简单的能用的代码 要求就是 在一个100PX宽的进度条上 点哪 就从哪放音乐 不用拖动滑块 点击即可
看一下我做的播放器 就差控制条了 http://www.vitoland.cn/music/
那么 wmp在Firefox下如何控制?

你用的是wmp控件的话,可以参考如下属性:

controls.currentPosition
这个属性可以用来控制当前歌曲播放的进度,可写,比如设置
document.getElementById("wmpid").controls.currentPosition = 18
就是将当前歌曲进到18秒,我没有试过非整数部分可不可以生效(应该是可以的)

controls.currentPositionString
这是个只读属性。比如当前歌曲在18秒出则值为00:18.

至于你说的进度条,控制起来是用event.clientX属性,这是鼠标相对于窗口的横坐标。用这个数字减去那个进度条DIV的clientX属性就是鼠标在进度条上的位置。你自己可以作些加减微调确保结果适当。如果宽度100px,你点的位置是40px.那么用40/100*歌曲长度就是当前应该跳转到的位置了。

加入滑块也很简单,网上有很多drag类,加一个进去稍微调整一下就比较好了

顺便也贴一下wmp组件的基本属性吧,LZ如果没有的话可以稍微参考一下
URL:String; 指定媒体位置,本机或网络地址
uiMode:String; 播放器界面模式,可为Full, Mini, None, Invisible
playState:integer; 播放状态,1=停止,2=暂停,3=播放,6=正在缓冲,9=正在连接,10=准备就绪
enableContextMenu:Boolean; 启用/禁用右键菜单
fullScreen:boolean; 是否全屏显示
[controls] wmp.controls //播放器基本控制
controls.play; 播放
controls.pause; 暂停
controls.stop; 停止
controls.currentPosition:double; 当前进度
controls.currentPositionString:string; 当前进度,字符串格式。如“00:23”
controls.fastForward; 快进
controls.fastReverse; 快退
controls.next; 下一曲
controls.previous; 上一曲
[settings] wmp.settings //播放器基本设置
settings.volume:integer; 音量,0-100
settings.autoStart:Boolean; 是否自动播放
settings.mute:Boolean; 是否静音
settings.playCount:integer; 播放次数
[currentMedia] wmp.currentMedia //当前媒体属性
currentMedia.duration:double; 媒体总长度
currentMedia.durationString:string; 媒体总长度,字符串格式。如“03:24”
currentMedia.getItemInfo(const string); 获取当前媒体信息"Title"=媒体标题,"Author"=艺术家,"Copyright"=版权信息,"Description"=媒体内容描述,"Duration"=持续时间(秒),"FileSize"=文件大小,"FileType"=文件类型,"sourceURL"=原始地址
currentMedia.setItemInfo(const string); 通过属性名设置媒体信息
currentMedia.name:string; 同 currentMedia.getItemInfo("Title")
[currentPlaylist] wmp.currentPlaylist //当前播放列表属性
currentPlaylist.count:integer; 当前播放列表所包含媒体数
currentPlaylist.Item[integer]; 获取或设置指定项目媒体信息,其子属性同wmp.currentMedia

播放器界面做的很不错,请继续努力

------
问题补充:

那么 wmp在Firefox下如何控制?
-----
目前我所知道的firefox下同样支持以上属性。只是调用时候要这样<object type="application/x-ms-wmp">,其他都相同。我用的是firefox3.6,安装了wmp扩展控件。没有安装的用户可能不能正常浏览你的页面。

另外在测试的时候发现直接在原来的object里添加type属性不行,但是用一个新的object可以,原因未知。我想是不是不认clsid的问题。如果真是这样,可能需要用程序判断浏览器然后动态写入相应的object元素?

另外查找资料的时候发现了这篇文章
http://www.jb51.net/article/24207.htm
可以作为参考

以上
温馨提示:答案为网友推荐,仅供参考
相似回答