How to capture xAPI statements from a Video

Recently along with Peter Hawkins of the Australian xAPI User Group, I presented at a Local event for the Australian Institute of Training and Development (AITD) QLD/NT Council on an introduction to xAPI and a real time demo of how xAPI can be used with a Video.

The concept was to show, in almost real time, a user opening a video, scrubbing back and forth, pausing, playing and closing the video and how this data could be used in analyzing how the video is performing for your users.

This is a common case throughout the learning community, so in the spirit of open learning, below is how we came up with the concept and some of the things I had to do to develop the xAPI interface.

First, we needed to have a concept. Peter and I threw around a lot of ideas, and finally settled on a short (< 3 minute) video where a user must enter their first name and last name to initiate the process (and setting up the Actor) and then launch the video. This sends the Launched verb. The Actor is using a dummy email address based on the values added in the first and last name, of course this would need to be adapted to your project.

This was the easy bit, it then started to get tricky. We had opted to use Veracity as the LRS. This gave us the ability to create a Histogram chart that is displayed to the user.

Whilst in simplistic terms, you need only send an Actor, Verb and Activity (Object), in order to get the Histogram to work correctly, there was much more data that was needed. After trial and error and lots of research, the extensions required around the context > contextActivities > category required to get the Histogram to work are:

"context":{
         "contextActivities":{
                  "category":{
                                 "id":"https://w3id.org/xapi/video"
                                }
                            },
                           "extensions": {
                                "https://w3id.org/xapi/video/extensions/session-id": session_id,
                                "https://w3id.org/xapi/video/extensions/completion-threshold": "1.0",
                                "https://w3id.org/xapi/video/extensions/length": vid.duration,
                                "https://w3id.org/xapi/video/extensions/full-screen": false,
                                "https://w3id.org/xapi/video/extensions/screen-size": window.innerWidth +"x" + window.innerHeight,
                                "https://w3id.org/xapi/video/extensions/video-playback-size": vid.videoWidth +"x" + vid.videoHeight,
                                "https://w3id.org/xapi/video/extensions/cc-enabled": false,
                                "https://w3id.org/xapi/video/extensions/speed": "1x",
                                "https://w3id.org/xapi/video/extensions/frame-rate": "23.98",
                                "https://w3id.org/xapi/video/extensions/quality": vid.videoWidth +"x" + vid.videoHeight,
                                "https://w3id.org/xapi/video/extensions/user-agent": navigator.userAgent,
                                "https://w3id.org/xapi/video/extensions/volume": 1,
                        },
                        }};

You’ll notice some variables in there, these are set up in the JavaScript file, which you can download at the end of this article.

Now we have the extensions (Note that the values for vid and session_id are set at the top of the JS), we needed to look at what else we wanted to capture. We wanted to capture if a user scrubs through the video and in particular, when they start and end the scrub.

With the video object already setup, I added a listener to check the previous and current time on the video. From this I could pass the verb Seeked and also the start and end time of the scrub.

This project was really interesting for me as a Digital Learning Solutions Developer. It showed me just what xAPI is capable of and how it can be used in many different scenarios, if you just think outside the box a little bit.

I have since made a couple of amendments to the code to make it easier for you to work with. When you download the code, you need only change the config.json file. You need to setup the following:

lrsData = {
	"authkey": "username:password",
	"endpoint": "https://yourlrs.com/data/xAPI/",
	"lrsDatReport": "https://yourlrs.com/dashboard",
    "VideoSource":"https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_2MB.mp4",
    "VideoTitle":"xAPI Demo Video - Big Buck Bunny Test video"
}

authkey – from your LRS
endpoint i- also from your LRS
lrsDataReport – from your LRS

VideoSource – needs to be an mp4 video. You can use Vimeo if you have Pro account. for testing, this is linked to a short Big Buck Bunny test video. You may need to do a little fiddling to support a YouTube video.
VideoTitle – make this meaningful as this is what is sent in the description of the Activity

The demonstration below is connecting to Veracity (https://lrs.io) using the Big Buck Bunny video. You don’t need to put in a real name when you’re testing and the email address is generated as a dummy.

Any data stored is for testing and demo only and may be deleted at any time.