Skip to content

Instantly share code, notes, and snippets.

@steffentchr
Last active October 29, 2020 13:19
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save steffentchr/3d57fa1a15a25b4c29af to your computer and use it in GitHub Desktop.
Save steffentchr/3d57fa1a15a25b4c29af to your computer and use it in GitHub Desktop.
A sample script for GlueFrame, illustrating how to implement a generic analytics tag, which listens to events from 23 Video player.
(function(){
var identifiedFrames = [];
// Method to run any reporting
var report = function(Player, event, playing, duration) {
Player.get('currentTime', function(currentTime){
Player.get('duration', function(duration){
console.log(event, playing, currentTime, duration);
});
});
}
// Utility method to wait for GlueFrame to be loaded before proceeding
var lookForGlueGrame = function(callback){
if(typeof(GlueFrame)!='undefined') {
callback();
} else {
window.setTimeout(function(){
lookForGlueGrame(callback);
}, 100);
}
}
// Use the information about protocol and domain from the player embed to load GlueFrame
var loadGlueFrame = function(frame, callback){
if(typeof(GlueFrame)!='undefined') {
callback(frame);
} else {
var src = frame.getAttribute('src');
var matches = src.match(/^([^\/]*)\/\/([^\/]+)\//)
var protocol = matches[1];
var domain = matches[2];
var s=document.createElement('script');
s.setAttribute("type","text/javascript");
s.setAttribute("src", [protocol, '//', domain, '/resources/um/script/libraries/glueframe-1.1.min.js'].join(''));
document.getElementsByTagName('body')[0].appendChild(s);
lookForGlueGrame(function(){
callback(frame);
});
}
}
// Apply GlueFrame to the embed code
var listen = function(frame){
var Player = new GlueFrame(frame, "Player");
var playing = false;
Player.get('playing', function(p){
playing = p;
// Report on load
report(Player, 'load', playing);
// Report on
Player.bind('player:video:play player:video:pause player:video:pause player:video:end player:video:timeupdate', function(e){
switch(e){
case 'player:video:play':
playing = true;
break;
case 'player:video:pause':
case 'player:video:end':
playing = false;
break;
}
report(Player, e.split(':')[2], playing)
});
});
}
// Load up the script by looping through iframes and looking for embed patterns
var load = function(){
var frames = document.getElementsByTagName('iframe');
for(var i=0; i<frames.length; i++) {
var frame = frames[i];
var previouslyIdentified = false;
for(var x=0; x<identifiedFrames.length; x++) {
if(identifiedFrames[x]===frame) {
previouslyIdentified = true;
break;
}
}
if (!previouslyIdentified) {
identifiedFrames.push(frame);
if(/^([^\/]*)\/\/([^\/]+)\/[^\/]+.ihtml\/player.html/.test(frame.getAttribute('src'))) {
loadGlueFrame(frame, function(){
listen(frame);
});
}
}
}
}
function addEvent(element, eventName, fn) {
if (element.addEventListener) element.addEventListener(eventName, fn, false);
else if (element.attachEvent) element.attachEvent('on' + eventName, fn);
}
addEvent(window, 'load', load);
window.reload23VideoPlayers = load;
})();
// For debugging or post load inclusion
window.reload23VideoPlayers();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment