跟踪用户观看视频的时长答案

【问题标题】：Track how long a user has watched a video跟踪用户观看视频的时长
【发布时间】：2012-10-05 19:54:41
【问题描述】：

我教授一门在线课程，我需要确保我的学生确实观看了某个视频。现在，我明白一切都可能被打败，但我正在寻找的是 80/20 规则，即我可以做一些调整，开始为我的学生承担责任。

Q1：如果当前窗口失去焦点，有没有办法通过 JavaScript 触发事件？

Q2：有没有办法在视频播放完毕时触发事件？

Q3：有没有办法确保视频一直播放，而不是学生点击时间线的末尾？

我不得不（再次）说，请不要用“你在浪费时间，学生会打败你所做的任何事情”之类的方式回答这个问题。

【问题讨论】：

您的第一个问题的答案在 Stack Overflow 上有详细记录：stackoverflow.com/questions/1060008/… 但是，考虑到有些人（例如我自己）在计算机上做笔记，并且可以有多个窗口在一次。我会把你的视频放在我的第二台显示器上，并在我的另一台显示器上做笔记。如果您查看焦点状态，您可能会对实际发生的事情有一个歪曲的看法。
您使用的是什么类型的视频播放器？ HTML5 视频标签？闪视频？您可以监控一些视频事件，但它们会根据正在播放的视频类型而有所不同。
我想确保他们观看（并理解）视频的常用方法是对他们进行内容测验。我知道这听起来像是我在指出显而易见的事情，但这似乎是一个比试图让 UA 照顾他们更好的解决方案。是否有某种原因这种方法不适用于视频中的材料？
+1 GGG - 我就是这么想的......
GGG：视频对所有学生都一样，因此学生可以复制/粘贴答案。

标签： javascript html5-video

【解决方案1】：

您使用的是什么播放器。如果您使用的是 JWPlayer 或 Flow Player 等开源视频播放器。您可以跟踪事件。我个人更喜欢流播放器，您可以使用谷歌分析来跟踪页面上您想要的持续时间和任何其他任务。

由于您在页面上有身份验证机制，您可以获得学生的用户名（或标识符）。将此事件作为标签推送到谷歌分析，您可以跟踪学生所做的每件事，包括他点击的链接、播放的持续时间、播放时间...

你可以设置谷歌分析http://www.google.lk/analytics/它的免费:)
事件追踪指南https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
流播放器事件http://flash.flowplayer.org/documentation/events/player.html

示例设置

        <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', '#########']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

      })();

    </script>

跟踪

_gaq.push(['_trackEvent', 'Videos', 'Play', 'Gone With the Wind']);

这是我从http://vsp.ideawide.com/ 获取的实时代码的一部分，我在其中跟踪其中一些事件。

var events = {
    clip : {
        onStart: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Play", defaults.source]);
        },


        onPause: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Pause", defaults.source, parseInt(this.getTime())]);
        },

        onResume: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Resume", defaults.source, parseInt(this.getTime())]);
        },

        onSeek: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Seek", defaults.source ]);
        },

        onStop: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Stop", defaults.source, parseInt(this.getTime())]);
        },
         onFinish: function(clip) {
            _gaq.push(['_trackEvent',"Videos", "Finish", defaults.source]);
        }
    },
    onFullscreen: function() {
        _gaq.push(['_trackEvent',"Videos", "Full Screen", defaults.source]);
    },
    onError: function(errorCode , errorMessage) {
        _gaq.push(['_trackEvent',"Videos", "Error", defaults.source, errorCode ]);
    }
}

作为最后一点，使用合适的播放器进行正确的分析设置，您可以将 80/20 提高到 99/1。

【讨论】：

【解决方案2】：

这是假设 HTML5 视频使用 video 标签。

player = document.getElementById("player");

//Get current percent complete. You may want to check for 95%+ rather than 100%.
setInterval(function(){
    percentComplete = player.currentTime/player.duration;
}, 300); 

window.onblur = function() {
//this will be called when the window loses focus
};

您可以调用没有控件属性的视频标签来禁用搜索栏。然后，您可以使用以下方法触发点击播放：

player.play();

【讨论】：

