Youtube iframe javascript，跟踪观看视频的百分比？答案

【问题标题】：Youtube iframe javascript, track percentage of video watched?Youtube iframe javascript，跟踪观看视频的百分比？
【发布时间】：2015-04-29 08:50:05
【问题描述】：

我正在尝试准确计算用户观看视频所花费的时间。他们观看视频的时间不应包括快进或暂停视频。我现在拥有的代码每次都给我不同的百分比（我使用的是间隔）。我不知道还有什么办法解决这个问题？

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:00，然后回到 0:30 直到结束怎么办？您是把它算作额外的，还是只想算一分钟？
是的，我只想数一分钟。所以用户观看视频的总时间，然后我猜想以百分比计算它

标签： javascript youtube

【解决方案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 Demo

【讨论】：

谢谢！很有帮助。我还是不太明白我做错了什么，你能解释一下我的问题吗？
@dantheman 是的，很抱歉。好吧，由于您发布的代码中没有声明一些变量，以及一些乍一看似乎没有用的东西，所以我没有看那么多。我确定的一件事是您不能直接设置arr.length，您需要将值推送到它，直到获得所需的长度。编辑您可以通过 timeSpent = new Array( parseInt(player.getDuration()) ); 设置数组长度，而不是推送所有值。
啊，我明白了，非常感谢你的所有帮助，我会给你的答案一个赞成票，但显然我没有足够的“声誉”来支持 XD
如果我改变了搜索（进度）栏，它不会改变这是坏的:)
@SaiTejaReddy 这是期望的行为。当您回到已经观看过的视频部分时，百分比不会改变（我们不想计算两次）。如果我们去到尚未观看的部分，它确实会增加百分比。

【解决方案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 秒。浏览器本身会对此进行跟踪，因此您无需设置间隔、监听事件等。

【讨论】：

是否可以修改此代码以与 YouTube 嵌入一起使用？我看不到如何/在哪里获取我将作为参数传递给您的函数的 video 对象。
这种方法的问题是，如果我在之前播放的片段中重播视频，例如，如果我在第 4 秒重新播放片段 [0..8] 中的视频，播放将不会创建一个新的段，它将继续计入同一段。例如，如果我在 4 点重新开始，并继续播放到 13 点，则段 [0..8] 将变为 [0..13]。这是有道理的，因为played 属性告诉我们在媒体中播放了哪些时间范围。

【解决方案3】：

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

您也可以使用player.getDuration() api 获取视频总时长并计算进度百分比

这里是第一个答案http://jsfiddle.net/ndbseftp/分享的示例的替换

【讨论】：