Youtube iframe javascript, процент отслеживаемых видеороликов?

Я пытаюсь получить точный расчет того, сколько времени пользователь потратил на просмотр видео. Время, затраченное на просмотр, не должно включать пропуски вперед или когда видео приостановлено. Код, который у меня есть, дает мне разные проценты каждый раз (я использую интервал). Я не знаю, как это сделать?

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      clicked_video = true; 
      arr.length = (player.getDuration()-1).toFixed(0);
      done = true;

    }if(event.data === YT.PlayerState.PLAYING){

       id = setInterval(check, 1000);

   }if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.BUFFERING){

        clearInterval(id);
        var percent = 0;
        for(var i=0;i<arr.length;i++){
          if(arr[i] == "x"){
          percent++;
          console.log(percent);
          }

       }

    percent = (percent / arr.length) * 100;
    alert(percent + "%");
    }
}
function check(){

      arr[Math.floor(player.getCurrentTime())] = "x";
}

ОТВЕТЫ

Ответ 1

Вот демонстрация, я думаю, что переменные и функции имеют имена, достаточно явные, чтобы все понимать, но если у вас есть какие-либо вопросы или проблемы, продолжайте и спрашивайте.

Одна вещь, которую я должен упомянуть, это то, что это будет неточно. Если ваш интервал выполняется один раз в секунду, а пользователь пропускает часть в середине секунды, это может не считаться. Чтобы получить более точный процент, вы можете чаще выполнять свой интервал (100 мс, я получил 97% при просмотре видео взад и вперед), но будьте осторожны, чтобы не использовать слишком много ресурсов.

var player, timer, timeSpent = [], display = document.getElementById('display');

function onYouTubeIframeAPIReady() {
    player = new YT.Player( 'player', {
        events: { 'onStateChange': onPlayerStateChange }
    });
}

function onPlayerStateChange(event) {
    if(event.data === 1) { // Started playing
        if(!timeSpent.length){
            timeSpent = new Array( parseInt(player.getDuration()) );
        }
        timer = setInterval(record,100);
    } else {
        clearInterval(timer);
    }
}

function record(){
    timeSpent[ parseInt(player.getCurrentTime()) ] = true;
    showPercentage();
}

function showPercentage(){
    var percent = 0;
    for(var i=0, l=timeSpent.length; i<l; i++){
        if(timeSpent[i]) percent++;
    }
    percent = Math.round(percent / timeSpent.length * 100);
    display.innerHTML = percent + "%";
}

Демо-версия JS Fiddle

Ответ 2

Здесь вы можете получить точную точность изображения, какое количество видео просматривалось пользователем:

Рецепт

  • Получить ссылку на видеоплеер HTML5
  • Захватите played объект с видео объекта, который возвращает TimeRanges объект (см https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges)
  • Итерации по played объекту и добавление всех диапазонов

пример

/**
 *
 * @param {HTMLVideoElement} video
 * @returns {{total: number, percent: number}}
 */
function getPlayedTime(video) {
    var totalPlayed = 0;
    var played = video.played;

    for (var i = 0; i < played.length; i++) {
        totalPlayed += played.end(i) - played.start(i);
    }

    return {
        total: totalPlayed,
        percent: totalPlayed / video.duration * 100
    };
}

Вызывая вышеупомянутую вспомогательную функцию и передавая ее вашему видеообъекту, вы получите объект с двумя свойствами: общая длина (в секундах), которую пользователь просматривал, и процентная доля продолжительности видео, которую это представляет.

Замечательная вещь об этом подходе заключается в том, что она на 100% точна. Если пользователь просматривает первые 5 секунд видео снова и снова, он все равно будет регистрировать, что наблюдалось только 5 секунд. Сам браузер отслеживает это, поэтому вам не нужно устанавливать интервалы, слушать события и т.д.

Ответ 3

Youtube iframe player api обеспечивает функцию, чтобы включить текущее время воспроизведения видеопроигрывателя.getCurrentTime player.getCurrentTime():Number. Это можно использовать для отслеживания того, сколько пользователь просматривал видео.