0

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

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

我在播放器的 js 中进行了挖掘，它似乎使用诸如“播放”、“暂停”、“完成”和“结束”之类的东西来触发播放器的操作。我想知道的是，我是否可以使用与某些 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");
});
4

2 回答 2

4

HTML5 视频有许多它发出的事件，例如播放、暂停、完成和其他一些事件。您可以使用 jQuery 的.on()绑定到这些事件并从那里做任何您想做的事情。

于 2012-05-04T02:59:26.823 回答
0

您可以立即使用自定义事件来触发行为。

例如：

$('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() 和玩（）？像这样的东西：

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

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

于 2012-05-04T03:01:36.430 回答