Skip to content

Commit

Permalink
Merge pull request #2 from otacke/add-xapi-video-verbs
Browse files Browse the repository at this point in the history 
Add xapi video verbs
  • Loading branch information
@figureone
figureone committed Apr 9, 2018
2 parents 12912a8 + 8223c20 commit cbef273
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 54 deletions.
40 changes: 15 additions & 25 deletions scripts/html5.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/** @namespace H5P */
H5P.VideoHtml5 = (function ($) {
'use strict';

/**
* HTML5 video player for H5P.
Expand All @@ -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
Expand Down Expand Up @@ -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);

};

Expand Down Expand Up @@ -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';
}
}
Expand All @@ -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';
}
}
Expand All @@ -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':
Expand Down Expand Up @@ -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;
Expand All @@ -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.
Expand Down
29 changes: 27 additions & 2 deletions scripts/video.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/** @namespace H5P */
H5P.Video = (function ($, ContentCopyrights, MediaCopyright, handlers) {
'use strict';

/**
* The ultimate H5P video player!
Expand All @@ -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);
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions scripts/x-api.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/** @namespace H5P */
H5P.VideoXAPI = (function ($) {
'use strict';

/**
* Xapi video statement generator for H5P.
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -425,7 +426,6 @@ H5P.VideoXAPI = (function ($) {
}
}
}
xAPIBase = xAPIObject;
return xAPIObject;
};
}
Expand Down
43 changes: 18 additions & 25 deletions scripts/youtube.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
/** @namespace H5P */

H5P.VideoYouTube = (function ($) {
'use strict'

/**
* YouTube video player for H5P.
Expand All @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
Expand Down Expand Up @@ -223,7 +216,7 @@ H5P.VideoYouTube = (function ($) {
break;
}

return (returnType.toLowerCase().trim()=='width') ? width : height;
return (returnType.toLowerCase().trim() === 'width') ? width : height;
};

/**
Expand All @@ -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());

};

Expand Down Expand Up @@ -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();
};
Expand All @@ -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();
};
Expand Down Expand Up @@ -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);
};
Expand Down

0 comments on commit cbef273

Please sign in to comment.