Video Banner App (Youtube) - Harrenmedia Docs

This document provides a simple and straightforward description of how to work in this repository. There are some details to bear in mind about the project and what it expects from the same. If any piece of code that may cause any problem is found, it should be reported.

If you are encouraged to fix it, please submit a pull request with the changes.

Project Repository (Developers Only)

Clone your fork in order to work over it, if you got not a fork of the repository, just fork it.
Create a new directory inside the campaign directory in order to implement a new app, bear in mind that the new directory must have the same name of the campaign.
Most campaigns have a single html file, e.g: index.html. So you can create all the html files according to your needs.
The sources used for this app (production) have been compressed and located in the sources directory, those are based in the sources located in the html5 directory (development). The html file was compressed as well in order to get a better performance in the browsers.

Note:

In order to get a very good javascript code obfuscated, it must be minified before.

Tools used for the compression process

Name	Description
Google Closure Compiler	Tool to minify javascript code
Javascript Obfuscator	Tool to obfuscate javascript code
CSS Compressor	Tool to minify CSS content
HTML Compressor	Tool to minify HTML content

For a more complete reference about this example, just take a look at each use case in its environment.

Development

<!DOCTYPE html>
<html>
    <head>
        <title>Harrenmedia | Video Banner HTML5</title>
        <link href="css/video.css" rel="stylesheet" type="text/css">
        <link href="css/watermark.css" rel="stylesheet" type="text/css">
        <link href="css/socialme.css" rel="stylesheet" type="text/css">
        <script src="js/lib/video.js"></script>
        <script src="js/plugin/youtube.js"></script>
        <script src="js/plugin/watermark.js"></script>
        <script src="js/plugin/socialme.js"></script>
        <style type="text/css">
            .aux-quality-btn {
                right: 88px;
                bottom: 28px;
            }
            .aux-captions-btn {
                right: 87px;
                bottom: 30px;
            }
        </style>
    </head>
    <body>
        <video id="hm_video_banner" class="video-js vjs-default-skin" width="300" height="250"></video>
        <script type="text/javascript">
            var pixels = [
                { "second": Number.MIN_VALUE, "urls": ["https://secure.adnxs.com/px?id=42467&t=1"] },
                { "second": 10, "urls": ["https://secure.adnxs.com/px?id=42468&t=1"] },
                { "second": 20, "urls": ["https://secure.adnxs.com/px?id=42469&t=1"] },
                { "second": 30, "urls": ["https://secure.adnxs.com/px?id=42470&t=1"] },
                { "second": 40, "urls": ["https://secure.adnxs.com/px?id=42472&t=1"] },
                { "second": 50, "urls": ["https://secure.adnxs.com/px?id=42473&t=1"] },
                { "second": 60, "urls": ["https://secure.adnxs.com/px?id=42474&t=1"] },
                { "second": 90, "urls": ["https://secure.adnxs.com/px?id=42475&t=1"] },
                { "second": Number.MAX_VALUE, "urls": ["https://secure.adnxs.com/px?id=42476&t=1"] },
            ];

            var playerButtons = [
                { "button": "quality", "getElemClass": "vjs-quality-button", "setElemClasses": ["aux-quality-btn"] },
                { "button": "captions", "getElemClass": "vjs-captions-button", "setElemClasses": ["aux-captions-btn"] },
            ];

            var playerSettings = {
                clickable: true,
                controls: true,
                autoplay: false,
                playerId: "hm_video_banner",
                videoSrc: "https://www.youtube.com/watch?v=nKIu9yen5nc",
            };

            var pluginWatermark = {
                image: "img/harrenmedia.png",
                position: "TR",
                opacity: 0.5,
                clickable: true,
                url: "http://harrenmedia.com",
                pixel: "https://secure.adnxs.com/px?id=586464&t=1",
            };

            var pluginSocialme = {
                enabled: true,
                environment: "dev",
                position: "BL",
                opacity: 0.8,
                fblLang: "en_US",
                fblUrl: "https://www.facebook.com/harrenmediaItGroup?ref=hl",
                fblPix: "https://secure.adnxs.com/px?id=593176&t=1",
                twfLang: "en",
                twfUser: "harrenmediait",
                twfPix: "https://secure.adnxs.com/px?id=593178&t=1",
            };
        </script>
        <script src="js/main.js"></script>
    </body>
</html>

Production

