Javascript HTML5视频中的当前时间和跟踪

我试图跟踪HTML视频中的视频播放进度。我需要跟踪0,25,50,75和100%。我不确定我做错了什么，无法使控制台工作

我犯了一个错误

未捕获的TypeError:无法读取null的属性“on”

有什么帮助/建议吗

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'
        });
    }


}

编辑

现在我们有了一个JSFIDLE，更新了我的答案。请尝试此代码。您的总长度为0，不代表实际的视频持续时间。关于ontimeupdate回调，user3767069也是正确的。此外，您可以将currenttime作为属性调用，而不是作为方法调用

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'
        });
    }


}

---

如果“视频”是您正在使用的标签，请尝试以下代码：

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()};

---

确保在选择视频元素时使用了正确的选择器。我已经根据提供的JSFIDDLE更新了答案，谢谢，但我认为这不是问题所在，因为当我控制台文档时。querySelector（“视频”）；我可以在这里看到我的视频是Fiddle我消除了这个错误，现在我看到另一个说myPlayer.on不是函数请查看上面的新代码。更改

myPlayer.on（'timeupdate'，getPercentage）

to

myPlayer.ontimeupdate=function（）{getPercentage（）}谢谢James Pooley，这不起作用，但在我的控制台上，我得到了百分比NaN%，在那里我应该得到25%50%的etcDid，你更新顶部的总长度<代码>var totalLength=myPlayer.duration%60上面的代码对我有效。谢谢，伙计-我做了一个可爱的函数，但现在我得到了我的播放器。currentTime不是一个函数查看我的更新答案。你这样称呼当前时间。删除括号
percentageCompleted=（myPlayer.currentTime/totalLength）*100