HTML5 video loading time

I am trying to calculate the measure time of html 5 video. I use Javascript to listen to html5 video event loadstart and canplaythrough using:

media.addEventListener('loadstart'getStartTime(){
 startTime = new Date().getTime();},
 false)

and similar for endTime with event set as canplaythrough to listen. However I could not get any data.

Can someone please guide me how to measure video load time using Javascript.

Thank you for your response, but the solution is I believe using jQuery; however, I was wondering if it is possible from Javascript. I have attached a copy of my code:

function l开发者_运维问答oadVideo(){
    var timeNow = Date.now(), timeStartLoad, timeFinishLoad;
    myVideos = new Array();
    myVideos[0] = "trailer.mp4";
    myVideos[1] = "trailer.ogg";
    myVideos[2] = "trailer.m4v";
    var videoId = document.getElementById('idForVideo');
    var video = document.createElement('video');
    for(var i=0; i<myVideos.length; i++){
        var source = document.createElement('source');
        source.setAttribute('src', myVideos[i]);
        video.appendChild(source);
    }
    video.load();
    video.addEventListener('loadstart', function(){
        timeStartLoad = Date.now() - timeNow;
        }, false);
    video.addEventListener('hasenoughdata', function(){
        timeFinishLoad = Date.now() - timeStartLoad;
        }, false);
    idForVideo.appendChild(video);
    newDiv = document.getElementById('newDiv');
    newDiv.innerHTML = "BodyLoad: " + timeNow + " " + "; Video Load: " + timeStartLoad + "; Video Loaded: " + timeFinishLoad;
    //alert(timeStartLoad);
    
} 

However I get undefined for both timestartLoad and timeFinishLoad. My html body has onload method linked to this function.

---

Your code has some (copy & paste) syntax problems.

var timeInit = Date.now(), timeLoad, timeCanPlay;

$("movie").addEventListener('loadstart', function(){
  timeLoad = Date.now();
    $("t1").innerHTML = "load: " + (timeLoad - timeInit) + " msecs";
});

$("movie").addEventListener('canplaythrough', function(){
  timeCanPlay = Date.now();
  $("t2").innerHTML = "canplay: " + (timeCanPlay - timeLoad) + " msecs";
});

$("movie").src = "http://ia600208.us.archive.org/12/items/FarSpeak1935/FarSpeak1935_512kb.mp4";

$("movie").play();

Try out: http://jsfiddle.net/noiv/98xZP/:

---

Hey, I figured it out. The reason seems to be due to the fast responsiveness of the browser that it fetches the data before even the event is catched. A solution as provided by opera seems to work. Include the event listener at the inline script and make addEventListener for window object. More details at: http://dev.opera.com/articles/view/consistent-event-firing-with-html5-video/

---

While I can't comment, I have added a fork to the fiddle posted above by @noiv , as the fiddle had some JS errors. Thanks @noiv for putting me on the right direction.

http://jsfiddle.net/truedat101/Gbfj2/7/

$("movie").addEventListener('loadstart', function(){
    timeLoad = Date.now();
    console.log("loadstart event time: " + timeLoad + ", delta: " + (timeLoad - timeInit));
    // alert("loadstart event time: " + timeLoad + ", delta: " + (timeLoad - timeInit));
});

It is worth noting the whatwg is attempting to get some uniformity around video metrics in the browser, so that there will be some common attributes supported by the browser, though it appears already that this work will be split across party lines, with Mozilla supporting their own metrics, Chromium team supporting theirs, and Apple Safari supporting theirs.