Question

Can you give me an example for Chrome where I have something like this:

function checkVideoStatus(vidElement){
   var currentTime = vidElement.currentTime;
   //now wait 5 seconds
   var updatedTime = vidElement.currentTime;
   //now check if video has freezed
   if(updatedTime == currentTime){
      //fire videoFreeze Event
   }

}

So I would want to fire this event here. Also, is it really necessary to fire this event, since I already can put a relevant method call here to do what I want accordingly?

Is it in JS the events are only like onChange, onMouseOver etc?

Answer 1

This is a simple mockup of a custom event and a countdown.

<div id="vid" data-current="0">Video</div>​

var vid = document.getElementById('vid'),
    freeze;

vid.addEventListener('freeze', function() {
    console.log('Firing vid.freeze.... ' + this.dataset.current);
    console.log('vid.freeze fired.');
});

(function go() {
    var status;
    vid.innerHTML = 'Video time: ' + vid.dataset.current;

    if (vid.dataset.current < 5) {
        status = vid.dataset.current == 0 ? 'Starting... ' : 'Continuing... ';
        console.log(status + vid.dataset.current);
        setTimeout(go, 1000);
    } else {
        freeze = document.createEvent('CustomEvent');
        freeze.initEvent('freeze', true, true);
        vid.dispatchEvent(freeze);
    }

    vid.dataset.current++;
})();​

http://jsfiddle.net/userdude/Ampbm/1

This is mostly to show how to make a custom event which fires after five seconds. I’m also using the data- attribute to store the current time. What you’re doing in the if block I’m not quite sure about, since .updatedTime and .currentTime seems to me to be possibly the same thing each go round.