<!DOCTYPE html><html><head><link href=../sources/css/video.min.css rel=stylesheet type=text/css><link href=../sources/css/watermark.min.css rel=stylesheet type=text/css><link href=../sources/css/socialme.min.css rel=stylesheet type=text/css><script src=../sources/js/lib/video.min.js></script><script src=../sources/js/plugin/youtube.min.js></script> <script src=../sources/js/plugin/watermark.min.js></script><script src=../sources/js/plugin/socialme.min.js></script> <style type=text/css>.aux-quality-btn{right:88px;bottom:28px}.aux-captions-btn{right:87px;bottom:30px}</style></head><body><video id=hm_video_banner class="video-js vjs-default-skin" width=300 height=250></video><script type=text/javascript>var pixels=[{second:Number.MIN_VALUE,urls:["https://secure.adnxs.com/px?id=42467&t=1"]},{second:10,urls:["https://secure.adnxs.com/px?id=42468&t=1"]},{second:20,urls:["https://secure.adnxs.com/px?id=42469&t=1"]},{second:30,urls:["https://secure.adnxs.com/px?id=42470&t=1"]},{second:40,urls:["https://secure.adnxs.com/px?id=42472&t=1"]},{second:50,urls:["https://secure.adnxs.com/px?id=42473&t=1"]},{second:60,urls:["https://secure.adnxs.com/px?id=42474&t=1"]},{second:90,urls:["https://secure.adnxs.com/px?id=42475&t=1"]},{second:Number.MAX_VALUE,urls:["https://secure.adnxs.com/px?id=42476&t=1"]},];var playerButtons=[{button:"quality",getElemClass:"vjs-quality-button",setElemClasses:["aux-quality-btn"]},{button:"captions",getElemClass:"vjs-captions-button",setElemClasses:["aux-captions-btn"]},];var playerSettings={clickable:true,controls:true,autoplay:false,playerId:"hm_video_banner",videoSrc:"https://www.youtube.com/watch?v=nKIu9yen5nc",};var pluginWatermark={image:"../sources/img/harrenmedia.png",position:"TR",opacity:0.5,clickable:true,url:"http://harrenmedia.com",pixel:"https://secure.adnxs.com/px?id=586464&t=1",};var pluginSocialme={enabled:true,environment:"prod",position:"BL",opacity:0.8,fblLang:"en_US",fblUrl:"https://www.facebook.com/harrenmediaItGroup?ref=hl",fblPix:"https://secure.adnxs.com/px?id=593176&t=1",twfLang:"en",twfUser:"harrenmediait",twfPix:"https://secure.adnxs.com/px?id=593178&t=1",};</script><script src=../sources/js/main.min.js></script></body></html>

Requirements

Video URL

To implement this app the main requirement is the youtube video url which is extracted from youtube.

Note:

Take a look at the video url example, it should look like:

https://www.youtube.com/watch?v=nKIu9yen5nc

As you can see, the entire video url is used.

Tracking Pixels

In order to start tracking through this app, we are going to need all the necessary tracking pixels that will be configured into the app, then we'll be able to track the amount of plays, time reproduced in a determinated range of time and the completed views of the video.

The video banner has been prepared to track any time reproduced per each user through the itself video duration, in such a way this functionality allow us to have a tracking about the amount of views and plays that the video has had.

These settings are configured (assigned) through a <script type="text/javascript">...</script> tag created in the .html file where the video banner is going to be implemented.

Parameters

Player Settings

All the settings for the video player are set through a javascript object playerSettings which is created in the .html file, momentarily this app supports a single playback technology (youtube).

It may be configure as follows:

var playerSettings = {
    clickable: true,
    controls: true,
    autoplay: false,
    playerId: "hm_video_banner",
    videoSrc: "https://www.youtube.com/watch?v=nKIu9yen5nc",
};

Name	Value	Description
clickable	true / false	Enables the functionality for click tracking
controls	true / false	Enables the default videojs controls
autoplay	false / true	Sets the video to be autoplay
playerId	`"hm_video_banner"`	Tag ID for the video container
videoSrc	`"https://www.youtube.com/watch?v=nKIu9yen5nc"`	Video source (Youtube URL)

Note:

The parameters clickable, controls and autoplay must be defined in the player settings because these have not values by default.

Tracking Settings (Video Playing)

All the pixels used for tracking time in the video banner are passed through an array, each period of time can trigger more than a single pixel. The pixels used for tracking plays are passed through the Number.MIN_VALUE parameter, the urls parameter gets all the pixels that will be triggered through this event, in the same way for the Number.MAX_VALUE parameter, e.g.

