Question

So, I’m using Jilion’s Sublime’s HTML5 Video Player on my site. And was wondering if there was a way to use some jQuery to animate my video player when certain events are triggered via the player?

For example when the play button is hit, the video player would shift into the center of the screen.

I had a dig around in the js for the player and it seems to be using things like “play”, “pause”, “finish” and “end” to trigger what the player does. What I was wondering is if I could that same technique as some jQuery that would say do this when “play” is hit:

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

I understand this is sort of a hack job, could anyone point me in the direction of how I’d go about doing something like this.

Here’s an example of the play function:

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};

Thanks in advance.

UPDATE: Ok, so this is what I’ve got at the moment, which seems to work.

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

Answer 1

HTML5 video has a number of events which it emits, such as play, pause, finish, and a few others. You can use jQuery’s .on() to bind to these events and doing anything you want from there.