ActiveVideo Framework Overview

Overview

ActiveVideo provides several libraries to make development easier and faster. By adding just the av.js library, you will have access to all of the ActiveVideo libraries and methods. This article will describe how to add this library, detail some of the features, and show some examples of how to intergrate a few features of av.js.

ActiveVideo av.js Set Up

Download avhtml

  1. Click the Tools tab on the developer community page.
  2. Select ActiveVideo Framework (avhtml).
  3. Download av.js (the latest version) into the top level ("test") of your project.
  4. After downloading it, unzip it into a folder (named "avhtml")  in your project. (When you unzip it, it should automatically create the "avhtml" folder, as shown in the example below.)

avhtml-download-2

Add the av framework and configuration files to your HTML page as follows:

<script charset="UTF-8" type="text/javascript" src="/../scripts/avhtml/av.js"></script>

You can place the scripts and configs whereever you like but the pathing shown in the example represent ActiveVideo Best Practices. av.js is the main ActiveVideo library to include. This allows you to take advantage of all of the prewritten libraries and methods, including (among many others) logging, cookies, keyboard manipulation, and more.

Including just this one file is all you need to get started. More details on configuration of libraries will be shown later starting at the 'Configuration' section. Below are some examples of how to use the av.js libary.

Example: Logging with the av.js library

Once you've included the av.js file in your html page, your javascript can use logging as follows:

av.log.debug("Here is a debug statement");
av.log.error("Here is an error output statement");

These will both print output to the console (The CloudTV Player Logging window if running in CloudTV Player). As noted in the Configuration section, setting the av.logLevel will adjust what types of output gets sent to the console.

av.log.debug("Prints when av.logLevel is 0");
av.log.info("Prints when av.logLevel is 1 or less");
av.log.warn("Prints when av.logLevel is 2 or less");
av.log.error("Prints when av.logLevel is 3 or less");
av.log.fatal("Prints when av.logLevel is 4 or less");

The benefit of using av.log.debug() instead of console.log() directly is that you can easily disable them when going live, or only enable error() messages.

Example: Saving data to cookies

Adding just one line of code (in addition to including the av.js file) will allow you to use cookies in seconds.

av.require('storage.cookies');

Now you can set a cookie or get a cookie if you believe it already exists

var success = av.storage.cookies.set('myappcookiename', "variable or object", Date.now() + 10000);
if(success) {
av.log.debug("Successfully set cookie to new default ZIP")
}
else {
av.log.warning("Failed to set cookie to new default ZIP");
}
var cookie = av.storage.cookies.get('myappcookiename', true);

For a full listing of libaries methods as well as details on the functionality, see "ActiveVideo Framework Libraries" in the Related Articles section below.

ActiveVideo av.js Configuration

Add the following to your HTML page to include configuration files:

<script charset="UTF-8" type="text/javascript" src="/../configs/avconfig.js"></script>
<script charset="UTF-8" type="text/javascript" src="/../configs/avlocalize.js"></script>

avconfig.js will contain your main global configuration parameters. avlocalize.js allows you to specify an overriding config specific to your deployment. This configuration file set up is not required to be done exactly like this, but following this ActiveVideo Best Practice will help you later when trying to use the ActiveVideo Library.

avconfig.js will look something like this:

window.config = {
//Application configuration parameters
app : {
version : '1.2.3',
appName : 'My Application',
lastModified : '20130101',
// You can add some custom information here:
appTimeout : 10000, 
},
// You can also add custom information here
custom_apidata : {
posturl : "<a href="http://activevideo.com/something.php""></a><a href="http://activevideo.com/something.php">http://activevideo.com/something.php</a>",
},
// List below are some AV Library Defaults
//AV Library defaults
av : {
logLevel : 0,
logLevelLibs: 0,
libraries : '',//libraries to load at runtime
//These should have more than 1 item in the list, so DIAGNOSTICS is just 
//one of them, but also is expandable
diagnostics : 1,//0--> no, 1-->via magic keycode (UUDDLRLR), 2-->loading screen
diagnosticsURL : '',
},
//RSP Configuration Defaults
apis : {
rsp : {
host : '',
apiKey : '',
logLevel: '',
maxTries: 2,
},
},
//Custom Keyboard Configuration
keyboard : {
},
storage : {
//Browser Cookies
cookies : {
}
},
};

You will notice that you can set configurations for different parts of the ActiveVideo Library in the avconfig.js file. For example, you can set the logLevel (av->logLevel) to 0-5; this will affect the logging that gets sent to the console.

avlocalize.js will look something like this:

// localConfigFile points to another config you would like to use in a given environment
var localConfigFile = "config-dev.js";
//var localConfigFile = "config-sqa.js";
//var localConfigFile = "config-production.js";
/* ********* DO NOT CHANGE BELOW ***********************************
/* ********* In production, the launch URL or AVPKG settings will **
/* ********* override what appears above. This is ******************
/* ********* to ensure a consistent means to alter the *************
/* ********* configuration file via URL or package parameters*******
/* ********* config=xyz.js ************************************** */
if(navigator && navigator.getParameter && navigator.getParameter('config')){
localConfigFile = navigator.getParameter('config');
}else if(location.href.indexOf('config=') != -1){
localConfigFile = location.href.substring(location.href.indexOf('config=')+7);
if(localConfigFile.indexOf('&') != -1 ){
localConfigFile = localConfigFile.substring(0, localConfigFile.indexOf('&'));
}
localConfigFile = decodeURIComponent(localConfigFile);
}
if(localConfigFile != ''){
localConfigFile = localConfigFile.indexOf('://') != -1 ? localConfigFile : '../configs/'+localConfigFile;
//write to head synchronously if in browser
if(typeof(document.write) == 'function'){
document.write('<scr'+'ipt type="text/javascript" src="'+localConfigFile+'"></sc'+'ript>');
}else{
var scriptElement = document.createElement('script');
scriptElement.setAttribute('src',localConfigFile);
scriptElement.setAttribute ("type", "text/javascript");
scriptElement.setAttribute("charset", "UTF-8");
document.getElementsByTagName('head').item(0).appendChild(scriptElement);
}
}

2 Ways to Load Libraries

  1. Using Script tags: (the benefit of this method is that if errors are thrown, the line numbers will be available in the console of where the error occurred)
    1. <script src="/../scripts/avhtml/av.js"></script>
    2. <script src="/../scripts/avhtml/storage.cookies.js"></script>
  2. Using av.require()
    1. <script src="/../scripts/avhtml/av.js"></script>
    2. <script>av.require('storage.cookies.js');</script>
  • Monday, 21 January 2013

AV Javascript Framework Documentation

The primary goal of the avhtml framework is to speed up development, improve stability, and ensure a cohesive feel throughout all applications built for CloudTv.

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2017 Active Video Networks. All Rights Reserved