Video Advertising Suite

Docs

> Documentation-Index > Implementation Guide

HbbTV Sample App

Implementation Guideline

1. Player Prerequisite: The Player API

As the very first step we create a Video Player based on CE-HTML that meets the following preconditions:

  • Basic Video Player features can be controlled through JavaScript
    • Loading a video source file
    • Listening to load and playback changes
    • Changing the playback state
  • The features can be accessed through a common interface (the Player API)

The sample app prefers the CE-HTML video object because the HTML5 video element is only supported by some modern SmartTVs.

index.html

<!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Simple HbbTV App</title>
        <meta http-equiv="Content-Type" content="application/vnd.hbbtv.xhtml+xml; charset=utf-8"/>
        <script type="text/javascript" crossorigin="anonymous" src="js/main.js"></script>
    </head>
    <body>
        <div class="videoplayer">
            <div class="videoplayer__video" id="js-example-player">
                <object type="video/mp4" id="myvid" data="https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4" width="640" height="480"></object>
            </div>
        </div>
    </body>
</html>

Extract from the index.html :: Video object and Player API (main.js)

main.js

window.onload = function() {

    // The CE-HTML VideoObject interface covers methods and properties to load, play and monitor a video.
    // Therewith we have it already, that is the most simple Player API.
    window.playerAPI = document.getElementById('myvid');

    // Detects whether we run in a HbbTV channel and registers our sample app.
    initHBBTV = function () {
        var app = document.getElementById('oipfAppMan');
        if (app && app.getOwnerApplication) app = app.getOwnerApplication(document);
        if (app && app.show) app.show(); // needed to show the HbbTV app on screen
        if (app && app.activate) app.activate();
        if (app && app.privateData) app.privateData.keyset.setValue(0x33F); // color + nav + vcr + numeric + alpha
    };

    initHBBTV();
}

Extract from the main.js :: Simple Player API

Next: Installing the smartclientcore
Top: Implementation Guide Overview