jQuery取得滑鼠座標，以及跳轉video時間

上次講到用jQuery跟html5控制影片，這次因為還想控制影片的位置，希望可以點時間軸就跳轉位置，就又研究了一下。

首先要先讓jquery知道你點下去的位置。
e.pageX
e.pageY
然後稍微換算一下上次計算影片位置的公式，把取得的x軸座標轉換成時間就可以了。

view plaincopy to clipboardprint?

1. $(".track_bar").click(function(e){   
2.     video.currentTime=(e.pageX*video["duration"])/時間軸長度;   
3. });  

如果要像一般video player一樣，用拖曳的就可以跳轉時間也沒問題。

view plaincopy to clipboardprint?

1. //判斷是否按下   
2. var clicking=false;   
3. $("#time_line").mousedown(function(e){   
4.     clicking=true;   
5.     video.currentTime=(e.pageX*video["duration"])/時間軸長度;   
6. });   
7. $("#time_line").mouseup(function(e){   
8.     clicking=false;   
9. });   
10. //如果按下，滑鼠移動時改變影片時間   
11. $("#time_line").mousemove(function(e){   
12.     if(clicking == false) return;   
13.     video.currentTime=(e.pageX*video["duration"])/時間軸長度;   
14. });  

觀看效果