Question

我正在尝试准确计算用户观看视频的时间。他们观看的时间不应包括向前跳过或视频暂停时。我现在的代码每次给我一个不同的百分比（我使用间隔）。我不知道怎么回事？

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";
}

Answer 1

这是一个演示，我认为变量和函数的名称足以明白所有内容，但如果您有任何疑问或问题，请继续问。

我必须提到的一件事是它确实不是。如果您的间隔每秒执行一次并且用户在中间跳过一部分，则可能不会计算该间隔。为了获得更准确的百分比，你可以更频繁地执行你的间隔（这里100ms，我来回观看视频时得到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 Demo

Answer 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
    };
}

通过调用上面的帮助函数并将其传递给您的视频对象，您将获得一个具有两个属性的对象：用户实际观看的总长度（以秒为单位）以及视频的百分比＆＃39 ;这代表的持续时间。

这种方法很酷的是它100％准确。如果用户一遍又一遍地观看视频的前5秒，它仍会注册只有5秒钟被观看。浏览器本身会跟踪这一点，因此您不需要设置间隔，监听事件等。

Answer 3

Youtube iframe播放器api提供了一个功能来转换视频player.getCurrentTime():Number的当前播放时间。这可用于跟踪用户观看视频的数量。

Youtube iframe javascript，跟踪视频的百分比？

3 个答案:

JS Fiddle Demo

食谱

实施例