トリガーイベントに応答してjQueryを使用してHTML5ビデオプレーヤーをアニメーション化する方法はありますか？

Question

私は自分のサイトでJilionのSublimeのHTML5 Video Playerを使用しています。特定のイベントがプレイヤーを介してトリガーされたときにビデオプレーヤーをアニメーション化するためにjQueryを使用する方法があるかどうか疑問に思っていましたか？

たとえば、再生ボタンがヒットした場合、ビデオプレーヤーは画面の中央に移動します。

私はプレイヤーのためにjsの周りに掘り出し物を持っていた、それはプレイヤーが何をトリガするために "再生"、 "一時停止"、 "終了"と "終了"のようなものを使用しているようだ。

$('#video').animate({left: '350'}, "fast"); 

私は、これはハックジョブの一種であることを理解、誰でも方向に私を指すことができます：私は「遊び」がヒットしたときにこれを行うと言うでしょういくつかのjQueryとしてその同じ技術をできれば私は思っていたことです私がこのようなことをやっていく方法について。事前に

o.play=function(a){if(a||this.ga==Dc)this.Z=0,this.coords=this.ec;else 
if(this.Ga())return l;Ic(this);this.startTime=a=oa();-1==this.ga&&(this.startTime- 
=this.duration*this.Z);this.ue=this.startTime+this.duration;this.rd=this.startTime; 
this.Z||this.vd();this.la("play");-1==this.ga&&this.la("resume");this.ga=1; 
var b=ia(this);b in Gc||(Gc[b]=this);Jc();Lc(this,a);return j}; 

ありがとう：ここ

は、再生機能の一例です。

更新：これは私が現時点で持っているものなので、うまくいくようです。

var v = document.getElementsByTagName("video")[0]; 
v.addEventListener("playing", function() { 
$('#video').animate({left: '-90'}, "fast"); 
},function(){ 
$('#video').animate({left: '-346'}, "fast"); 
}); 

Answer 1

HTML5ビデオは、再生、一時停止、終了、およびいくつかの他のように、それが発するa number of eventsを持っています。 jQueryの.on()を使用して、これらのイベントにバインドし、そこから必要なものを実行できます。

Answer 2

カスタムイベントを使用して動作をトリガーすることができます。例えば

：

$('body').bind('videoPlay', function() { 
    // fancy animation stuff here.. 
    alert('video started playing'); 
}); 

とo.play関数内あなたはこのような何かを追加します。

$('body').trigger('videoPlay'); 

あなたはJavaScriptにアクセスすることができた場合、当然のことながら、あります

===

別のオプションは、以上に..です正しい場所でそれを変更自分のメソッドでo.playを書き込んだ後、元のo.playを呼び出してください。o.play（）メソッドがpause（）とplay（）の両方を処理するように見えるので、これが動作するかどうかはわかりません。このような何か：カスタムイベントに結合し、限り、あなたは「トリガー」イベントをする必要がどこに知っているように、それらに反応することができますどのような場合には

var oldplay = o.play; 
o.play = function() { 
    $('body').trigger('videoPlay'); 
    return oldplay.call(); 
} 

。