Html5 Video - Percentage Loaded

HTML5 Video - Percentage Loaded?

The progress event is fired when some data has been downloaded, up to three times per second. The browser provides a list of ranges of available media through the buffered property; a thorough guide to this is available on Media buffering, seeking, and time ranges on MDN.

Single load start

If the user doesn't skip through the video, the file will be loaded in one TimeRange and the buffered property will have one range:

------------------------------------------------------
|=============|                                      |
------------------------------------------------------
0             5                                      21
|             \_ this.buffered.end(0)
|
\_ this.buffered.start(0)

To know how big that range is, read it this way:

video.addEventListener('progress', function() {
    var loadedPercentage = this.buffered.end(0) / this.duration;
    ...
    // suggestion: don't use this, use what's below
});

Multiple load starts

If the user changes the playhead position while it's loading, a new request may be triggered. This causes the buffered property to be fragmented:

------------------------------------------------------
  |===========|                    |===========|     |
------------------------------------------------------
  1           5                    15          19    21
  |           |                    |            \_ this.buffered.end(1)
  |           |                     \_ this.buffered.start(1)
  |            \_ this.buffered.end(0)
   \_ this.buffered.start(0)

Notice how the number of the buffer changes.

Since it's no longer a contiguous loaded, the "percentage loaded" doesn't make a lot of sense anymore. You want to know what the current TimeRange is and how much of that is loaded. In this example you get where the load bar should start (since it's not 0) and where it should end.

video.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    ...
});

html 5 video tracking with percentage

How about manipulating the functions like this

var watchPoints = [];

$("#video").bind("timeupdate", function(){

var currentTime = this.currentTime;

var watchPoint = Math.floor((currentTime/this.duration) * 100);

if(watchPoints.indexOf(watchPoint) == -1){

  watchPoints.push(Math.floor(watchPoint))

}

});

/* Assuming that this will be called regardless of whether the user watches till the end point */

$("#video").bind("ended", function() {

   /* use the watchPoints array to do the analysis(ordered array)

   Eg.1 [1,2,3,4,5....100] - length is 100

      2.[90,91..100]  - length is only 10 and the starting point is 90

      3.[1,2,3,4,5,50,51,52,61,62,63,64,65,66,67,68,69,70,98,99,100] - length is 21 and the index of 66 is 13 which clearly tells the user has skipped most of the parts

   */

});

Best way to load a video before into a web page with a progress bar

You'll need to implement javascript to achieve what you're looking for.

You can bind the "buffered" event, but (in Chrome at least) this works fine except that it doesn't call the last "buffered" event (i.e. it will detect 90%...94%...98%... but won't call on 100%).

Note: recent versions of jQuery should use .prop() instead of .attr()

To get around this I've used setInterval() to check the buffer every 500ms (where $html5Video is your <video> element:

var videoDuration = $html5Video.attr('duration');

var updateProgressBar = function(){
    if ($html5Video.attr('readyState')) {
        var buffered = $html5Video.attr("buffered").end(0);
        var percent = 100 * buffered / videoDuration;

        //Your code here

        //If finished buffering buffering quit calling it
        if (buffered >= videoDuration) {
                clearInterval(this.watchBuffer);
        }
    }
};
var watchBuffer = setInterval(updateProgressBar, 500);

html5 video - using the progress event with dynamically loaded videos

check this discussion: HTML5 Video - File Loading Complete Event?

var videoDuration = $html5Video.attr('duration');

var updateProgressBar = function(){
 if ($html5Video.attr('readyState')) {
    var buffered = $html5Video.attr("buffered").end(0);
    var percent = 100 * buffered / videoDuration;

    //Your code here

    //If finished buffering buffering quit calling it
    if (buffered >= videoDuration) {
            clearInterval(this.watchBuffer);
    }
}
};
var watchBuffer = setInterval(updateProgressBar, 500);

How to track the percentage of the video watched using Komito Analytics?

Good question, currently Komito Analytics cannot track the percentage of the videos watched due to lot of reasons.

But you can use this simple script to track the percentage of watched HTML5 videos:
https://gist.github.com/vpodk/7306f657995985bf27de5a858c909ca4

This script also supports dynamic content, steps, and examples for analytics.js and gtag.js.

---

Related Topics