2011年12月7日 星期三

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

315060_2602811079346_1667869575_n

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

首先要先讓jquery知道你點下去的位置。
e.pageX
e.pageY

然後稍微換算一下上次計算影片位置的公式,把取得的x軸座標轉換成時間就可以了。
  1. $(".track_bar").click(function(e){   
  2.     video.currentTime=(e.pageX*video["duration"])/時間軸長度;   
  3. });  
如果要像一般video player一樣,用拖曳的就可以跳轉時間也沒問題。
  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 == falsereturn;   
  13.     video.currentTime=(e.pageX*video["duration"])/時間軸長度;   
  14. });  
觀看效果
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...