我想我听说过一个 JavaScript 事件，该事件仅在用户获得屏幕焦点时才会触发。这现在特别用于移动设备，这样就不会耗尽电池。这是一个以 p 开头的长单词，据我所知。
已经提出（并在现代浏览器上实现）称为页面可见性 API 的东西。这是你想的吗？ davidwalsh.name/page-visibility

【解决方案3】：

初始方法的问题

我教授一门在线课程，我需要确保我的学生确实观看了某个视频。

这就是问题所在。您的要求是学生实际观看视频，但我们能以编程方式做的最好的事情是确保视频由服务器发送并由客户端接收。除了使用面部识别和音频环回等极端措施外，您无法确定是否有人在观看，或者目标观众正在观看，或者有人在听。学生可以简单地开始播放视频然后走开。

这听起来像是一个技术问题，但实际上这是一个重要的区别。你所拥有的相当于一个旨在确保有人阅读一本书的系统，但系统所能做的就是检查该书在任何给定时间是打开还是关闭。

安全

现在，我明白一切都可能被打败，但我正在寻找的是 80/20 规则，即我可以做一些调整，开始为我的学生承担责任。

只要付出足够的努力，一切都可以被打败，但建议的解决方案几乎可以毫不费力地被打败。如果你的普通用户欺骗系统比合法使用它更容易，那么它可能不值得实施。

另一种方法

与其关注浏览器是否正在播放视频，不如考虑将关注点转移回用户身上。通过在显示视频时要求一些特定的用户交互，您将能够对系统有更高的信心。

执行此操作的最简单方法是将视频分成几个小部分，在每个播放后显示一个指向下一个视频的链接。

然后您可以编写一个小脚本来显示对该系列视频的请求之间的时间（每个用户），并根据片段的长度（或与如果由于某种原因该数据不可用，则取平均值）。如果您有权访问这些数据，则可以直接从服务器日志中提取这些数据，也可以自己记录。

理解

如果您想采取额外的步骤并测试理解（或保留），这种替代方法很容易扩展。与其有一个指向下一个视频的链接，不如有几个指向它的链接，以问题答案的形式。如果您担心学生分享答案，请不要告诉他们是否正确，只需将他们发送到下一个视频即可。您可以稍后查看这些数据并决定是否要使用它以及如何弯曲它。

【讨论】：

这不是您想要的答案，但希望它能激发您的灵感 ;)
在显示视频时需要一些特定的用户交互。有趣的想法。
几个链接，以问题答案的形式。有趣的想法。
就像一个验证码 à la “你还在吗，然后选择屏幕上的所有西红柿” :) 好主意，说真的。当然，注意力验证码最好与视频内容相关。 --- 我刚刚得到的另一个想法：在视频中跟踪鼠标的移动，作为学生是否还在那里的一个指标。

【解决方案4】：

Q1：寻找onblur事件

Q2：这取决于你的播放器。有 Flash 视频播放器，您可以使用 ExternalInterface.call("myFunctionName()"); 调用 javascript 函数；来自 AS3

Q3：我会尝试找到一个具有所有选项的 Flash 播放器，但我的解决方案更像是 as3 到 javascript。

希望对你有帮助！

【讨论】：

【解决方案5】：

也许为视频的长度设置一个 setTimeout 并在视频的长度过去后触发一个事件。

试试这个来检测窗口何时失去焦点：

window.onblur = function() {
   //do something here...
};

如果你真的担心 setTimeout 的准确性，不妨试试这个：

var start = (new Date).getTime();

function CheckTime() {

   var diff = (new Date).getTime() - start;
   if (diff >= videoLength) {
       FireVideoDoneEvent();
   }
   else {
       setTimeout(function() {
           CheckTime();
       }, 1000);
   }

}

【讨论】：

这...不是一个好的答案。你不知道视频真的有多长。另外，超时并不是那么准确。如果检查播放状态是唯一的方法，最好每隔几秒设置一次间隔并检查播放状态和位置。
您为什么不知道视频的实际长度？我想我不知道 setTimeout 在很长一段时间内有多不准确。本文讲述如何创建更准确的计时器sitepoint.com/creating-accurate-timers-in-javascript

【解决方案6】：

如前所述，处理 window.onblur
视频播放完毕后会触发“结束”事件
您可以调用 mediaElement.played.end() 来获取在浏览器中播放的秒数。

见here和here

【讨论】：