18 June 2010

Event handler for HTML5 video

I'm using the HTML5 video tag inside the AnythingSlider. An interesting problem arose: How do you stop the AnythingSlider when the user starts playing the video? You don't want the slider to keep going in this situation.

Well, here's a solution. The HTML5 video events are described in the "4.8.9.12 Event summary" section of the W3C document. At first, you'd guess that you'd use the onPlay event handler. Nope. That only works when you play the video the first time; on the second play, it won't call the function. The event handler to use is onPlaying.

But how do you stop the AnythingSlider programmatically? The good folks on StackOverflow.com provided the answer.

So here's the video tag:
<video controls preload onPlaying="stopSlider()">
....
</video>
And here's the function to stop the AnythingSlider:
function stopSlider(){
while (1 == 1){
$("div.anythingSlider a#start-stop").trigger("click");
if ($("div.anythingSlider a#start-stop").html().indexOf("Go") != -1)
break;
}
}
Note what appears to be an infinite while loop: Actually, the code is designed to stop the AnythingSlider. It triggers the "click" on the "start-stop" element, checking after each click to see if the HTML of the element contains the word "Go"; if it does, it break out of the loop. Of course, you'll have to modify it if you're using text other than "Go" on the "start-stop" anchor tag.

No comments: