I am trying to track video play progress in an HTML video. I need tracking for 0,25,50,75 and 100 percent. I am not sure what I am doing wrong, cant get the console.logs working. jsFiddle

I get error

Uncaught TypeError: Cannot read property 'on' of null

any help / advice please

var myPlayer = document.querySelector('video');
var percentageCompleted = 0;
var totalLength = 0;
var videoStarted, videoTwentyFive, videoFifty, videoSeventyFive, videoComplete = false;

myPlayer.on('timeupdate', getPercentage);

function getPercentage() {

    percentageCompleted = (myPlayer.currentTime() / totalLength) * 100;
    //console.log('percentage', (percentageCompleted+'%'));

    // is 0
    if ((!videoStarted) && (percentageCompleted > 0)) {
        console.log('VIDEO_STARTED');
        videoStarted = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playStart'
        });
    }
    // is 25
    if ((!videoTwentyFive) && (percentageCompleted > 25)) {
        console.log('VIDEO_25');
        videoTwentyFive = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playTwentyFive'
        });
    }
    // is 50
    if ((!videoFifty) && (percentageCompleted > 50)) {
        console.log('VIDEO_50');
        videoFifty = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playFifty'
        });
    }
    // is 75
    if ((!videoSeventyFive) && (percentageCompleted > 75)) {
        console.log('VIDEO_75');
        videoSeventyFive = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playSeventyFive'
        });
    }
    // is 100
    if ((!videoComplete) && (percentageCompleted > 99)) {
        console.log('VIDEO_100');
        videoComplete = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playComplete'
        });
    }


}

I am trying to track video play progress in an HTML video. I need tracking for 0,25,50,75 and 100 percent. I am not sure what I am doing wrong, cant get the console.logs working. jsFiddle

I get error

Uncaught TypeError: Cannot read property 'on' of null

any help / advice please

var myPlayer = document.querySelector('video');
var percentageCompleted = 0;
var totalLength = 0;
var videoStarted, videoTwentyFive, videoFifty, videoSeventyFive, videoComplete = false;

myPlayer.on('timeupdate', getPercentage);

function getPercentage() {

    percentageCompleted = (myPlayer.currentTime() / totalLength) * 100;
    //console.log('percentage', (percentageCompleted+'%'));

    // is 0
    if ((!videoStarted) && (percentageCompleted > 0)) {
        console.log('VIDEO_STARTED');
        videoStarted = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playStart'
        });
    }
    // is 25
    if ((!videoTwentyFive) && (percentageCompleted > 25)) {
        console.log('VIDEO_25');
        videoTwentyFive = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playTwentyFive'
        });
    }
    // is 50
    if ((!videoFifty) && (percentageCompleted > 50)) {
        console.log('VIDEO_50');
        videoFifty = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playFifty'
        });
    }
    // is 75
    if ((!videoSeventyFive) && (percentageCompleted > 75)) {
        console.log('VIDEO_75');
        videoSeventyFive = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playSeventyFive'
        });
    }
    // is 100
    if ((!videoComplete) && (percentageCompleted > 99)) {
        console.log('VIDEO_100');
        videoComplete = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playComplete'
        });
    }


}

• javascript
• html
• video

• make sure that you are using right selector while selecting video element. – Nattamai Jawaharlal Manikandan Commented Oct 31, 2018 at 12:02
• I have updated by answer based on the provided jsfiddle – James Pooley Commented Oct 31, 2018 at 12:25

3 Answers 3

EDIT

Updated my answer now that we have a jsfiddle. Please try this code out. Your totalLength was 0, and not representing the actual video duration. Also user3767069 was correct regarding the ontimeupdate callback. Also, you call currenttime as a property, not as a method.

var myPlayer = document.querySelector('#video');
var percentageCompleted = 0;
var totalLength;
var videoStarted, videoTwentyFive, videoFifty, videoSeventyFive, videoComplete = false;

myPlayer.ontimeupdate = function() {
    getPercentage()
};

function getPercentage() {
    totalLength = myPlayer.duration % 60;   
    percentageCompleted = (myPlayer.currentTime / totalLength) * 100;
    console.log(totalLength);
    console.log('percentage', (percentageCompleted+'%'));

    // is 0
    if ((!videoStarted) && (percentageCompleted > 0)) {
        console.log('VIDEO_STARTED');
        videoStarted = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playStart'
        });
    }
    // is 25
    if ((!videoTwentyFive) && (percentageCompleted > 25)) {
        console.log('VIDEO_25');
        videoTwentyFive = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playTwentyFive'
        });
    }
    // is 50
    if ((!videoFifty) && (percentageCompleted > 50)) {
        console.log('VIDEO_50');
        videoFifty = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playFifty'
        });
    }
    // is 75
    if ((!videoSeventyFive) && (percentageCompleted > 75)) {
        console.log('VIDEO_75');
        videoSeventyFive = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playSeventyFive'
        });
    }
    // is 100
    if ((!videoComplete) && (percentageCompleted > 99)) {
        console.log('VIDEO_100');
        videoComplete = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playComplete'
        });
    }


}

If the 'video' is tag you are using then try the below code:

var myPlayer = document.querySelector('video');

// Assign an ontimeupdate event to the video element, and execute a function 
// if the current playback position has changed

myPlayer.ontimeupdate = function() {getPercentage()};

Both the Fiddle and the correct answer forget to get the reference to #video

myPlayer = document.querySelector('#video');

AFTER the page is loaded.

Here was my quick fix (taking the code from the selected answer)

window.addEventListener("load", init);

var percentageCompleted = 0;
var totalLength;
var videoStarted, videoTwentyFive, videoFifty, videoSeventyFive, videoComplete = false;
var myPlayer;

function init(){
    myPlayer = document.querySelector('#video');    

    myPlayer.ontimeupdate = function () {
        getPercentage()
    };
}

function getPercentage() {
    totalLength = myPlayer.duration % 60;
    percentageCompleted = (myPlayer.currentTime / totalLength) * 100;
    console.log(totalLength);
    console.log('percentage', (percentageCompleted + '%'));

    // is 0
    if ((!videoStarted) && (percentageCompleted > 0)) {
        console.log('VIDEO_STARTED');
        videoStarted = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playStart'
        });
    }
    // is 25
    if ((!videoTwentyFive) && (percentageCompleted > 25)) {
        console.log('VIDEO_25');
        videoTwentyFive = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playTwentyFive'
        });
    }
    // is 50
    if ((!videoFifty) && (percentageCompleted > 50)) {
        console.log('VIDEO_50');
        videoFifty = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playFifty'
        });
    }
    // is 75
    if ((!videoSeventyFive) && (percentageCompleted > 75)) {
        console.log('VIDEO_75');
        videoSeventyFive = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playSeventyFive'
        });
    }
    // is 100
    if ((!videoComplete) && (percentageCompleted > 99)) {
        console.log('VIDEO_100');
        videoComplete = true;

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'playComplete'
        });
    }


}