如何确保用户观看完整视频?

Background:

I am developing a web-based teaching program (using Drupal 7, if that matters) that requires users to view educational videos sequentially. I want to make sure they view each video in its entirety before gaining access to the next one. I'm pretty unfamiliar with the YouTube API but I combed through the PHP developer's guide and didn't find any information about how to do this.

I'm open to any reasonable way of accomplishing this. I was thinking that checking whether one or two random timecodes were hit, as well as whether the movie finished playing, would make it reasonably difficult to skip ahead without watching the video.

So to accomplish this I need to figure out two things:

  1. How to let the server know when the video being viewed has hit the selected timecodes, and
  2. How to let the server know when the end of the video has been reached.

If someone could point me in the right direction I'd greatly appreciate.

With the youtube api you can 'ping the server'

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

You can then get the duration of the clip. Further use of the api - timing when the user starts and stops should allow you you to work out the time said user spent viewing the clip. Compare this to the duration and if it matches ( or is close enough) trigger the reward.

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

All you need to do is ping your server when the video player has reached the end (or near the end) of the media file.

You can either write your own (javascript or flash) video player or modify one of the existing ones. This technique won't work with the HTML5 <video> tag.

Put up an authentication link at the end of the video; use the link as a way to verify that they collected a token. This will not solve the problem of check-points, and the viewer could press play and walk away, but that could happen with checkpoints.

Youtube videos can have links inserted during the course using the annotation feature in the uploader interface. Combine a coded link in an annotation during the last fifteen seconds or so with your site's user authentication to create a server-side credential.

The Flash and JavaScript Player API references include functions for getting Playback Status, in particular:

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

I was looking through the wrong API references, but eventually found it. Yay.

I've been working on something quite similar, and I've decided to go with a custom player using the iframe api https://developers.google.com/youtube/iframe_api_reference and remove the default chrome, which keeps them from skipping forward.

// 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);

The function is called when the youtube api is fully loaded and is setting up the iframe player. el is the dom object you want to replace with the video, and video_id is the id of the video you would like to load. controls: 0 is the magic bit that hides the player chrome. Then in the onStateChange function you could send off an ajax request, or change your layout or whatever it is you need to do at the end of the video.

If you use html5 and JavaScript, you can natively check to see if the entire video or certain portions have been played.

Html5's video API keeps track of all the time ranges that have been played. Take a look at the docs for the <video>.played attribute and the TimeRanges class.