Add xAPI Events to gain deeper insights into the learners' behaviors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "h5p-interactive-video",
-  "version": "1.25.0",
+  "version": "1.27.0",
   "description": "Put texts, tasks and other medias on top of your video.",
   "private": true,
   "scripts": {

src/scripts/interactive-video.js

@@ -183,6 +183,7 @@ function InteractiveVideo(params, id, contentData) {
   // set start time
   // if previousState.progress exists, update time to that, else use startAt defined in params or 0
   self.currentTime = Math.floor((self.previousState?.progress !== undefined && self.previousState?.progress !== null) ? self.previousState.progress : (params.override?.startVideoAt || 0));
+  self.lastxAPITime = Math.floor((self.previousState?.progress !== undefined && self.previousState?.progress !== null) ? self.previousState.progress : (params.override?.startVideoAt || 0));
 
   this.maxTimeReached = (self.previousState && self.previousState.maxTimeReached) ?
     self.previousState.maxTimeReached :
@@ -255,6 +256,23 @@ function InteractiveVideo(params, id, contentData) {
       self.resize();
     });
 
+    // Add H5P xAPI Verbs
+    if(H5P.jQuery.inArray("viewed", H5P.XAPIEvent.allowedXAPIVerbs) === -1)
+    {
+      H5P.XAPIEvent.allowedXAPIVerbs.push("viewed")
+    }
+
+    if(H5P.jQuery.inArray("play", H5P.XAPIEvent.allowedXAPIVerbs) === -1)
+    {
+      H5P.XAPIEvent.allowedXAPIVerbs.push("play")
+    }
+
+    if(H5P.jQuery.inArray("pause", H5P.XAPIEvent.allowedXAPIVerbs) === -1)
+    {
+      H5P.XAPIEvent.allowedXAPIVerbs.push("pause")
+    }
+
+
     // In the editor, no captions will be shown
     const textTracks = this.editor ? [] :
       (self.options.video.textTracks && self.options.video.textTracks.videoTrack ? self.options.video.textTracks.videoTrack : []);
@@ -389,6 +407,10 @@ function InteractiveVideo(params, id, contentData) {
                 self.trigger('resize');
               }, 400);
             }
+            let statement = self.createXAPIEventTemplate('play');
+            let extensions =  statement.getVerifiedStatementValue(["object","definition","extensions"]);
+            extensions = Object.assign(extensions,{ videoTime : self.video.getCurrentTime() });         
+            self.trigger(statement);
           }
 
           self.currentState = H5P.Video.PLAYING;
@@ -420,6 +442,11 @@ function InteractiveVideo(params, id, contentData) {
             self.controls.$play.focus();
           }
 
+          let statement = self.createXAPIEventTemplate('pause');
+          let extensions =  statement.getVerifiedStatementValue(["object","definition","extensions"]);
+          extensions = Object.assign(extensions,{ videoTime : self.video.getCurrentTime() });         
+          self.trigger(statement);
+
           self.timeUpdate(self.video.getCurrentTime());
           break;
 
@@ -3163,7 +3190,17 @@ InteractiveVideo.prototype.toggleFullScreen = function () {
 InteractiveVideo.prototype.timeUpdate = function (time, skipNextTimeUpdate) {
   var self = this;
 
-  // keep track of current time in IV
+  if(Math.abs(self.lastxAPITime - time) > 1)
+  {
+    self.lastxAPITime = time;
+
+    let statement = self.createXAPIEventTemplate('viewed');
+    let extensions =  statement.getVerifiedStatementValue(["object","definition","extensions"]);
+    extensions = Object.assign(extensions,{ videoTime : self.video.getCurrentTime() });         
+    self.trigger(statement);
+  }
+
+  // keep track of current time in IV 
   self.currentTime = time;
 
   // Scroll slider
@@ -3187,6 +3224,7 @@ InteractiveVideo.prototype.timeUpdate = function (time, skipNextTimeUpdate) {
       self.timeUpdate(self.video.getCurrentTime());
     }
   }, 40); // 25 fps
+
 };
 
 /**