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

2023-04-21 10:02:01JavaScript024

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

你用的是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

可以作为参考

以上

可以的，你可以去百度搜索一个叫“秒秒学”的教学网站，里面Flash中的HTML5开发教程就会交互式的教你，在网页中插入视频，并如何利用JavaScript代码来控制视频,让网页中的视频受到鼠标的控制，任意暂停或播放，且实现快进功能。视频播放控制功能是由HTML5提供的。但是，在一些特殊的情况下（比如旧版浏览器、不兼容HTML5的应用平台等），我们可能无法使用其提供的播放控制功能。

首先设定屏幕的宽和高

var height = device.height//设定高度值=设备高度

var width = device.width//设定宽度值=设备宽度

setScreenMetrics(width, height)//设置脚本坐标点击所适合的屏幕宽高。如果脚本运行时，屏幕宽度不一致会自动放缩坐标。

然后下面的代码是上划

swipe(width / 2, height - 500, width / 2, 0, 500)

语句解析：

swipe（起点横坐标，起点纵坐标，终点横坐标，终点纵坐标，使用时间）

代码解析：

width / 2是宽度二分之一处。也就是屏幕宽度的中间位置。

height - 500是高度减500像素，屏幕顶部为0。

0是屏幕顶端。