Assumed Knowledge, and Supported Features

Required Knowledge

Developing your CloudTV™ application will be similar to developing a web application, and the CloudTV™ platform supports many of the features of HTML5, CSS3, and JavaScript. So in order to get started, basic knowledge of these is required.  There is no proprietary SDK tool, so use your favorite IDE or text editor.  Preliminary testing can be conducted using Google Chrome.  

The developer is expected to have a basic-to-intermediate level of understanding of web technologies before beginning development. This article is designed to give a brief overview of some of the basic web development concepts which should be understood before constructing an application.

Languages

Required

  • HTML5
  • CSS3
  • JavaScript

Optional

  • Back-end Langauges (PHP, Node.js, etc.)
  • JavaScript Libraries - (jQuery, Zepto) 

HTML5/HTML

The CloudTV Platform supports many of the old HTML tags as well as the newer HTML5 tags. The new <video> and <audio> tag elements will likely be the most featured within your CloudTV application as they provide a relevant and rich television experience.  Most video formats are supported.  The recommended containers are MPEG2 or H.264.  MKV file format is not supported.  For a more extensive list of supported media types, please refer to the downloadable article below, "CloudTV H5 Support."

As you may guess, the <canvas> tag element requires large bandwidth usage and is often unsuitable for a CloudTV application.

The standard for a CloudTV application consists of a hybrid of HTML5, CSS, and Javascript. For extra information regarding HTML5, the following are useful resources:

CSS3/CSS

Support is provided for CSS3 and CSS.  The CloudTV platform is based on WebKit, so use of the -webkit prefix is required for CSS3.  CSS3 rendering requires more CPU power, so use images instead of CSS3 effects whenever possible.  Animations and Transitions are supported, but when bandwidth limitations are imposed, try to use these sparingly.  When you do use them, add the ability to toggle these effects on and off so you can test which works best in your environment and for your application.  Often times a simple webkit-transform without an animation will look clean and will accomplish the same effect.  The CloudTV platform renders CSS more efficiently, so use CSS3 rather than JavaScript for all animations and transitions.  More information is available in the related article below, "Bandwidth Considerations."

CSS 3D is not supported at this time.

When considering design and CSS, always keep in mind that current focus is very important, so focused items are always pronounced with a "chaser."  A chaser is normally in the form of either a very noticeable border or a highlighted color change of an object or button.  For a web application, the cursor is normally available to you, but for CloudTV a chaser is necessary to distinguish the current focus.

CSS has become the backbone for styling of HTML content. CloudTV allows for the addition of both inline and external loading of CSS. Reference sites include these:

JavaScript

In many ways developing a CloudTV application is easier than developing for the web because you don't have to worry about the compatibility layers or coding for different web browsers.  If it works on the platform, it works!  We realize that developers like to use scripting libraries to aid in the development process, but look for libraries that do not contain workarounds for old web browsers.  You can use the jQuery.js, but that library contains layers of unnecessary compatibility.  We suggest using zepto.js as an alternative because it downloads and executes fast.

Building applications can be so simple that you will not need to use libraries. 

The de facto scripting language for CloudTV is an implementation of JavaScript defined for use on the CloudTV platform. Some good resources include these:

HTML DOM

The most common Document Object Model (DOM) event that is relevant to CloudTV applications is the "keydown" event.  With CloudTV applications, often there is only a remote control  to navigate your application.  This makes the up, down, left, right keys on a remote necessary for even the most basic navigation.

So you will need to add an event listener to the window and a function that handles the event.

For example:


window.addEventListener("keydown",handleKey);
function handleKey(event){
console.log("handleKey(event) function called. event.keyCode: "+event.keyCode+" pressed.");
}

Extra Knowledge

While not necessary for development, it would be useful to have some knowledge of additional web development technologies such as PHP, JavaScript Libraries, MySQL, and web APIs.

More Information

For more information on Supported Features please reference the CloudTV H5 Support document available for download below.

The linked document (below) describes what HTML5, CSSS3, and JavaScript elements, attributes, and scripts are available for use with the CloudTV H5™ Platform. The information provided in this document is based on specifications for future implementations. Therefore, the platform requirements provided here are subject to change.

CloudTV H5 HTML5 Support.pdf

  • Tuesday, 27 November 2012

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