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 loadVideo(){
    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.

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 loadVideo(){
    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.

• javascript
• html
• video
• dom-events

Share Improve this question Follow edited May 7, 2021 at 20:42 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 27, 2011 at 12:54 sasharsashar 5111 silver badge88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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/12/items/FarSpeak1935/FarSpeak1935_512kb.mp4";

$("movie").play();

Try out: http://jsfiddle/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./articles/view/consistent-event-firing-with-html5-video/

While I can't ment, 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/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 mon 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.