javascript - 如何使用 jQuery 为 HTML5 视频播放器制作动画以响应触发事件？

Question

所以，我正在使用 Jilion 的 Sublime 的 HTML5 Video Player在我的网站上。想知道是否有一种方法可以在通过播放器触发某些事件时使用一些 jQuery 为我的视频播放器设置动画？

例如，当点击播放按钮时，视频播放器将移至屏幕中央。

我深入研究了播放器的 js，它似乎使用“播放”、“暂停”、“完成”和“结束”等内容来触发播放器的操作。我想知道的是，我是否可以使用与某些 jQuery 相同的技术，在点击“play”时执行此操作:

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

我知道这是一种黑客工作，任何人都可以指导我如何去做这样的事情。

这是播放功能的示例:

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()绑定(bind)到这些事件并从那里做任何你想做的事情。