Currenttime и отслеживание в видео html5

Я пытаюсь отслеживать прогресс воспроизведения видео в 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'
        });
    }


}

убедитесь, что вы используете правильный селектор при выборе видеоэлемента.

Nattamai Jawaharlal Manikandan 31.10.2018 13:02

Я обновил ответ на основе предоставленного jsfiddle

James Pooley 31.10.2018 13:25
6
2
2 390
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

РЕДАКТИРОВАТЬ

Обновил мой ответ теперь, когда у нас есть 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'
        });
    }


}

спасибо, но я не думаю, что это проблема, потому что когда я консолью document.querySelector ('video'); я вижу свое видео вот рабочий пример

Blair 31.10.2018 13:07

Я избавился от этой ошибки, теперь я получаю другую, в которой говорится, что myPlayer.on не является функцией

Blair 31.10.2018 13:25

Ознакомьтесь с новым кодом выше. Измените myPlayer.on('timeupdate', getPercentage); на myPlayer.ontimeupdate = function() { getPercentage() };

James Pooley 31.10.2018 13:26

спасибо Джеймсу Пули, это не работает, но на моей консоли я получаю процент NaN%, где я должен получить 25% 50% и т. д.

Blair 31.10.2018 13:38

Вы обновили totalLength вверху? var totalLength = myPlayer.duration % 60; Он работает у меня с приведенным выше кодом.

James Pooley 31.10.2018 13:42

это странно, я сделал totalLength и до сих пор не делаю этого. я еще раз перепроверю

Blair 31.10.2018 13:45

Он работает в Firefox, но не в Chrome, посмотрите

James Pooley 31.10.2018 13:46

Догадаться. Переместите назначение totalLength в функцию. Теперь работает в Chrome. Обновил мой код выше.

James Pooley 31.10.2018 13:48

Рад слышать. Если все получится, не забудьте отметить ответ как решенный. Спасибо!

James Pooley 31.10.2018 13:55

еще один вопрос Джеймс, как мы также можем проверить, правильно ли загружено видео и запустить событие

Blair 31.10.2018 15:54

Есть события canplay и canplaythrough, которые вы можете прослушать. developer.mozilla.org/en-US/docs/Web/Events/canplay есть ссылка на ссылку canplaythrough. Вы можете увидеть пример здесь stackoverflow.com/a/43599384/9436750

James Pooley 31.10.2018 16:02

Если вы используете тег video, попробуйте следующий код:

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

спасибо, приятель - я выполнил функцию, но теперь у меня myPlayer.currentTime не функция

Blair 31.10.2018 13:27

Посмотрите мой обновленный ответ. Вы вызываете currentTime вот так. Убрать скобки percentageCompleted = (myPlayer.currentTime / totalLength) * 100;

James Pooley 31.10.2018 13:34

Другие вопросы по теме