Release Date | February 17th, 2021

Overview

Before upgrading a LP, keep in mind that each project may have certain features added and/or removed.

This guide will focus on removing all of the code that is paired with Player version 19 or previous versions, and adding in basic code to get player 2.x working

Adding in features such as interactivity, captions, stats are explained in-depth in our player guide

Simplified player migration

Remove old player code

Remove player div

Remove old player script

var myEnvironment = 'https://player-bt.pv.bt.com/19';

window.IdmEngineCallback = function(){

Idm.Engine.init({

domain: myEnvironment,

"baseMovieURL": "https://b.pv.bt.com/",

"autostart": '1',

"uak" : "bt6",

"analytics": [

["cls-button-1","Button1","mouseover"],

["cls-button-2","Button2"] ],

});

};

(function(d, s, id){

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(s); js.id = id;

js.src = myEnvironment + '/assets/js/eng.js';

js.async = false;

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'idomooEngine'));

</script>

Add player 2.x code

Place the player’s script above the player's div.

Insert the HTML code at the exact location where you want the player to appear.

Add player_options (optional) inside the script.

While the player’s script (step 2.a) runs the player itself, the var tag player_options holds customization options.

var player_options = {

interactive: true,

size: "hd",

autoplay: true,

cta_analytics: [

["idm-cta-btn1", "Loved it"],

["idm-cta-btn2", "It cracked me down"]

]

};

idmPlayerCreate(player_options, "idm-player");

</script>

Advanced Guide

For this section we’ll be using american airlines lp as an example of what to look for and change in a slightly more complicated LP.

Remove old code

The first block

Line by line high level description of the code and what it does ( where explanation is needed )
For lines 51 to 69

Used for grabbing URL parameters url=? id=?
Sets old way of downloading videos, here the DOM element referred to by id=download will just open a new tab with only the video
Hides the default player background and play button

All of this code for the range mentioned is safe to remove

function getParameterByName(name, url) {

if (!url) url = window.location.href;

name = name.replace(/[\[\]]/g, "\\$&");

var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),

results = regex.exec(url);

if (!results) return null;

if (!results[2]) return "";

return decodeURIComponent(results[2].replace(/\+/g, " "));

}

var downloadURL = getParameterByName("id");

document.getElementById("download").setAttribute("href","https://v.idomoo.com/" + downloadURL + ".mp4");

//function loadPlayer() {

document.getElementById('imgCoverPlayer').style.display = 'none';

document.getElementById('playerButton').style.display = 'none';

//var content_bg = content-top

var myEnvironment = 'idoplayer.idomoo.com/19/';

The next block

Line by line high level description of the code and what it does ( where explanation is needed )

For lines 71 to 262

Inits the player object ( similar to player_options )
Downloads and inserts the relevant player code
Initializes the player object IdmLp with methods for twitter, fb sharing, google analytics

The code within the range mentioned is safe to remove

window.IdmEngineCallback = function () {

Idm.Engine.init({

domain: myEnvironment,

"baseMovieURL": "https://v.idomoo.com",

vertical: false,

"chapters": false,

"timeline_events": false,

"autostart": '0',

"analytics": [

["idm-cta-btn1","Facebook"],

["idm-cta-btn2","Twitter"],

["idm-cta-btn3","LinkedIn"],

["idm-cta-btn4","Download"],

["idm-cta-btn5","Copy Link"]

]

});

};

(function (d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) {

return;

}

js = d.createElement(s);

js.id = id;

js.src = '//' + myEnvironment + '/assets/js/eng.js';

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'idomooEngine'));

//};

