页面中媒体播放器进度条上如何实现鼠标事件tooltip信息提示,急急急。。。谢谢 页面中依据不同浏览器分别用HTML5和Flash实现了媒体播放器,并添加了控制件,即播放、暂停、音量和进程条等。现在根据客户需求,要在鼠标移动到进程条上时可实时显示鼠标位置播放的时间,且信息提示tooltip出现的位置必须在鼠标左上方,而非一般提示的右下方,如果像Youtube那样的功能,更好不过。不知哪位高人赐教一二,万分感谢!!! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 1:鼠标移上去时获取到当前的鼠标坐标,x,y2:设置tooltip的内容,以使得后面可以是到它的宽和高,w,h3:设置tooltip的left=x-w;top=y-h大致上就这样了。至于那个实时的播放时间,我想你肯定是知道的了 tooltip的位置如1楼所说;tooltip要用空白的iframe,否则可能会被某些控件遮挡;实时的播放时间的话,你可以获取进度条bar的LEFT绝对位置(假设为x1)和长度L,然后根据鼠标的位置x与进度条LEFT位置之差得到一个当前长度,计算 总播放时间*(x-x1)/L 实时时间我的确已经获得,且也放入了tooltip中。但是还是非常感谢楼上两位,现实现了基本功能,而且能随着鼠标移动而显示实时的时间进度,但效果不是很理想,还是很粗糙。我想做到的是:1. 背景消息提示图片(带小三角)能随着播放进度实时显示时间,小三角正好对着进度条的实时进度;2. 如果能在背景DIV或者iFrame中展现鼠标悬浮位置的视频片段更佳。谢谢~ 我觉得如果你把样式做的好些、与主页面协调一些是不会显得很粗糙的。如果要完美达成你的两点需求,可能要用IFRAME嵌入FLASH来做了,特别是第二点。 换句话说,第一个问题可以根据算法实现吗?感觉如果随着进度来实时显示消息提示,并且不断推进,而小三角也正好对着进度右端,这样的UI我还真没具体的布局想法,crying_boy,给点思路吧,谢谢啊~~第二个,我也感觉可能需要ActionScript或者Flowplayer来做,但还没具体研究和实施,这里也是希望汲取点营养,启发下思路,呵呵~ 问题1本就是个普通算法问题,UI的话就是个DIV,背景是一个小三角,背景颜色和播放器接近,在调整一下透明度,取得DIV的中间位置坐标值后,通过算法使之对其到进度条的实时右端;问题2才是技术含量的东东;要有个服务器插件根据播放进度去取得那个位置的截屏图像,然后传回前台。但你要是想一遍播放一遍随着小三角显示截屏图像,估计服务器一会就崩溃了。要是鼠标移动某个位置然后显示图像的话还可以。 呵呵,我可能表达的不是很清楚,实际我的意思就是mouseover时产生实时视频片段,或者帧。按toury你说的,数据是要以AJAX异步请求获取并动态展现的,对不?另外,我的网页内嵌Flash播放MP4时,用jQuery和swfobject.js设计了menubar,定位于Flash画面下方,可以实现播放,暂停,音量,进度,静音等功能,但有个很难解决的是无法在这个自定义的menubar上增加全屏控件。按AS3,只能在Flash画面上增加一个button。我不想这样,不知有没有我所想要实现的方案啊?谢谢哈~ 页面代码增加<param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="true" />用JS转换第二句的true/false试试 还想要有实时预览……那楼主何必非用JS来干这种离得很远的事情,应该用FLASH。 if(Videos.isFlash) {$('#altplayer').append($(document.createElement('a')).attr({href: 'http://www.adobe.com/go/getflashplayer'}).append($(document.createTextNode('Download Flash')))); var flashvars = { url: videoLink, isVid: 1 }; var params = { menu: "false", scale: "noScale", allowfullscreen: "true", allowscriptaccess: "always", bgcolor: "#111111", wmode: "window" }; var attributes = { id:"AltPlayer" }; swfobject.embedSWF("Plugins/AltPlayer.swf", "altplayer", '100%', '100%', "10.0.0", "expressInstall.swf", flashvars, params, attributes); // Query for progress updates every 1/4 second Videos.flt = window.setInterval(function(){ Videos.updateProgress(); }, 250);}呵呵,对于实时预览,的确是未曾具体开发过。主要是我希望自己的页面实现跨浏览器且兼容HTML5的,所以在页面上判断当前浏览器是否支持以HTML5播放MP4。如果不可以,就用Flash播放。HTML5我可以实现全屏播放,且控件不需要置于播放画面上,而统一放在与播放、暂停、进度条和音量等一起的DIV内。但Flash的控制,却只能是前面几个可以统一放在一个div内做成controlbar,全屏却是无论怎么都不行的。以上是部分设置全屏和调用Flash播放MP4的代码。不知为何就是无法实现真正的全屏界面,郁闷谢谢各位了! FLASH的全屏一定要通过你使用的xxxPlayer.swf实现。你想想办法找到它的对外接口,如果提供了全屏的对外接口就好办了,如果没有HACK一下,看是不是可以在AS里自己把它加进去。或者另外再找找有没有更合适的yyyPlayer.swf,再或者,自己啃啃AS,自己写一个,呵呵 哦,对了:先尝试着在flashvars{}里加点你认识是全屏的参数进去试试,或许有意想不到的收获亦未可知:)) 呵呵,谢谢提示,只是试过了,还是不行。现在的方案是在ActionScript的Main.as中通过添加doubleclick事件实现了全屏,但接着而来的问题是没有了controlbar,只能是按Esc退出全屏界面。请问,这样的情况下,如何添加这个包含标准button的controlbar呢? 具体来说,我有三个as文件,一个是Main.as,另外两个是Music和Videos,分别继承Sound和Video类。在Normal状态下,我是用jQuery的append或prepend添加了controlbar,但全屏模式下怎么添加啊?谢谢 Main.as中或video中继续添加onmousemove onmouseout事件不可以吗?move事件把controlbar显示出来,out事件隐藏controlbar。总之,你全屏后JS一边凉快去了,还是要从AS入手给出接口,js才有用武之地吧 关于YUI数据服务器端分页的问题 js写简单双击事件 javaScript 求教,谁帮我看看这个代码,我JS没有基础,不知道对不对啊 菜鸟简单问题 如何取得文件下所有文件的名字? 问两个字符串的问题 无条件送您50元,人人有份!(绝对真实) js数组对比求解 vue_cli4.0中的语法检测怎么关闭 Ember.js如何与后台语言配合? JQuery MagicTabs 问题 请教
2:设置tooltip的内容,以使得后面可以是到它的宽和高,w,h
3:设置tooltip的left=x-w;top=y-h大致上就这样了。至于那个实时的播放时间,我想你肯定是知道的了
tooltip要用空白的iframe,否则可能会被某些控件遮挡;
实时的播放时间的话,你可以获取进度条bar的LEFT绝对位置(假设为x1)和长度L,然后根据鼠标的位置x与进度条LEFT位置之差得到一个当前长度,计算 总播放时间*(x-x1)/L
我想做到的是:
1. 背景消息提示图片(带小三角)能随着播放进度实时显示时间,小三角正好对着进度条的实时进度;
2. 如果能在背景DIV或者iFrame中展现鼠标悬浮位置的视频片段更佳。
谢谢~
第二个,我也感觉可能需要ActionScript或者Flowplayer来做,但还没具体研究和实施,这里也是希望汲取点营养,启发下思路,呵呵~
另外,我的网页内嵌Flash播放MP4时,用jQuery和swfobject.js设计了menubar,定位于Flash画面下方,可以实现播放,暂停,音量,进度,静音等功能,但有个很难解决的是无法在这个自定义的menubar上增加全屏控件。按AS3,只能在Flash画面上增加一个button。我不想这样,不知有没有我所想要实现的方案啊?
谢谢哈~
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />用JS转换第二句的true/false试试
$('#altplayer').append($(document.createElement('a')).attr({href: 'http://www.adobe.com/go/getflashplayer'}).append($(document.createTextNode('Download Flash'))));
var flashvars = {
url: videoLink,
isVid: 1
};
var params = {
menu: "false",
scale: "noScale",
allowfullscreen: "true",
allowscriptaccess: "always",
bgcolor: "#111111",
wmode: "window"
};
var attributes = {
id:"AltPlayer"
};
swfobject.embedSWF("Plugins/AltPlayer.swf", "altplayer", '100%', '100%', "10.0.0", "expressInstall.swf", flashvars, params, attributes);
// Query for progress updates every 1/4 second
Videos.flt = window.setInterval(function(){ Videos.updateProgress(); }, 250);
}呵呵,对于实时预览,的确是未曾具体开发过。主要是我希望自己的页面实现跨浏览器且兼容HTML5的,所以在页面上判断当前浏览器是否支持以HTML5播放MP4。如果不可以,就用Flash播放。HTML5我可以实现全屏播放,且控件不需要置于播放画面上,而统一放在与播放、暂停、进度条和音量等一起的DIV内。但Flash的控制,却只能是前面几个可以统一放在一个div内做成controlbar,全屏却是无论怎么都不行的。
以上是部分设置全屏和调用Flash播放MP4的代码。不知为何就是无法实现真正的全屏界面,郁闷
谢谢各位了!
谢谢