如何确保用户观看整个视频


How can I ensure users watch whole videos?

>背景:

我正在开发一个基于Web的教学程序(使用Drupal 7,如果这很重要的话(,它要求用户按顺序观看教育视频。我想确保他们在访问下一个视频之前完整地观看每个视频。我对YouTube API很不熟悉,但我梳理了PHP开发人员指南,没有找到有关如何执行此操作的任何信息。

我愿意接受任何合理的方法来实现这一目标。我在想,检查是否点击了一个或两个随机时间码,以及电影是否完成播放,将使在不观看视频的情况下跳过相当困难。

因此,要做到这一点,我需要弄清楚两件事:

  1. 如何让服务器知道正在观看的视频何时达到选定的时间码,以及
  2. 如何让服务器知道何时到达视频的结尾。

如果有人能指出我正确的方向,我将不胜感激。

您需要做的就是在视频播放器到达媒体文件的末尾(或接近末尾(时 ping 服务器。

您可以编写自己的(javascript或flash(视频播放器,也可以修改现有的视频播放器之一。此技术不适用于 HTML5 <video>标记。

使用 youtube api,您可以"ping 服务器">

  function onPlayerStateChange(evt) {       
       if (evt.data == 0){
       alert (player.getDuration())
     }
 }

然后,您可以获取剪辑的持续时间。进一步使用 API - 用户启动和停止的时间应该允许您计算出所述用户观看剪辑所花费的时间。将其与持续时间进行比较,如果匹配(或足够接近(,则触发奖励。

https://developers.google.com/youtube/js_api_reference

Flash 和 JavaScript Player API 参考包括用于获取播放状态的函数,特别是:

player.getCurrentTime():Number
Returns the elapsed time in seconds since the video started playing.

我正在查看错误的 API 参考,但最终找到了它。耶。

我一直

在做一些非常相似的事情,我决定使用 iframe API https://developers.google.com/youtube/iframe_api_reference 的自定义播放器并删除默认的镶边,这可以防止它们向前跳跃。

// api has been loaded
function onYouTubeIframeAPIReady(){
    var player = new YT.Player(el, {
        videoId: video_id,
        width: 700,
        playerVars: {
            controls: 0,
            modestbranding: 1,
            rel: 0              
        }, 
        events: {
            onStateChange: function(d){
                switch(d.data){
                    case YT.PlayerState.ENDED:
                        // send notification of video ended
                }
            }
        }
    });
}
    // async load of api
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

当 youtube api 完全加载并设置 iframe 播放器时,将调用该函数。 el 是要替换为视频的 dom 对象,video_id是要加载的视频的 id。 controls: 0是隐藏播放器铬的魔术位。然后在onStateChange函数中,您可以发送ajax请求,或者更改布局或在视频末尾需要执行的任何操作。

如果您使用 html5 和 JavaScript,则可以在本地检查是否已播放整个视频或某些部分。

Html5的视频API跟踪已播放的所有时间范围。查看 <video>.played 属性和TimeRanges类的文档。

在视频末尾放置一个身份验证链接;使用该链接作为验证他们是否收集了令牌的一种方式。这不会解决检查点的问题,观众可以按播放并走开,但检查点可能会发生这种情况。

Youtube 视频可以使用上传器界面中的注释功能在课程期间插入链接。将过去 15 秒左右注释中的编码链接与站点的用户身份验证相结合,以创建服务器端凭据。