var pixels = [
    { "second": Number.MIN_VALUE, "urls": ["https://secure.adnxs.com/px?id=42467&t=1"] },
    { "second": 10, "urls": ["https://secure.adnxs.com/px?id=42468&t=1"] },
    { "second": 20, "urls": ["https://secure.adnxs.com/px?id=42469&t=1"] },
    { "second": 30, "urls": ["https://secure.adnxs.com/px?id=42470&t=1"] },
    { "second": 40, "urls": ["https://secure.adnxs.com/px?id=42472&t=1"] },
    { "second": 50, "urls": ["https://secure.adnxs.com/px?id=42473&t=1"] },
    { "second": 60, "urls": ["https://secure.adnxs.com/px?id=42474&t=1"] },
    { "second": 90, "urls": ["https://secure.adnxs.com/px?id=42475&t=1"] },
    { "second": Number.MAX_VALUE, "urls": ["https://secure.adnxs.com/px?id=42476&t=1"] },
];

Plugins Integration

As in the player settings, each plugin has its own settings which are passed through a javascript object and its name is related to its respective plugin.

Watermark

Basically this plugin creates an image object and makes it to behave as a watermark inside the video player.

In order to use it, we need to create a javascript object for this plugin, the object name was predefined and called pluginWatermark, so it may be used as follows:

var pluginWatermark = {
    ...
    image: "http://path-or-url-to-the-image.png",
    ...
};

Name	Value	Description
image	`"img/harrenmedia.png"`	Client logo (local path or remote URL)
position	`"TL"` / `"TR"` / `"BL"` / `"BR"` / `"CC"`	Image position (top left / top right / bottom left / bottom right / centered)
opacity	0.5	Image opacity numeric value
clickable	true / false	It makes the image clickable (false is set by default)
url	`"http://harrenmedia.com"`	Landing page
pixel	`"https://secure.adnxs.com/px?id=586464&t=1"`	Pixel for the landing page (post clicked)

This plugin creates an object containing a like button (facebook) and a follow button (twitter). Additionally it has the possibility to make them behave as a watermark inside the video player.

In order to use it, we need to create a javascript object for this plugin, the object name was predefined and called pluginSocialme, so it may be used as follows:

var pluginSocialme = {
    ...
    environment: "dev",
    ...
};

Name	Value	Description
enabled	true / false	Enables the plugin (false is set by default)
environment	`"dev"` / `"Dev"` / `"DEV"` / `"development"` / `"Development"` / `"DEVELOPMENT"` / `"prod"` / `"Prod"` / `"PROD"` / `"production"` / `"Production"` / `"PRODUCTION"`	Sets the current environment where the app is going to run. It's required for facebook apps due to they use an app ID. ("dev" is set by default)
position	`"TL"` / `"TR"` / `"BL"` / `"BR"` / `"CC"`	Object position (top left / top right / bottom left / bottom right / centered)
opacity	0.8	Object opacity (numeric value)
fblLang	`"en_US"` / `"en_GB"` / `"es_LA"` ...	Language for the like button, values provided by facebook, just take a look at the API. (`"en_US"` is set by default)
fblUrl	`"https://www.facebook.com/harrenmediaItGroup?ref=hl"`	Facebook fanpage URL
fblPix	`"https://secure.adnxs.com/px?id=593176&t=1"`	Pixel for tracking likes
twfLang	`"en"` / `"es"` ...	Language for the follow button, values provided by twitter, just take a look at the API. (`"en"` is set by default)
twfUser	`"harrenmediait"`	Twitter account (username). It must be set without `@`
twfPix	`"https://secure.adnxs.com/px?id=593178&t=1"`	Pixel for tracking followers

Additional Settings

Player Buttons

After resizing the video player to a rich media format, there were some small inconvenients in its look and feel. The buttons like quality and captions were displayed under the video player, that’s why we added some additional settings for them.

Like in the array of pixels, we can control them by parameters, we pass each button name through the button parameter and then it is found by its class name passed through the getElemClass parameter, the setElemClasses assigns the new classes (styles) for these buttons. e.g.

var playerButtons = [
    { "button": "quality", "getElemClass": "vjs-quality-button", "setElemClasses": ["aux-quality-btn"] },
    { "button": "captions", "getElemClass": "vjs-captions-button", "setElemClasses": ["aux-captions-btn"] },
];

Video Banner (Youtube HTML5 Video Player)

Project Repository (Developers Only)

Tools used for the compression process

Development

Production

Requirements

Video URL

Tracking Pixels

Video Banner Settings

Parameters

Player Settings

Tracking Settings (Video Playing)

Plugins Integration

Watermark

Additional Settings

Player Buttons

Video Banner (Youtube HTML5 Video Player)

Project Repository (Developers Only)

Tools used for the compression process

Development

Production

Requirements

Video URL

Tracking Pixels

Video Banner Settings

Parameters

Player Settings

Tracking Settings (Video Playing)

Plugins Integration

Watermark

Socialme (Social Media)

Additional Settings

Player Buttons