Add xapi video verbs

scripts/html5.js

@@ -1,5 +1,6 @@
 /** @namespace H5P */
 H5P.VideoHtml5 = (function ($) {
+  'use strict';
 
   /**
    * HTML5 video player for H5P.
@@ -12,12 +13,6 @@ 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
@@ -162,7 +157,7 @@ H5P.VideoHtml5 = (function ($) {
         }
       }
 
-      return videoXAPI.getArgsXAPIInitialized(video.videoWidth, video.videoHeight, video.playbackRate, video.volume, ccEnabled, ccLanguage);
+      return self.videoXAPI.getArgsXAPIInitialized(video.videoWidth, video.videoHeight, video.playbackRate, video.volume, ccEnabled, ccLanguage);
 
     };
 
@@ -194,24 +189,18 @@ H5P.VideoHtml5 = (function ($) {
             }
 
             if (arg === H5P.Video.PLAYING) {
-              if (self.seeking === true) {
-                extraArg = videoXAPI.getArgsXAPISeeked(self.seekedTo);
-                extraTrigger = 'seeked';
-                lastSend = 'seeked';
-                self.seeking = false;
-              }
-              else if (lastSend !== 'play') {
-                extraArg = videoXAPI.getArgsXAPIPlayed(video.currentTime);
+              if (lastSend !== 'play') {
+                extraArg = self.videoXAPI.getArgsXAPIPlayed(video.currentTime);
                 extraTrigger = 'play';
                 lastSend = 'play';
               }
             }
 
             if (arg === H5P.Video.PAUSED) {
               // Put together extraArg for sending to xAPI statement.
-              if (!video.seeking && self.seeking === false && video.currentTime !== video.duration) {
+              if (!video.seeking && self.seeking === false && video.currentTime !== video.duration && self.previousState !== H5P.Video.BUFFERING) {
                 extraTrigger = 'paused';
-                extraArg = videoXAPI.getArgsXAPIPaused(video.currentTime, video.duration);
+                extraArg = self.videoXAPI.getArgsXAPIPaused(video.currentTime, video.duration);
                 lastSend = 'paused';
               }
             }
@@ -221,10 +210,10 @@ H5P.VideoHtml5 = (function ($) {
               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 >= 0.95) {
+                var progress = self.videoXAPI.getProgress(length, length);
+                if (progress >= self.finishedThreshold) {
                   extraTrigger = 'finished';
-                  extraArg = videoXAPI.getArgsXAPICompleted(video.currentTime, video.duration, progress);
+                  extraArg = self.videoXAPI.getArgsXAPICompleted(video.currentTime, video.duration, progress);
                   lastSend = 'finished';
                 }
               }
@@ -237,23 +226,23 @@ H5P.VideoHtml5 = (function ($) {
             return; // Just need to store current time for seeked event.
             break;
           case 'volumechange' :
-            arg = videoXAPI.getArgsXAPIVolumeChanged(video.currentTime, video.muted, video.volume);
+            arg = self.videoXAPI.getArgsXAPIVolumeChanged(video.currentTime, video.muted, video.volume);
             lastSend = 'volumechange';
             break;
           case 'play':
             if (self.seeking === false && lastSend !== h5p) {
-              arg = videoXAPI.getArgsXAPIPlayed(video.currentTime);
+              arg = self.videoXAPI.getArgsXAPIPlayed(video.currentTime);
               lastSend = h5p;
             }
             else {
-              arg = videoXAPI.getArgsXAPISeeked(self.seekedTo);
+              arg = self.videoXAPI.getArgsXAPISeeked(self.seekedTo);
               lastSend = 'seeked';
               self.seeking = false;
               h5p = 'seeked';
             }
             break;
           case 'fullscreen':
-            arg = videoXAPI.getArgsXAPIFullScreen(video.currentTime, video.videoWidth, video.videoHeight);
+            arg = self.videoXAPI.getArgsXAPIFullScreen(video.currentTime, video.videoWidth, video.videoHeight);
             lastSend = h5p;
             break;
           case 'loaded':
@@ -295,7 +284,7 @@ H5P.VideoHtml5 = (function ($) {
               skipRateChange = false;
               return; // Avoid firing event when changing back
             }
-            if (H5P.Video.IE11_PLAYBACK_RATE_FIX && playbackRate != video.playbackRate) { // Intentional
+            if (H5P.Video.IE11_PLAYBACK_RATE_FIX && playbackRate !== video.playbackRate) { // Intentional
               // Prevent change in playback rate not triggered by the user
               video.playbackRate = playbackRate;
               skipRateChange = true;
@@ -306,6 +295,7 @@ H5P.VideoHtml5 = (function ($) {
             arg = self.getPlaybackRate();
             break;
         }
+        self.previousState = arg;
         self.trigger(h5p, arg);
 
         // Make extra calls for events with needed values for xAPI statement.

scripts/video.js

@@ -1,5 +1,6 @@
 /** @namespace H5P */
 H5P.Video = (function ($, ContentCopyrights, MediaCopyright, handlers) {
+  'use strict';
 
   /**
    * The ultimate H5P video player!
@@ -15,14 +16,35 @@ H5P.Video = (function ($, ContentCopyrights, MediaCopyright, handlers) {
   function Video(parameters, id) {
     var self = this;
 
+    self.videoXAPI = new H5P.VideoXAPI(self);
+
     // Ref youtube.js - ipad & youtube - issue
     self.pressToPlay = false;
 
-    // Values needed for xAPI triggering
+    self.finishedThreshold = 0.95;
+
+    // Values needed for xAPI triggering, set by handlers
     self.previousTime = 0;
     self.seeking = false;
     self.seekedTo = 0;
     self.duration = 0;
+    self.previousState = -1;
+    self.mousedown = false;
+
+    /*
+     * Used to distinguish seeking from pausing
+     * TODO: This might be much cleaner with refactoring IV, video and the handlers
+     */
+    document.addEventListener('mousedown', function() {
+      self.mousedown = true;
+    });
+    document.addEventListener('mouseup', function() {
+      if (self.seeking) {
+        self.trigger('seeked', self.videoXAPI.getArgsXAPISeeked(self.seekedTo));
+        self.seeking = false;
+      }
+      self.mousedown = false;
+    });
 
     // Initialize event inheritance
     H5P.EventDispatcher.call(self);
@@ -145,7 +167,10 @@ H5P.Video = (function ($, ContentCopyrights, MediaCopyright, handlers) {
       self.triggerXAPI('initialized', event.data);
     });
     self.on('paused', function (event) {
-      self.triggerXAPI('paused', event.data);
+      // if mouse button is down, we're seeking
+      if (self.mousedown === false) {
+        self.triggerXAPI('paused', event.data);
+      }
     });
 
     // Find player for video sources

scripts/x-api.js

@@ -1,5 +1,6 @@
 /** @namespace H5P */
 H5P.VideoXAPI = (function ($) {
+  'use strict';
 
   /**
    * Xapi video statement generator for H5P.
@@ -134,7 +135,7 @@ H5P.VideoXAPI = (function ($) {
      */
     self.getArgsXAPIPlayed = function (currentTime) {
       var resultExtTime = formatFloat(currentTime);
-      playingSegmentStart = resultExtTime;
+      //playingSegmentStart = resultExtTime;
 
       return self.getArgsXAPI({
         verb: 'https://w3id.org/xapi/video/verbs/played',
@@ -425,7 +426,6 @@ H5P.VideoXAPI = (function ($) {
           }
         }
       }
-      xAPIBase = xAPIObject;
       return xAPIObject;
     };
   }

scripts/youtube.js

@@ -1,5 +1,7 @@
 /** @namespace H5P */
+
 H5P.VideoYouTube = (function ($) {
+'use strict'
 
   /**
    * YouTube video player for H5P.
@@ -12,12 +14,6 @@ H5P.VideoYouTube = (function ($) {
   function YouTube(sources, options, l10n) {
     var self = this;
 
-    /**
-     * xAPI Helper.
-     * @private
-     */
-    var videoXAPI = new H5P.VideoXAPI(self);
-
     var player;
     var playbackRate = 1;
     var id = 'h5p-youtube-' + numInstances;
@@ -111,7 +107,7 @@ H5P.VideoYouTube = (function ($) {
             }
           },
           onStateChange: function (state) {
-            if (state.data > -1 && state.data < 4) {
+            if (state.data >= H5P.Video.ENDED && state.data <= H5P.Video.BUFFERING) {
 
               // Fix for keeping playback rate in IE11
               if (H5P.Video.IE11_PLAYBACK_RATE_FIX && state.data === H5P.Video.PLAYING && playbackRate !== 1) {
@@ -124,35 +120,32 @@ H5P.VideoYouTube = (function ($) {
               self.trigger('stateChange', state.data);
 
               // Calls for xAPI events.
-              if (state.data === 1) {
+              if (state.data === H5P.Video.PLAYING) {
                 // Get and send play call when not seeking.
                 if (self.seeking === false) {
-                  self.trigger('play', videoXAPI.getArgsXAPIPlayed(player.getCurrentTime()));
-                }
-                else {
-                  self.trigger('seeked', videoXAPI.getArgsXAPISeeked(self.seekedTo));
-                  self.seeking = false;
+                  self.trigger('play', self.videoXAPI.getArgsXAPIPlayed(player.getCurrentTime()));
                 }
               }
-              else if (state.data === 2) {
+              else if (state.data === H5P.Video.PAUSED) {
                 // This is a paused event.
-                if (self.seeking === false) {
-                  self.trigger('paused', videoXAPI.getArgsXAPIPaused(player.getCurrentTime(), self.duration));
+                if (self.seeking === false && self.previousState !== H5P.Video.BUFFERING) {
+                  self.trigger('paused', self.videoXAPI.getArgsXAPIPaused(player.getCurrentTime(), self.duration));
                 }
               }
-              else if (state.data === 0) {
+              else if (state.data === H5P.Video.ENDED) {
                 // Send xapi trigger if video progress indicates finished.
                 var length = self.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 >= 0.95) {
-                    var arg = videoXAPI.getArgsXAPICompleted(player.getCurrentTime(), self.duration, progress);
+                  var progress = self.videoXAPI.getProgress(length, length);
+                  if (progress >= self.finishedThreshold) {
+                    var arg = self.videoXAPI.getArgsXAPICompleted(player.getCurrentTime(), self.duration, progress);
                     self.trigger('finished', arg);
                   }
                 }
               }
             }
+            self.previousState = state.data;
           },
           onPlaybackQualityChange: function (quality) {
             self.trigger('qualityChange', quality.data);
@@ -223,7 +216,7 @@ H5P.VideoYouTube = (function ($) {
           break;
       }
 
-      return (returnType.toLowerCase().trim()=='width') ? width : height;
+      return (returnType.toLowerCase().trim() === 'width') ? width : height;
     };
 
     /**
@@ -240,7 +233,7 @@ H5P.VideoYouTube = (function ($) {
         ccLanguage = player.getOptions('cc', 'track').languageCode;
       }
 
-      return videoXAPI.getArgsXAPIInitialized(width, height, self.getPlaybackRate(), self.getVolume(), ccEnabled, ccLanguage, self.getQuality());
+      return self.videoXAPI.getArgsXAPIInitialized(width, height, self.getPlaybackRate(), self.getVolume(), ccEnabled, ccLanguage, self.getQuality());
 
     };
 
@@ -420,7 +413,7 @@ H5P.VideoYouTube = (function ($) {
         return;
       }
 
-      self.trigger('volumechange', videoXAPI.getArgsXAPIVolumeChanged(player.getCurrentTime(), true, player.getVolume()));
+      self.trigger('volumechange', self.videoXAPI.getArgsXAPIVolumeChanged(player.getCurrentTime(), true, player.getVolume()));
 
       player.mute();
     };
@@ -435,7 +428,7 @@ H5P.VideoYouTube = (function ($) {
         return;
       }
 
-      self.trigger('volumechange', videoXAPI.getArgsXAPIVolumeChanged(player.getCurrentTime(), false, player.getVolume()));
+      self.trigger('volumechange', self.videoXAPI.getArgsXAPIVolumeChanged(player.getCurrentTime(), false, player.getVolume()));
 
       player.unMute();
     };
@@ -479,7 +472,7 @@ H5P.VideoYouTube = (function ($) {
         return;
       }
 
-      self.trigger('volumechange', videoXAPI.getArgsXAPIVolumeChanged(player.getCurrentTime(), player.isMuted(), level));
+      self.trigger('volumechange', self.videoXAPI.getArgsXAPIVolumeChanged(player.getCurrentTime(), player.isMuted(), level));
 
       player.setVolume(level);
     };