(function(){

IdmLP = {

getQSParamNew : function(){

var query_string = {};

var query = window.location.search.substring(1);

var vars = query.split("&");

for (var i=0;i<vars.length;i++) {

var pair = vars[i].split("=");

// If first entry with this name

if (typeof query_string[pair[0]] === "undefined") {

query_string[pair[0]] = pair[1];

// If second entry with this name

} else if (typeof query_string[pair[0]] === "string") {

var arr = [ query_string[pair[0]], pair[1] ];

query_string[pair[0]] = arr;

// If third or later entry with this name

} else {

query_string[pair[0]].push(pair[1]);

}

return query_string;

init: function(){

this.getMovieURL();

this.setHDVideoBox();

this.setIphoneTrick();

//this.setMetaTagsFBShare();

this.setFBShareEvent();

this.setTWShareEvent();

this.initGA();

getMovieURL: function(){

var self = this;

var baseMovieUrl = document.getElementById('baseMovieUrl').value;

var movie_url = null;

//try to get the movie from hash id with baseURL or from url param

if (baseMovieUrl && baseMovieUrl !== ""){

var movie_hash = this.getQSParamNew().id;

movie_url = baseMovieUrl + movie_hash + ".mp4";

}else{

movie_url = this.getQSParamNew().url;

}

this.movie_url = movie_url;

//if not found get the default for this page

if (!movie_url){

setTimeout(function(){

movie_url = Idm.Engine.getMovieURL();

self.movie_url = movie_url;

}, 800);

}

setIphoneTrick: function () {

var ua = navigator.userAgent;

var self = this;

if (ua.indexOf('iPhone') > 0 || ua.indexOf("iPad") > 0) {

//the meta is a fix for ios less than 6, there is a known zoom issue

document.head.appendHTML = '<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">';

setTimeout(function(){

if (this.getQSParamNew().id){

window.location = self.movie_url;

}

}, 800);

}

setHDVideoBox:function(){

var is_hd = this.getQSParamNew().hd;

if (is_hd && is_hd ==1){

document.getElementById('wrap_content').style.maxWidth = '1280px';

}

setMetaTagsFBShare: function(){

var script = document.createElement('script');

script.type = 'text/javascript';

var lp_url = location.href;

script.src = 'http://dev-play.idomoo.com/meta-tags.php?movieURL=' + (this.movie_url) + '&lp=' + (lp_url);

document.getElementsByTagName('head')[0].appendChild(script);

setTWShareEvent: function(){

var fb_share = document.getElementsByClassName('social-tw-share')[0];

if(fb_share){

var self = this;

fb_share.addEventListener('click', function() {

var winWidth = 520, winHeight = 350;

var winTop = (screen.height / 2) - (winHeight / 2);

var winLeft = (screen.width / 2) - (winWidth / 2);

var title = document.getElementById('meta_title').content;

var desc = document.getElementById('meta_desc').content;

var fb_share_url = 'http://pv.idomoo.com/fb_share.php?lp='+location.href+'&movieURL='+self.movie_url+'&title='+title+'&desc='+desc;

if (!self.movie_url){

return;

}

var img = self.movie_url.replace(".mp4", ".jpg");

var elms = document.getElementsByTagName('meta');

for (var i=0; i<elms.length; i++){

if (elms[i].getAttribute("property") === "og:image"){

elms[i].setAttribute("content", img);

}

window.open('http://twitter.com/share?text=' + encodeURIComponent(title) + '&url=' + encodeURIComponent(location.href), 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + 520 + ',height=' + 350);

}, false);

}

setFBShareEvent: function(){

var fb_share = document.getElementsByClassName('social-fb-share')[0];

if(fb_share){

var self = this;

fb_share.addEventListener('click', function() {

var winWidth = 520, winHeight = 350;

var winTop = (screen.height / 2) - (winHeight / 2);

var winLeft = (screen.width / 2) - (winWidth / 2);

var title = document.getElementById('meta_title').content;

var desc = document.getElementById('meta_desc').content;

var fb_share_url = 'http://pv.idomoo.com/fb_share.php?lp='+location.href+'&movieURL='+self.movie_url+'&title='+title+'&desc='+desc;

if (!self.movie_url){

return;

}

var img = self.movie_url.replace(".mp4", ".jpg");

var elms = document.getElementsByTagName('meta');

for (var i=0; i<elms.length; i++){

if (elms[i].getAttribute("property") === "og:image"){

elms[i].setAttribute("content", img);

}

window.open('http://www.facebook.com/sharer.php?s=100&t=' + encodeURIComponent(title) + '&u=' + encodeURIComponent(fb_share_url) + '&p[images][0]=' + encodeURIComponent(img), 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + 520 + ',height=' + 350);

}, false);

}

initGA: function(){

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function()

{ (i[r].q=i[r].q||[]).push(arguments)}

,i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-69451242-1', 'auto');

ga('send', 'pageview');

}

};

})();

IdmLP.init();

Adding in player 2.x code

Importing our player code

At the top of our page, inside of the <head></head> tag, along with the other imports we must insert our players script

HTML Amends

Then we need to go into the body of our HTML locate the div that is using idm-player as a CSS class and add the id property to our player’s div

id="idm-player"

We should also find and remove these two pieces of HTML as we won’t be needing them anymore

<div

id="playerButton"

class="play-button"

onclick="loadPlayer();">

</div>

Adding the player code

Our last step is to add in players 2.x’s version of what we previously removed, this should go in the bottom of your LP.

var player_options = {

// if using our videos by URL use src: url_of_video

// if using our videos by ID use build_url: "https://v.idomoo.com/",

width: 640,

size: "wide",

analytics_env: "us",

ratio: "16:9",

autoplay: false,

mute: true,

};

idmPlayerCreate(player_options, "idm-player");

</script>

Social sharing, GA Analytics

For projects that are using social sharing, google analytics, we may or may not have to import the following code ( updated version of what we removed in step 1)

function getQSParamNew() {

var query_string = {};

var query = window.location.search.substring(1);

var vars = query.split("&");

for (var i = 0; i < vars.length; i++) {

var pair = vars[i].split("=");

if (typeof query_string[pair[0]] === "undefined") {

query_string[pair[0]] = pair[1];

} else if (typeof query_string[pair[0]] === "string") {

var arr = [query_string[pair[0]], pair[1]];

query_string[pair[0]] = arr;

} else {

query_string[pair[0]].push(pair[1]);

}

return query_string;

}

var urlObject = getQSParamNew();

var vedioUrl = "";

if (urlObject) {

if (typeof urlObject.url != "undefined" && urlObject.url != "") {

vedioUrl = decodeURIComponent(urlObject.url);

} else {

vedioUrl =

"https://s3.amazonaws.com/web-assets.idomoo.com/production/demo_video.mp4";

}

} else {

vedioUrl =

"https://s3.amazonaws.com/web-assets.idomoo.com/production/demo_video.mp4";

}

Additional boilerplate methods created by Idomoo’s LP builder. Used by projects with social share buttons, GA.

(function () {

IdmLP = {

getQSParamNew: function () {

var query_string = {};

var query = window.location.search.substring(1);

var vars = query.split("&");

for (var i = 0; i < vars.length; i++) {

var pair = vars[i].split("=");

if (typeof query_string[pair[0]] === "undefined") {

query_string[pair[0]] = pair[1];

} else if (typeof query_string[pair[0]] === "string") {

var arr = [query_string[pair[0]], pair[1]];

query_string[pair[0]] = arr;

} else {

query_string[pair[0]].push(pair[1]);

}

return query_string;

init: function () {

this.getMovieURL();

this.setHDVideoBox();

this.setFBShareEvent();

this.setTWShareEvent();

this.initGA();

getMovieURL: function () {

var self = this;

var baseMovieUrl = document.getElementById("baseMovieUrl").value;

var movie_url = null;

if (baseMovieUrl && baseMovieUrl !== "") {

var movie_hash = this.getQSParamNew().id;

movie_url = baseMovieUrl + movie_hash + ".mp4";

} else {

movie_url = this.getQSParamNew().url;

}

this.movie_url = movie_url;

if (!movie_url) {

self.movie_url =

"https://s3.amazonaws.com/web-assets.idomoo.com/production/demo_video.mp4";

}

setHDVideoBox: function () {

var is_hd = this.getQSParamNew().hd;

if (is_hd && is_hd == 1) {

document.getElementById("wrap_content").style.maxWidth = "1280px";

}

setTWShareEvent: function () {

var fb_share = document.getElementsByClassName(

"social-tw-share"

)[0];

if (fb_share) {

var self = this;

fb_share.addEventListener(

"click",

function () {

var winWidth = 520,

winHeight = 350;

var winTop = screen.height / 2 - winHeight / 2;

var winLeft = screen.width / 2 - winWidth / 2;

var title = document.getElementById("meta_tw_title").content;

var desc = document.getElementById("meta_tw_desc").content;

var fb_share_url =

"http://pv.idomoo.com/fb_share.php?lp=" +

location.href +

"&movieURL=" +

self.movie_url +

"&title=" +

title +

"&desc=" +

desc;

if (!self.movie_url) {

return;

}

if (self.movie_url.indexOf(".mp4") != -1) {

var img = self.movie_url.replace(".mp4", ".jpg");

} else {

var img = self.movie_url.replace(".m3u8", ".jpg");

}

var elms = document.getElementsByTagName("meta");

for (var i = 0; i < elms.length; i++) {

if (elms[i].getAttribute("property") === "og:image") {

elms[i].setAttribute("content", img);

}

window.open(

"http://twitter.com/share?text=" +

encodeURIComponent(title) +

"&url=" +

encodeURIComponent(location.href),

"sharer",

"top=" +

winTop +

",left=" +

winLeft +

",toolbar=0,status=0,width=" +

520 +

",height=" +

350

);

false

);

}

setFBShareEvent: function () {

var fb_share = document.getElementsByClassName(

"share"

)[0];

if (fb_share) {

var self = this;

fb_share.addEventListener(

"click",

function (e) {

e.preventDefault();

var winWidth = 520,

winHeight = 350;

var winTop = screen.height / 2 - winHeight / 2;

var winLeft = screen.width / 2 - winWidth / 2;

var title = document.getElementById("meta_fb_title").content;

var desc = document.getElementById("meta_fb_desc").content;

var fb_share_url =

"https://services.idomoo.com/fb-share?lp=" +

location.href +

"&movieURL=" +

self.movie_url +

"&title=" +

encodeURIComponent(title) +

"&desc=" +

encodeURIComponent(desc);

if (!self.movie_url) {

return;

}

if (self.movie_url.indexOf(".mp4") != -1) {

var img = self.movie_url.replace(".mp4", ".jpg");

} else {

var img = self.movie_url.replace(".m3u8", ".jpg");

}

var elms = document.getElementsByTagName("meta");

for (var i = 0; i < elms.length; i++) {

if (elms[i].getAttribute("property") === "og:image") {

elms[i].setAttribute("content", img);

}

window.open(

"http://www.facebook.com/sharer.php?s=100&t=" +

encodeURIComponent(title) +

"&u=" +

encodeURIComponent(fb_share_url) +

"&p[images][0]=" +

encodeURIComponent(img),

"sharer",

"top=" +

winTop +

",left=" +

winLeft +

",toolbar=0,status=0,width=" +

520 +

",height=" +

350

);

false

);

}

initGA: function () {

(function (i, s, o, g, r, a, m) {

i["GoogleAnalyticsObject"] = r;

(i[r] =

i[r] ||

function () {

(i[r].q = i[r].q || []).push(arguments);

}),

(i[r].l = 1 * new Date());

(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);

a.async = 1;

a.src = g;

m.parentNode.insertBefore(a, m);

})(

window,

document,

"script",

"//www.google-analytics.com/analytics.js",

"ga"

);

ga("create", "UA-69451242-1", "auto");

ga("send", "pageview");

};

})();

IdmLP.init();

Upgrading old Landing Pages to Work with Player 2.X Version

Overview

Simplified player migration

Remove old player code

Advanced Guide

For this section we’ll be using american airlines lp as an example of what to look for and change in a slightly more complicated LP.

Remove old code

The first block

The next block

Adding in player 2.x code

Importing our player code

HTML Amends

Adding the player code

Social sharing, GA Analytics