3

I want to detect through jQuery or Javascript when a specific video inside an html5 tag has been entirely loaded (I mean, downloaded into the cache of the browser). The video has the preload = "auto" attribute.

I tried everything in my power to do this (I'm a beginner) with no luck. Can't seem to find any event I could listen to, is there any way to do this?

PS: the only thing I came across is the network_state property of the video object, but the references around the web doesn't seem to agree with the state it returns, and when I tried it I didn't find a state for "LOADED".

EDIT: I found an event I think I can use, the canPlayThrough. I tested it and it seemed to work, but I'm not sure if it really tells me that the video has been totally loaded, or just that it loaded enough data to start playing (which is no good).

CCrawler
  • 609
  • 3
  • 11
  • 24
  • 1
    Try some callbacks: http://stackoverflow.com/questions/2954595/html5-video-callbacks/2954618#2954618 and see this trhead too: http://stackoverflow.com/questions/2994680/accessing-html-5-video-progress-event-with-jquery – JMax Nov 06 '11 at 16:06
  • Thanks a lot for your reply. Using the callbacks seems like a good idea, but I can't seem to find the apropiate callback for "loaded". Sorry if I missed something on the threads you proposed, again, I'm a beginner. – CCrawler Nov 06 '11 at 18:20

1 Answers1

4

You can bind to the ended event :

$("video").bind(eventname, function() {
   alert("I'm done!");
});

Where eventname is the event you want to list to

A complete list of events is here -> http://dev.w3.org/html5/spec/Overview.html#mediaevents

UPDATED :

To get a percentage loaded you can use a combination of 2 events :

$("video").bind('durationchange', checkProgress);
$("video").bind('progress', checkProgress);

function updateSeekable() {
  var percentageComplete = (100 / (this.duration || 1) *
    ($(this).seekable && $(this).seekable.length ? $(this).seekable.end : 0)) + '%';
}
Manse
  • 37,765
  • 10
  • 83
  • 108
  • Thanks for your reply, but I still can't find the event that tells me when the video has been completely loaded. I recently tried binding the canPlayThrough event and it SEEMS to work, but I'm not sure if it's telling me that it has completely loaded, or that it loaded just enough data to play without interruption (which is no good, I need to know that the video was entirely loaded). – CCrawler Nov 06 '11 at 20:22
  • 1
    @CCrawler Updated my answer - you can use a combination of durationchange and progress – Manse Nov 06 '11 at 20:37