javascript 跟踪用户观看视频的时长

Track how long a user has watched a video

提问by Phillip Senn

I teach an online course, and I need to make sure my students actually watch a certain video. Now, I understand that everything can be defeated, but what I'm looking is the 80/20 rule were I can make a few tweaks to start on the journey of accountability for my students.

我教在线课程，我需要确保我的学生确实观看了某个视频。现在，我明白一切都可能被打败，但我所看到的是 80/20 规则，我可以做一些调整来开始对我的学生负责的旅程。

Q1: Is there a way via JavaScript to fire an event if the current window loses focus?

Q1：如果当前窗口失去焦点，是否可以通过 JavaScript 触发事件？

Q2: Is there a way to fire an event when the video finishes playing?

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

Q3: Is there a way to make sure the video was played all the way through instead of the student clicking on the end of the timeline?

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

I feel compelled to say (again), please don't answer this questions with something like "you're wasting your time, the students will defeat anything that you do".

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

回答by udnisap

What is the player you are using. If you are using open source video players like JWPlayer or Flow Player. You can track events. I personally prefer flow player and you can use google analytics to track the duration and any other task you want on the page.

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

as you have an authentication mechanism on the page you can get the username of the student (or an identifier). Push events to google analytic with this as a label and you can track each and everything the student do including the links he clicked, duration what played, when he played ...

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

• you can setup google analytic http://www.google.lk/analytics/its Free :)
• Event tracking guide https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
• Flow player events http://flash.flowplayer.org/documentation/events/player.html

• 您可以设置 google analytic http://www.google.lk/analytics/其免费 :)
• 事件跟踪指南https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
• 流播放器事件http://flash.flowplayer.org/documentation/events/player.html

example setup

示例设置

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

To track

追踪

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

this is part of the live code i took from http://vsp.ideawide.com/in which I track some of those events.

这是我从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 ]);
    }
}

As a final note with analytic properly setup with a proper player you can improve your 80/20 to 99/1.

最后，通过适当的球员正确设置分析，您可以将 80/20 提高到 99/1。

回答by Dcullen

This is assuming HTML5 video using the video tag.

这是假设使用 video 标签的 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
};

You can call the video tag without the controls attribute to disable the seek bar. You can then trigger play on click using the following:

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

player.play();

回答by Dagg Nabbit

Problems with the initial approach

初始方法的问题

I teach an online course, and I need to make sure my students actually watch a certain video.

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

Here's the issue. Your requirement is that students actually watcha video, but the best we can do programmatically is make sure that a video was sent by a server and received by a client. Aside from using extreme measures like facial recognition and audio loopback, you can't be sure that anyone is watching it, or that the intended viewer is watching it, or that anyone is listening. The student can simply start the video and walk away.

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

That might sound like a technicality, but really it's an important distinction. What you've got is the equivalent of a system designed to make sure someone reads a book, but all the system can do is check whether the book is open or closed at any given time.

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

Security

安全

Now, I understand that everything can be defeated, but what I'm looking is the 80/20 rule were I can make a few tweaks to start on the journey of accountability for my students.

现在，我明白一切都可能被打败，但我所看到的是 80/20 规则，我可以做一些调整来开始对我的学生负责的旅程。

Everything can be defeated with enough effort, but the proposed solution can be defeated almost effortlessly. If it's easier for your average user to cheat the system than to use it legitimately, it's probably not worth implementing.

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

An alternative approach

另一种方法

Instead of focusing on whether the browser is running the video, consider shifting focus back to the user. By requiring some specificuser interaction while the video is being displayed, you'll be able to have a much higher level of confidence in the system.

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

The simplest way to do this would be to split the video up into several small parts, displaying a link to the next video after each one plays.

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

You could then write a small script to show the time between requests for that series of videos (per user), and flag any requests that were too far apart or too close together given the length of the segments (or compared to the average if that data isn't available for some reason). You can pull this data right from the server logs if you have access to them, or you can record it yourself.

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

Comprehension

理解

If you want to go the extra step and test comprehension (or retention), this alternative approach would be simple to extend. Instead of having one link to the next video, have several links to it, in the form of answers to a question. If you're worried about students sharing the answers, don't tell them whether they got it right, just send them to the next video. You can look at this data later and decide whether you want to use it and how you want to curve it.

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

回答by enhzflep

1. handle window.onblur, as mentioned
2. you'll get the 'ended' event fire when video is done
3. you can call mediaElement.played.end() to get # of secs played in browser.

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

See hereand here

看这里和这里

回答by Mikey G

Maybe do a setTimeout for the length of the video and fire an event once the length of the video has passed.

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

Try this to detect when the window loses focus:

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

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

If you're really worried about the accuracy of setTimeout, maybe try this:

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

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

function CheckTime() {

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

}

回答by PbxMan

Q1: look for event onblur

Q1：寻找事件onblur

Q2: that would depend on your player. There are flash video players you can call a javascript function with ExternalInterface.call("myFunctionName()"); from AS3

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

Q3: I would try to find a flash player that has all that options but my solution is more as3 to javascript.

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

I hope this may help you!

我希望这可以帮助你！