How can I ensure users watch the entire video?

Question

Background:

I am developing a web-based curriculum (with Drupal 7 in mind if that matters) that requires users to watch educational videos sequentially. I want to make sure that they watch each video in full before accessing the next. I am pretty unfamiliar with the YouTube API, but I read the PHP development guide and did not find any information on how to do this.

I am open to any reasonable way to accomplish this. I thought that checking if one or two random timecodes had been deleted, and also whether the movie had finished playing, would make sense to slip forward without watching the video.

To accomplish this, I need to figure out two things:

• How to tell the server when the video being watched falls into the selected time codes, and
• How to tell the server when the end of the video is reached.

If someone can point me in the right direction, I would really appreciate it.

Answer 1

Using youtube api you can "ping server"

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

Then you can get the duration of the clip. Further use of the api time, when the user starts and stops, should allow you to determine the time that the user spent on watching the clip. Compare this to duration and, if it matches (or is close enough), initiates a reward.

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

Answer 2

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

You can either write your own (javascript or flash) video player, or change one of the existing ones. This method will not work with the HTML5 <video> .

Answer 3

Links to the Flash API and JavaScript Player include functions for obtaining playback status , in particular:

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

I was looking for the wrong API links, but ended up finding it. Yay

Answer 4

If you use html5 and JavaScript, you can initially check to see if all the videos or certain parts have been played.

The Html5 Video API tracks all time ranges that have been played. Take a look at the docs for <video>.played and TimeRanges .

Answer 5

Connect the authentication link at the end of the video; use the link to verify that they have collected the token. This will not solve the problem of checkpoints, and the viewer can click on the game and leave, but this can happen with checkpoints.

Youtube videos can have links inserted during the course using the annotation feature in the bootloader interface. Combine the encrypted link in annotations for the last fifteen seconds or so by authenticating your site to create server-side credentials.

Answer 6

I worked on something very similar, and I 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 ahead.

 // 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 configures the iframe player. el is the dom object that you want to replace the video, and video_id is the identifier of the video you want to download. controls: 0 - the magic bit that hides the player’s chrome. Then in the onStateChange function you can send an ajax request or change the layout or something else that you need to do at the end of the video.