跟踪用户观看视频的时间

时间:2012-10-05 19:54:42

标签: javascript html5-video

我教授在线课程,我需要确保我的学生真正观看某个视频。现在,我明白一切都可以被打败,但我正在寻找的是80/20规则,我可以做一些调整,开始我的学生责任之旅。

Q1:如果当前窗口失去焦点,是否有通过JavaScript触发事件的方法?

Q2:视频播放完毕后有没有办法发布活动?

问题3:有没有办法确保视频一直播放,而不是学生点击时间轴的末尾?

我觉得有必要(再次)说,请不要回答这个问题,比如“你在浪费时间,学生会打败你所做的任何事情”。

6 个答案:

答案 0 :(得分:8)

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

由于您在页面上拥有身份验证机制,因此您可以获取学生的用户名(或标识符)。将事件推送到谷歌分析,并将其作为标签,您可以跟踪学生所做的每一件事,包括他点击的链接,播放时间,播放时间......

示例设置

        <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。

答案 1 :(得分:3)

这是假设使用视频标记的HTML5视频。

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

您可以调用不带controls属性的视频标记来禁用搜索栏。然后,您可以使用以下命令触发点击播放:

player.play();

答案 2 :(得分:3)

初始方法存在的问题

  

我教授在线课程,我需要确保我的学生真正观看某个视频。

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

这可能听起来像技术性,但实际上它是一个重要的区别。你得到的是相当于一个旨在确保某人读书的系统,但系统所能做的就是检查书籍在任何特定时间是开放还是关闭。

安全

  

现在,我明白一切都可以被打败,但我正在寻找的是80/20规则,我可以在学生问责制的过程中做一些调整。

所有事情都可以通过足够的努力来打败,但所提出的解决方案几乎可以毫不费力地被击败。如果普通用户欺骗系统比合法使用系统更容易,那么可能不值得实施。

另一种方法

不要关注浏览器是否正在运行视频,而应考虑将焦点转移回用户。通过在显示视频时要求某些特定的用户交互,您将能够对系统有更高的信心。

最简单的方法是将视频分成几个小部分,在每个视频播放后显示下一个视频的链接。

然后,您可以编写一个小脚本来显示该系列视频(每个用户)的请求之间的时间,并根据段的长度标记任何距离太远或太近的请求(或者与平均值,如果由于某种原因该数据不可用)。如果您有权访问这些数据,您可以直接从服务器日志中提取这些数据,或者您可以自己录制数据。

<强>理解

如果你想进行额外的步骤和测试理解(或保留),这种替代方法很容易扩展。而不是一个链接到下一个视频,有一个链接到它,以问题的答案的形式。如果你担心学生分享答案,不要告诉他们是否正确,只需将他们发送到下一个视频。您可以稍后查看此数据,并决定是否要使用它以及如何使其曲线化。

答案 3 :(得分:1)

可能会对视频的长度执行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);
   }

}

答案 4 :(得分:1)

Q1:寻找事件onblur

Q2:这取决于你的播放器。有一些flash视频播放器你可以使用ExternalInterface.call调用一个javascript函数(“myFunctionName()”);来自AS3

问题3:我会尝试找到一个具有所有选项的Flash播放器,但我的解决方案更像是j3。

我希望这可以帮到你!

答案 5 :(得分:1)

  1. 处理window.onblur,如上所述
  2. 视频完成后,您将收到'已结束'事件
  3. 您可以调用mediaElement.played.end()来获取在浏览器中播放的秒数。
  4. 请参阅herehere