Question

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

我收到错误

未捕获的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'
        });
    }


}

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


}

Answer 2

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

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

HTML5视频中的currentTime和跟踪

2 个答案: