NAV
     

Anvato Fire TV SDK

Introduction

Anvato Fire TV Framework allows application developers to securely play ad-stitched videos on Amazon Fire TV devices. Both stream security and analytics are integrated into the framework. You need the following for testing and integration:

Quick Start

How to use Anvato Fire TV Framework

Set viewport and include anvfire.min.js and anvfire.css

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://qa.up.anv.bz/firetvsdk/anvfire.css" />
<script type="text/javascript" src="http://qa.up.anv.bz/firetvsdk/scripts/anvfire.min.js"></script>

You need to set viewport and include library and stylesheet in your <head> tag.



Instantiate the framework object

<script type="text/javascript">
    var anvf = new ANVF();
</script>

Create the framework object under the <body> tag by creating a new ANVF object, you can pass configuration for video and tracking here (as shown in Plugins section) or can initialize the framework with an empty constructor.



Add Event Listeners

anvf.on("playlistLoaded",function(videoItems){ 
    anvf.play(0); 
    // This line plays the first item from playlist
});

You should attach a listener to the event playlistLoaded using .on function, a simple listener that plays the first video when the framework is loaded is given below.



Initialize the framework

Single video: anvf.init({ mcp : "qa" , video: "51" });
Playlist: anvf.init({ mcp : "qa" , playlist: "53" });
Playlist from video IDs: anvf.init({ mcp : "qa" , playlist: ["52","32","60"] });

Call the init function. You can pass the video information as a Javascript object here. Optionally, you can pass your configuration by passing a “config” (as shown in Use Cases section) before initializing the framework to set your accessKey, accessControl, video and other parameters.

The structure of a Fire TV Application

Remote controller events

Amazon Fire TV Remote Controller has 9 buttons that can be used in a Web App. Anvato Fire TV Framework forwards the buttons using 3 events, buttonPress, buttonRepeat, and buttonRelease. By attaching listeners to these events and comparing the keyCode passed to the listeners to the constants defined in <anvfObject>.BUTTONS, you can control your UI. The constants are defined in Reference Guide.

anvf.on("buttonPress",function(keyCode){
    switch(keyCode){
        case anvf.BUTTONS.UP:
            alert("UP");
            break;
        case anvf.BUTTONS.PLAY_PAUSE:
            ...
    }
});

State change events

You can use the state change callbacks to synchronize your UI in background with the Anvato Player, state change events include playlistLoaded, videoStarted, videoPaused etc.

Parameters passed to all listeners are explained in the API Reference.

User Interface

We suggest that you build a user interface using HTML5, CSS and Javascript in 1920x1080 resolution, which renders the playlist and provides user a way to navigate via remote control.

Reference Guide

API Methods

play(videoIndex)

Plays the video at playlist index, for example, to play the first video, play(0) should be called.

play(videoId)

Plays the video with the specified MCP ID, to play the video with id "channel", play("channel") should be called.

pause()

Pauses the video.

resume()

Resumes the video.

catchLive()

Seeks to the current time in live stream

seekTo(time)

Seeks the video to the given time (in seconds)

stop()

Stops the video and removes overlay

getTitle()

Returns title of the video

getDescription()

Returns description of the video

getCurrentTime()

Returns current time of the video

getDuration()

Returns duration of the video

getCaptionLanguages()

Returns the available closed caption languages

showCaption(language)

Shows captions, language should be passed in 2 character format

getPlaylistInfo()

Returns the playlist items as an array, each item is in given format,

{
    id: 1,
    title: “Some Title”,
    description: “Description”,
    image: “http://thumbnail.image.com”,
    duration: 100,
}

getPlaylistItem(index)

Returns the item that is at the given index

exit()

Prompts the user and exits the Web App

init(data)

Initializes the Anvato Player with the given data

on(event,function)

Adds the given function as a listener to the given event

showLoading()

Shows the loading animation with an overlay

hideLoading()

Hides the loading animation

getContainer()

Returns the player container object, you can use this to hide or show the player

updatePlugin(pluginName,config)

Updates the plugin configuration, to update plugin named "freewheel", updatePlugin("freewheel",updatedConfig) should be called

updateMvpd(mvpd)

Updates the mvpd

isVisible()

Returns if the player is visible, can be used in button events to ignore unnecessary button presses.

Events

playerReady

Triggers when player is ready, metadata and playback related API functions are only available after this event

playlistLoaded

Passes video array to the listener

buttonPress

Passes the key code of the button pressed to the listener.

Parameter Type Definition
keyCode Integer One of the keycodes from anvfObject.BUTTONS

buttonRepeat

Passes the key code of the button to the listener while it's not released.

Parameter Type Definition
keyCode Integer One of the keycodes from anvfObject.BUTTONS

buttonRelease

Passes the key code of the button released to the listener.

Parameter Type Definition
keyCode Integer One of the keycodes from anvfObject.BUTTONS

videoStarted

Triggers when video is started

videoPaused

Triggers when video is paused

videoStopped

Triggers when video is stopped by user

videoEnded

Triggers when video ends naturally

loadingOn

Triggers when loading screen is shown

loadingOff

Triggers when loading screen is hidden

presentationUpdated

Triggers periodically while the video is playing, passes 3 parameters to callback function

Parameter Type  Definition
currentTime Integer  Current time in seconds
duration  Integer  Total time in seconds
contentType String  "ad" or "content" depending on current content

playerError

Triggers when an error happens.

Constants

Available Buttons

var anvfObject = new ANVF();
...
anvfObject.BUTTONS.UP //it can be accessed after initializing
...
Button Definition
BUTTONS.UP  Up key on D-pad
 BUTTONS.DOWN Down key on D-pad
BUTTONS.LEFT  Left key on D-pad
BUTTONS.RIGHT  Right key on D-pad
BUTTONS.SELECT Select key on D-pad
BUTTONS.BACK Back key
 BUTTONS.REWIND Rewind key
 BUTTONS.PLAY_PAUSE  Play/Pause key
 BUTTONS.FAST_FORWARD Fast Forward key

Configurables

You may pass these to the constructor of the ANVF object as shown in Use Cases sample code.

 control

Indicates if the default controller is visible. Default value is true. You can use this to render your own controller overlay.

 loading

Indicates if the default loading screen is visible. Default value is true. You can use this to render your own loading screen.

Use Cases

Single Live Video

This example shows how a live video can be played.

<!DOCTYPE html>
<head>
    <meta id="viewport" name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="FIRETV_SDK_LOCATION/anvfire.css" />
    <script type="text/javascript" src="FIRETV_SDK_LOCATION/scripts/anvfire.min.js"></script>
</head>
<body>
    <script>
        var anvf = new ANVF({
            config : { // add access key for mcp
                accessKey: <YOUR_ACCESS_KEY>,
                mcp: <MCP_ID>,
                video: <VIDEO_ID>
            },
            control: false // hide default controller
        });
        anvf.on("playlistLoaded",function(items){
            anvf.play(0); // auto start video when playlist is loaded
        });
        anvf.on("videoStopped",function(){
            window.open('', '_self').close(); // close when video stops
        });
        anvf.init(); // initialize framework
    </script>
</body>

Playlist

<!DOCTYPE html>
<head>
    <meta id="viewport" name="viewport" 
    content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="FIRETV_SDK_LOCATION/anvfire.css" />
    <script type="text/javascript" src="FIRETV_SDK_LOCATION/scripts/anvfire.min.js"></script>
</head>
<body>
    <script>
        var anvf = new ANVF({ // passing the playlist information to the framework
            config: {
                mcp: <MCP_ID>,
                playlist: [<VIDEO_ID_1>, <VIDEO_ID_2>]
            }
        });
        anvf.on("playlistLoaded",startPlaylist); // set the required callbacks
        anvf.on("videoEnded",playNextVideo);
        anvf.on("videoStopped",closeWindow);
        var currentIndex = 0; // first video
        var totalItems = 0;
        function startPlaylist(items){
            totalItems = items.length;
            playNextVideo();
        }
        function playNextVideo() {
            if(currentIndex == totalItems) // close window when playlist ends
                closeWindow();
            anvf.play(currentIndex); // start from current video
            currentIndex++;
        }
        function closeWindow(){
            window.open('', '_self').close();
        }
        anvf.init();
    </script>
</body>

Using Android SDK to play the videos

You can also use Anvato Android SDK to play the videos, in this mode, remote controller button events are received by javascript and passed to the Android SDK. Hybrid solution can be used for increased performance and support for more media types. In order to use the hybrid solution, you should follow the steps listed below,

<com.anvato.androidsdk.anvatofiretvsdk.AnvatoFireTVUI
    android:id="@+id/anvatoFireTVUI"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="visible" />

 Set Up Android Project

    anvatoFireTVUI = (AnvatoFireTVUI) findViewById(R.id.anvatoFireTVUI);
    anvatoFireTVUI.setPlayerWebView(appWebView); // App WebView that contains the app
    anvatoFireTVUI.setAnvatoConfigKeys(anvack, seckey); // Anvack key and secret key
    mWebView.addJavascriptInterface(anvatoFireTVUI.getJavascriptInterface(), anvatoFireTVUI.getJavascriptInterfaceName());

Download the Anvato Fire TV Android SDK and Anvato Android SDK, and add them to your project

Add an AnvatoFireTVUI element in your layout, an example is given to the right.

After creating the element, you should set up the AnvatoFireTVUI by setting webview, config keys and attaching the javascript interface to your webview, all of these should be inside the onCreate function of your activity.

Hybrid solution automatically displays the video overlay and hides the webview when it's necessary.

Set Up Javascript

Include anvfire-hybrid.min.js instead of anvfire.min.js

var anvf = new ANVF({
    config: {
        ...
        externalVideoInterface: true
    }
});

Pass externalVideoInterface: true to the ANVF object