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

Question

我正在尝试跟踪 HTML 视频中的视频播放进度。我需要跟踪 0%、25%、50%、75% 和 100%。我不确定我做错了什么，无法让 console.logs 正常工作。 jsFiddle

我得到错误

Uncaught TypeError: Cannot read property 'on' of null

请提供任何帮助/建议

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


}

Answer 1

编辑

现在我们有了 jsfiddle，更新了我的答案。请尝试此代码。您的 totalLength 为 0，不代表实际的视频时长。 user3767069 关于 ontimeupdate 回调也是正确的。此外，您将 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'
        });
    }


}