该播放器容器内部包含两部分，分别是媒体播放区域和控件区域，其中控件浮动在容器的底部。
控件区域又由上方的进度条和下方的控件组构成。进度条可以包括两层 DIV，一层作为底部背景，一层位于背景之上，作为实际的进度显示。控件组的布局左边浮动 “播放/暂停” 按钮，“时长” 信息，右边浮动 “音量、“倍速”、“全屏” 按钮。
接下来就需要为各个控件按钮添加对应的事件行为
款很棒的HTML5
视频播放器作为下一代的网页语言，HTML5
拥有很多让人期待已久的新特性，其中之一就是
video
标签，让开发者可以在网页中和添加图片一样简单的方式添加视频。1、VideoJSVideoJS
是最流行的
HTML5
视频播放器，免费、开源，可使用
CSS
轻松定制皮肤，支持全屏，在不支持的浏览器自动切e799bee5baa6e4b893e5b19e31333433623063换为
Flash
播放。2、SublimeVideoSublimeVideo
是一个独特的基于云概念的
HTML5
视频播放器，功能强大，可惜不是免费的。3、Open
Standard
Media
(OSM)
Player由
Alethia
Inc
开发，是集全功能于一体的网络播放器，非常不错。4、Video
for
EverybodyVideo
for
Everybody
让你在网页中嵌入一小段代码就能支持
HTML5
视频，在不支持的浏览器中自动切换为
Flash
播放。5、Kaltura
HTML5Kaltura
的
HTML5
视频解决方案
–
兼容所有主流浏览器，采用独特的
fallback
机制。6、FlareVideoFlareVideo
由
Alex
MacCaw
开发，他是一位Ruby/JS开发者，FlareVideo主要特色：在不支持
HTML5
视频的情况，用Flash作为替代方案可轻松自定义主题支持全屏完全开源和免费用于商业用途7、Projekktor全文
你用的是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
可以作为参考
以上
