Add xapi video verbs

library.json

@@ -14,6 +14,9 @@
     "minorVersion": 4
   },
   "preloadedJs": [
+    {
+        "path": "scripts/x-api.js"
+    },
     {
       "path": "scripts/youtube.js"
     },

scripts/html5.js

@@ -12,6 +12,12 @@ H5P.VideoHtml5 = (function ($) {
   function Html5(sources, options, l10n) {
     var self = this;
 
+    /**
+     * xAPI Helper.
+     * @private
+     */
+    var videoXAPI = new H5P.VideoXAPI(self);
+
     /**
      * Displayed when the video is buffering
      * @private
@@ -35,6 +41,12 @@ H5P.VideoHtml5 = (function ($) {
     var stateBeforeChangingQuality;
     var currentTimeBeforeChangingQuality;
 
+    /**
+     * Track xAPI statement data for video events.
+     * @private
+     */
+    var lastSend = null;
+
     /**
      * Avoids firing the same event twice.
      * @private
@@ -136,6 +148,29 @@ H5P.VideoHtml5 = (function ($) {
       }
     });
 
+    /**
+     * Create the xAPI object for the 'Loaded' event.
+     */
+    var getLoadedParams = function () {
+      var ccEnabled = false;
+      var ccLanguage;
+
+      for (var i = 0; i < video.textTracks.length; i++) {
+        if (video.textTracks[i].mode === 'showing') {
+          ccEnabled = true;
+          ccLanguage = video.textTracks[i].language;
+        }
+      }
+
+      var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || false;
+
+      return videoXAPI.getArgsXAPIInitialized(video.currentTime, video.videoWidth, video.videoHeight, video.playbackRate, video.volume, ccEnabled, ccLanguage);
+
+    };
+
+    // Set duration used for xAPI statements.
+    videoXAPI.duration = video.duration;
+
     /**
      * Helps registering events.
      *
@@ -146,6 +181,8 @@ H5P.VideoHtml5 = (function ($) {
      */
     var mapEvent = function (native, h5p, arg) {
       video.addEventListener(native, function () {
+        var extraArg = null;
+        var extraTrigger = null;
         switch (h5p) {
           case 'stateChange':
             if (lastState === arg) {
@@ -158,8 +195,67 @@ H5P.VideoHtml5 = (function ($) {
               delete options.startAt;
             }
 
-            break;
+            if (arg === H5P.Video.PLAYING) {
+              if (videoXAPI.seeking === true) {
+                extraArg = videoXAPI.getArgsXAPISeeked(videoXAPI.seekedTo);
+                extraTrigger = 'seeked';
+                lastSend = 'seeked';
+                videoXAPI.seeking = false;
+              } else if (lastSend !== 'play') {
+                extraArg = videoXAPI.getArgsXAPIPlayed(video.currentTime);
+                extraTrigger = 'play';
+                lastSend = 'play';
+              }
+            }
 
+            if (arg === H5P.Video.PAUSED) {
+              // Put together extraArg for sending to xAPI statement.
+              if (!video.seeking && videoXAPI.seeking === false && video.currentTime !== video.duration) {
+                extraTrigger = "paused";
+                extraArg = videoXAPI.getArgsXAPIPaused(video.currentTime, video.duration);
+                lastSend = 'paused';
+              }
+            }
+
+            if (arg === H5P.Video.ENDED) {
+              // Send extra trigger for giving progress on ended call to xAPI.
+              var length = video.duration;
+              if (length > 0) {
+                // Length passed in as current time, because at end of video when this is fired currentTime reset to 0 if on loop
+                var progress = videoXAPI.getProgress(length, length);
+                if (progress >= 1) {
+                  extraTrigger = "finished";
+                  extraArg = videoXAPI.getArgsXAPICompleted(video.currentTime, video.duration);
+                  lastSend = 'finished';
+                }
+              }
+            }
+            break;
+          case 'seeked':
+            return; // Seek is tracked differently based on time difference in timeupdate.
+            break;
+          case 'seeking':
+            return; // Just need to store current time for seeked event.
+            break;
+          case 'volumechange' :
+            arg = videoXAPI.getArgsXAPIVolumeChanged(video.currentTime, video.muted, video.volume);
+            lastSend = 'volumechange';
+            break;
+          case 'play':
+            if (videoXAPI.seeking === false && lastSend != h5p) {
+              arg = videoXAPI.getArgsXAPIPlayed(video.currentTime);
+              lastSend = h5p;
+            } else {
+              arg = videoXAPI.getArgsXAPISeeked(videoXAPI.seekedTo);
+              lastSend = 'seeked';
+               videoXAPI.seeking = false;
+              h5p = 'seeked';
+            }
+            break;
+          case 'fullscreen':
+            arg = videoXAPI.getArgsXAPIFullScreen(video.currentTime, video.videoWidth, video.videoHeight);
+            lastSend = h5p;
+            break;
           case 'loaded':
             isLoaded = true;
 
@@ -181,8 +277,12 @@ H5P.VideoHtml5 = (function ($) {
               video.addEventListener('durationchange', andLoaded, false);
               return;
             }
-            break;
 
+            extraTrigger = 'xAPIloaded';
+            extraArg = getLoadedParams();
+            lastSend = 'xAPIloaded';
+
+            break;
           case 'error':
             // Handle error and get message.
             arg = error(arguments[0], arguments[1]);
@@ -207,6 +307,11 @@ H5P.VideoHtml5 = (function ($) {
             break;
         }
         self.trigger(h5p, arg);
+
+        // Make extra calls for events with needed values for xAPI statement.
+        if (extraTrigger != null && extraArg != null) {
+          self.trigger(extraTrigger, extraArg);
+        }
       }, false);
     };
 
@@ -418,8 +523,12 @@ H5P.VideoHtml5 = (function ($) {
         video.play();
         video.pause();
       }
-
+      if (videoXAPI.seeking === false) {
+        videoXAPI.previousTime = video.currentTime;
+      }
       video.currentTime = time;
+      videoXAPI.seeking = true;
+      videoXAPI.seekedTo = time;
     };
 
     /**
@@ -589,14 +698,18 @@ H5P.VideoHtml5 = (function ($) {
     mapEvent('loadedmetadata', 'loaded');
     mapEvent('error', 'error');
     mapEvent('ratechange', 'playbackRateChange');
+    mapEvent('seeking','seeking', H5P.Video.PAUSED);
+    mapEvent('timeupdate', 'timeupdate', H5P.Video.PLAYING);
+    mapEvent('volumechange', 'volumechange');
+    mapEvent('play', 'play', H5P.Video.PLAYING);
+    mapEvent('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', 'fullscreen');
 
     if (!video.controls) {
       // Disable context menu(right click) to prevent controls.
       video.addEventListener('contextmenu', function (event) {
         event.preventDefault();
       }, false);
     }
-
     // Display throbber when buffering/loading video.
     self.on('stateChange', function (event) {
       var state = event.data;
@@ -622,6 +735,32 @@ H5P.VideoHtml5 = (function ($) {
       });
     });
 
+    // xAPI extension events for video.
+    self.on('seeked', function (event) {
+      this.triggerXAPI('seeked', event.data);
+    });
+    self.on('volumechange', function (event) {
+      this.triggerXAPI('interacted', event.data);
+    });
+    self.on('finished', function (event) {
+        //triggered as finished to be seperate from H5Ps completed,
+        //but statement is sent as completed and differentiated by object.id
+      this.triggerXAPI('completed', event.data);
+    })
+    self.on('fullscreen', function (event) {
+      // @todo: Not currently used.
+      this.triggerXAPI('interacted', event.data);
+    });
+    self.on('play', function (event) {
+      this.triggerXAPI('played', event.data);
+    });
+    self.on('xAPIloaded', function (event) {
+      this.triggerXAPI('initialized', event.data);
+    })
+    self.on('paused', function (event) {
+      this.triggerXAPI('paused', event.data);
+    });
+
     // Video controls are ready
     nextTick(function () {
       self.trigger('ready');