Question

所以，我在我的网站上使用了Jilion的Sublime HTML5 Video Player。并且想知道当通过播放器触发某些事件时是否有办法使用某些jQuery为我的视频播放器制作动画？

例如，当按下播放按钮时，视频播放器将移动到屏幕的中心。

我在玩家的js中进行了挖掘，似乎正在使用诸如“play”，“pause”，“finish”和“end”之类的东西来触发玩家所做的事情。我想知道的是，如果我能使用与某些jQuery相同的技术，当“播放”被击中时会这样做：

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

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（）方法处理两个暂停（）和play（）？像这样的东西：

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

在任何情况下，您都可以绑定到自定义事件并对它们做出反应，只要您知道需要“触发”事件的位置。

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

2 个答案: