页面中媒体播放器进度条上如何实现鼠标事件tooltip信息提示，急急急。。。谢谢

Question

页面中依据不同浏览器分别用HTML5和Flash实现了媒体播放器，并添加了控制件，即播放、暂停、音量和进程条等。现在根据客户需求，要在鼠标移动到进程条上时可实时显示鼠标位置播放的时间，且信息提示tooltip出现的位置必须在鼠标左上方，而非一般提示的右下方，如果像Youtube那样的功能，更好不过。
不知哪位高人赐教一二，万分感谢！！！

Answer 1

1：鼠标移上去时获取到当前的鼠标坐标,x,y
2：设置tooltip的内容，以使得后面可以是到它的宽和高,w,h
3：设置tooltip的left=x-w;top=y-h大致上就这样了。至于那个实时的播放时间，我想你肯定是知道的了

Answer 2

tooltip的位置如1楼所说；
tooltip要用空白的iframe，否则可能会被某些控件遮挡；
实时的播放时间的话，你可以获取进度条bar的LEFT绝对位置(假设为x1)和长度L，然后根据鼠标的位置x与进度条LEFT位置之差得到一个当前长度，计算  总播放时间*(x-x1)/L

Answer 3

实时时间我的确已经获得，且也放入了tooltip中。但是还是非常感谢楼上两位，现实现了基本功能，而且能随着鼠标移动而显示实时的时间进度，但效果不是很理想，还是很粗糙。
我想做到的是：
1. 背景消息提示图片（带小三角）能随着播放进度实时显示时间，小三角正好对着进度条的实时进度；
2. 如果能在背景DIV或者iFrame中展现鼠标悬浮位置的视频片段更佳。
谢谢～

Answer 4

我觉得如果你把样式做的好些、与主页面协调一些是不会显得很粗糙的。如果要完美达成你的两点需求，可能要用IFRAME嵌入FLASH来做了，特别是第二点。

Answer 5

换句话说，第一个问题可以根据算法实现吗？感觉如果随着进度来实时显示消息提示，并且不断推进，而小三角也正好对着进度右端，这样的UI我还真没具体的布局想法，crying_boy,给点思路吧，谢谢啊～～
第二个，我也感觉可能需要ActionScript或者Flowplayer来做，但还没具体研究和实施，这里也是希望汲取点营养，启发下思路，呵呵～

Answer 6

问题1本就是个普通算法问题，UI的话就是个DIV，背景是一个小三角，背景颜色和播放器接近，在调整一下透明度，取得DIV的中间位置坐标值后，通过算法使之对其到进度条的实时右端；问题2才是技术含量的东东；要有个服务器插件根据播放进度去取得那个位置的截屏图像，然后传回前台。但你要是想一遍播放一遍随着小三角显示截屏图像，估计服务器一会就崩溃了。要是鼠标移动某个位置然后显示图像的话还可以。

Answer 7

呵呵，我可能表达的不是很清楚，实际我的意思就是mouseover时产生实时视频片段，或者帧。按toury你说的，数据是要以AJAX异步请求获取并动态展现的，对不？
另外，我的网页内嵌Flash播放MP4时，用jQuery和swfobject.js设计了menubar，定位于Flash画面下方，可以实现播放，暂停，音量，进度，静音等功能，但有个很难解决的是无法在这个自定义的menubar上增加全屏控件。按AS3，只能在Flash画面上增加一个button。我不想这样，不知有没有我所想要实现的方案啊？
谢谢哈～

Answer 8

页面代码增加
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />用JS转换第二句的true/false试试

Answer 9

还想要有实时预览……那楼主何必非用JS来干这种离得很远的事情，应该用FLASH。

Answer 10

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的代码。不知为何就是无法实现真正的全屏界面，郁闷
谢谢各位了！

Answer 11

FLASH的全屏一定要通过你使用的xxxPlayer.swf实现。你想想办法找到它的对外接口，如果提供了全屏的对外接口就好办了，如果没有HACK一下，看是不是可以在AS里自己把它加进去。或者另外再找找有没有更合适的yyyPlayer.swf,再或者，自己啃啃AS，自己写一个，呵呵

Answer 12

哦，对了：先尝试着在flashvars{}里加点你认识是全屏的参数进去试试，或许有意想不到的收获亦未可知:))

Answer 13

呵呵，谢谢提示，只是试过了，还是不行。现在的方案是在ActionScript的Main.as中通过添加doubleclick事件实现了全屏，但接着而来的问题是没有了controlbar，只能是按Esc退出全屏界面。请问，这样的情况下，如何添加这个包含标准button的controlbar呢？

Answer 14

具体来说，我有三个as文件，一个是Main.as，另外两个是Music和Videos，分别继承Sound和Video类。在Normal状态下，我是用jQuery的append或prepend添加了controlbar，但全屏模式下怎么添加啊？
谢谢

Answer 15

Main.as中或video中继续添加onmousemove onmouseout事件不可以吗？move事件把controlbar显示出来，out事件隐藏controlbar。总之，你全屏后JS一边凉快去了，还是要从AS入手给出接口，js才有用武之地吧