Viewing Shared Media

Overview

The AVPlay extends the functionalities of the media player for Tizen TV. The APIs provided by AVPlay will help you to play, control, and handle different media like streamed videos in your web application. This tutorial includes steps on how to create a sample application for Tizen TV that uses the AVPlay APIs as well as the steps on how to register and recognize the input from a remote control.

As a prerequisite, the developer is expected to have a basic knowledge in developing Tizen web applications in order to keep up with the steps in creating the sample app.

Figure 1 the AVPlay Sample app playing a streamed video

Figure 1 the AVPlay Sample app playing a streamed video

Setting up the Environment

Below are the requirements for developing the AVPlay Sample application for Tizen TV. Navigate to SamsungDForum (http://www.samsungdforum.com/TizenDevtools/SdkDownload ) to download the following.

  • Tizen IDE

  • Samsung Tizen TV SDK

  • Samsung TV Emulator

Step 1. Creating a New Project

a. Launch the Samsung TV IDE and create an Empty Project. In this tutorial, VSMSample will be used as the project name.

Figure 2 New Tizen Web Project dialog

Figure 2 New Tizen Web Project dialog

b. In the Project Explorer, expand the VSMSample project and review the contents.

Figure 3 The VSMSample Project

Figure 3 The VSMSample Project

c. In the style.css file, modify the stylings as shown in the codes below. This will set the appearance of the sample app like fonts, background colors, etc.

body {
background-color: #034EA2;
color: #FFFFFF;
font-size: 30px;
}
h1 {
color: #FFFFFF;
font-size: 30px;
text-align: center;
}
#url {
font-size: 30px;
width: 1590px;
}
.center {
margin-left: auto;
margin-right: auto;
width: 1600px;
}
.right {
float: right;
}

Step 2. Adding Basic Visual Elements in HTML

a. Modify the index.html as shown below. This file will include the basic elements needed by the sample app like the url input, player, and labels.

<head>
	<title>VSMSample</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script src="./main.js"></script>
</head>
<body>
<div class="center">
	<h1>View Shared Media</h1>
	<input id="url" type="text" value="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_surround-fix.avi"></input>

	<span id="currentTime">0:0:0</span> <span> / </span> <span id="totalTime">0:0:0</span>
	<span id="status" class="right">Press ENTER to edit media URL</span>
</div>
</body>

b. In order to use the APIs for AVPlay, the webapis javascript file should also be added in index.html as shown below. The script specifies the location in the ECMAScript hierarchy in which the Samsung Tizen TV Product API is instantiated. For more information about Samsung Product APIs, click this.

<script src="$WEBAPIS/webapis/webapis.js"></script>

c. Lastly, declare an object element for the AVPlayer.

<object id='av-player' type='application/avplayer' style="width:1600px;height:900px; "></object>

Step 3. Declaring Privileges and Policies

a. Open the config.xml and declare the following privilege to allow the application to receive input device events.

<tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>

b. Next, declare the following privilege to allow the application to access the AVPlay APIs.

<tizen:privilege name="http://developer.samsung.com/privilege/avplay"/>

c. Lastly, declare the following policy to gain network access.

<access origin="*" subdomains="true"></access>

Step 4. Preparing the Main JavaScript File

a. In the main.js, declare the window.onload function and register a remote controller key by using tizen.tvinputdevice.registerKey(KeyName) as seen below.

window.onload = function() {
	tizen.tvinputdevice.registerKey("MediaPlayPause");
};
Note

The default remote controller keys include the four directional keys (ArrowLeft, ArrowUp, ArrowRight, and ArrowDown), the Enter key, and the Back/Exit key. Default keys can be used regardless of no registering. Other keys should be registered before use.

b. Create an exitApp function and use tizen.tvinputdevice.unregisterKey(KeyName) to unregister a remote controller key.

window.onload = function() {…}
var exitApp = function() {
	tizen.tvinputdevice.unregisterKey("MediaPlayPause");
	tizen.application.getCurrentApplication().exit();
};

c. Declare the following KeyNames and KeyCodes supported by Samsung Tizen TV.

var KEY_MEDIA_PLAYPAUSE = 10252;
var KEY_ARROW_LEFT = 37;
var KEY_ARROW_UP = 38;
var KEY_ARROW_RIGHT = 39;
var KEY_ARROW_DOWN = 40;
var KEY_ENTER = 13;
var KEY_BACK = 10009;
var KEY_EXIT = 10182;

window.onload = function() {…}
var exitApp = function() {…}

d. Use the code below to calculate the play time of the media file.

…

var updateDuration = function() {
	var duration = webapis.avplay.getDuration();
	document.getElementById("totalTime").innerHTML = Math.floor(duration / 3600000) + ":" + Math.floor((duration / 60000) % 60) + ":" + Math.floor((duration / 1000) % 60);
};

var updateCurrentTime = function(currentTime) {
	if (currentTime == null) {
		currentTime = webapis.avplay.getCurrentTime();
	}
	document.getElementById("currentTime").innerHTML = Math.floor(currentTime / 3600000) + ":" + Math.floor((currentTime / 60000) % 60) + ":" + Math.floor((currentTime / 1000) % 60);
};

window.onload = function() {…}
var exitApp = function() {..}

Step 5. Using the AVPlay API

Many features are provided in the AVPlay API to help you create your own web application. The AVPlay player goes into several states that are changed by AVPlay processes or functions. Please note that some functions may require some specific states for them to work or else it will throw an exception.

Figure 4 The AVPlay States

Figure 4 The AVPlay States

a. In the main.js file, declare the openVideo function, use webapis.avplay.open(url) method to instantiate the player object and take url as input parameter. Use webapis.avplay.setListener() method to associate event callback listeners with the AVPlay instance.

var openVideo = function() {
	var url = document.getElementById("url").value;
	webapis.avplay.open(url);
	webapis.avplay.setListener(listener);
};

b. Declare the prepare function and use webapis.avplay.prepare() method to prepare the media player for playback. Create a variable named avPlayerObj and assign it with the player object. Use webapis.avplay.setDisplayRect() to set the display area and use webapis.avplay.setDisplayMode() to set the screen mode.

var prepareVideo = function() {
	webapis.avplay.prepare();
	var avPlayerObj = document.getElementById("av-player");
	webapis.avplay.setDisplayRect(avPlayerObj.offsetLeft, avPlayerObj.offsetTop, avPlayerObj.offsetWidth, avPlayerObj.offsetHeight);
	webapis.avplay.setDisplayMethod("PLAYER_DISPLAY_MODE_FULL_SCREEN");
	updateDuration();
};

c. Declare the playVideo function and use webapis.avplay.play() method to start or resume the playback of the stream.

var playVideo = function() {
	webapis.avplay.play();
};

d. Declare the pauseVideo function and use webapis.avplay.pause() method to pause the playback of the stream.

var pauseVideo = function() {
	webapis.avplay.pause();
};

e. Declare the stopVideo function and use webapis.avplay.stop() method to stop the playback of the stream.

var stopVideo = function() {
	webapis.avplay.stop();
	updateCurrentTime();
};

f. Declare the closeVideo function and use webapis.avplay.close() method to stop the current video and destroy the avplay object.

var closeVideo = function() {
	webapis.avplay.close();
};

g. Declare the jumpBackwardVideo function and use webapis.avplay.jumpBackward(time) method to rewind the current video by a specified number of milliseconds.

var jumpBackwardVideo = function(time) {
	webapis.avplay.jumpBackward(time);
};

h. Declare the jumpForwardVideo function and use webapis.avplay.jumpForward(time) method to forward the current video by a specified number of milliseconds.

var jumpForwardVideo = function(time) {
	webapis.avplay.jumpForward(time);
};

Step 6. Adding Event Listener for the Remote Control Keys

In this step, you will call the AVPlay related functions based on the event triggered by the remote controller.

a. In main.js, add eventListener for each of the registered remote control keys.

document.addEventListener('keydown', function(e) {
	switch(e.keyCode){
	case KEY_MEDIA_PLAYPAUSE:
	break;
	case KEY_ARROW_LEFT:
	break;
	case KEY_ARROW_UP:
	break;
	case KEY_ARROW_RIGHT:
	break;
	case KEY_ARROW_DOWN:
	break;
	case KEY_ENTER:
	break;
	case KEY_BACK:
	break;
	case KEY_EXIT:
	break;
}
});

b. When the "keydown" event for "MediaPlayPause" key has been triggered:

  • If the video is paused, call the playVideo function to resume the video;

  • If the video is playing, call the pauseVideo function to pause the video;

  • If the video is neither paused nor playing, auto-play the video. Auto playing the video should follow this sequence: openVideo -> prepareVideo -> playVideo.

  • Remove focus from the url input.

case KEY_MEDIA_PLAYPAUSE:
if(webapis.avplay.getState() == "PAUSED") playVideo();
	else if(webapis.avplay.getState() == "PLAYING") pauseVideo();
else {
	if(webapis.avplay.getState() == "NONE") openVideo();
	if(webapis.avplay.getState() == "IDLE") prepareVideo();
	if(webapis.avplay.getState() == "READY") playVideo();
}
document.getElementById("url").blur();
break;

c. When the "keydown" event for "ArrowLeft" key has been triggered, and the video is playing or paused, call the jumpBackwardVideo function to rewind the video.

case KEY_ARROW_LEFT:
	if(webapis.avplay.getState() == "PAUSED" || webapis.avplay.getState() == "PLAYING")
		jumpBackwardVideo(1000);
	break;

d. When the "keydown" event for "ArrowRight&qquot; key has been triggered, and the video is playing or paused, call the jumpForwardVideo function to fast-forward the video.

case KEY_ARROW_RIGHT:
	if(webapis.avplay.getState() == "PAUSED" || webapis.avplay.getState() == "PLAYING")
		jumpForwardVideo(1000);
	break;

e. When the "keydown" event for "Enter" key has been triggered, and the video is playing or paused, call the closeVideo function and give focus to url input.

case KEY_ENTER:
	if(webapis.avplay.getState() == "PAUSED" || webapis.avplay.getState() == "PLAYING")
		closeVideo();
	document.getElementById("url").focus();
	break;

f. When the "keydown" event for "Back" key has been triggered, and the video is playing or paused, call the closeVideo function.

case KEY_BACK:
	if(webapis.avplay.getState() == "PAUSED" || webapis.avplay.getState() == "PLAYING")
		closeVideo();
	break;

g. When the "keydown" event for "Exit" key has been triggered, terminate the app.

case KEY_EXIT:
	exitApp();
	break;

Step 7. Adding Callback Listeners for the AVPlayer

a. In main.js, add the event callback listeners for the AVPlayer as shown below.

var listener = {
	onbufferingstart: function() {
	//Buffering start
	},
	onbufferingprogress: function(percent) {
	//Buffering progress data
	},
	onbufferingcomplete: function() {
	//Buffering complete
	},
	oncurrentplaytime: function(currentTime) {
	//Current playtime
	},
	onevent: function(eventType, eventData) {
	//Event type error and data
	},
	onerror: function(eventType) {
	//Event type error
	},
	onsubtitlechange: function(duration, text, data3, data4) {
	//Subtitle changed
	},
	ondrmevent: function(drmEvent, drmData) {
	//DRM callback and data
	},
	onstreamcompleted: function() {
	//Stream completed
	}
};

b. In the callback listeners, call the stopVideo function when the "onstreamcompleted" event has been triggered by the AVPlayer.

onstreamcompleted: function() {
	//Stream completed
	stopVideo();
}

c. Call the closeVideo function when the "onerror" event has been triggered by the AVPlayer.

onerror: function(eventType) {
	//Event type error
	closeVideo();
}

d. Call the updateCurrentTime function when the "oncurrentplaytime" event has been triggered by the AVPlayer.

oncurrentplaytime: function(currentTime) {
	updateCurrentTime(currentTime);
}

e. In the callback listeners, display buffering indicator when the "onbufferingprogress" event has been triggered and display default indicator when the "onbufferingcomplete" event has been triggered.

onbufferingprogress: function(percent) {
	//Buffering progress data
	document.getElementById("status").innerHTML = "Buffering: (" + percent + "%)" ;
},
onbufferingcomplete: function() {
	//Buffering complete
	document.getElementById("status").innerHTML = "Press ENTER to edit media URL";
}

Step 8. Running the App

Running in the Emulator

a. Open the Emulator Manager and run a 1920x1080 Samsung Tizen TV emulator to prepare to run the App.

Figure 5 Samsung Tizen TV Emulator Manager

Figure 5 Samsung Tizen TV Emulator Manager

b. Go back to the Tizen IDE. In the Project Explorer, right click on your project, select Run As then Tizen Web Application.

Figure 6 Running the App as Tizen Web Application

Figure 6 Running the App as Tizen Web Application

c. Test the Sample App functions in the Emulator.

Figure 7 Running the Sample App in Emulator

Figure 7 Running the Sample App in Emulator

Using the Smart Controls

The video play feature is mapped to the MEDIA_PLAY_PAUSE key in this app. The MEDIA_PLAY_PAUSE key exists in only 2015 Smart Controls. Therefore, the video cannot be played using another type of remote controller (Baisc Remote Controller).

Below are the detailed actions for all mapped Smart Control buttons:

smartcontrolbutton
  • Play/Pause key [ play ]

    • If no video is loaded yet, it auto-plays the video in the URL entry.

    • If the video is playing, it pauses the video.

    • If the video is paused, it resumes the video.

  • Return/Exit key [ Return/Exit key ]

    • Short Press: If the video is paused or playing, it stops the video.

    • Long Press: It exits the app.

  • Arrow Left key [ Arrow left key ]

    • If the video is paused or playing, it rewinds the video by 5 seconds.

  • Arrow Right key [ Arrow Right key ]

    • If the video is paused or playing, it skips the video by 5 seconds.

  • Enter key [ Enter key ]

    • Enables editing in the URL entry.

    • If a video is paused or playing, it stops the video first before enabling editing.

Running in the Device

a. Connect the TV device in the same network as the PC.

b. Set the TV to Developer Mode:

  • After starting the TV, press Smart Hub button.

    Figure 8 Smart Hub View

    Figure 8 Smart Hub View

  • Enter the Apps panel and enter the "Magic" sequence(buttons numbered with "1", "2", "3", "4" and "5" in sequence).

    Figure 9 Developer Mode Setting View

    Figure 9 Developer Mode Setting View

  • Set Developer Mode to On, and then enter the IP address of your personal computer which will be connected to TV.

    Figure 10 Developer Mode Setting On

    Figure 10 Developer Mode Setting On

  • After completing all setting, reboot the TV. When you re-enter Apps panel after rebooting. Developer Mode will be marked on the top of the screen.

    Figure 11 Before and After Rebooting the TV

    Figure 11 Before and After Rebooting the TV

c. Connect the TV to the PC via Remote Device Manager:

  • In the Connection Explorer of Tizen IDE, click Remote Device Manager icon.

    Figure 12 Connection Explorer

    Figure 12 Connection Explorer

  • Click New button, Enter the Name, IP Address and Port of the TV Device in the Add Device pop-up then click Add.

    Figure 13 Steps in adding IP Address of TV

    Figure 13 Steps in adding IP Address of TV

  • Select the newly added IP address and click Connect.

    Figure 14 Connect TV Device to the IDE

    Figure 14 Connect TV Device to the IDE

  • Right click on target device and click Permit to install application.

    Figure 15 Connected Device Selection

    Figure 15 Connected Device Selection

d. In the Project Explorer, right click on your project, select Run As then Tizen Web Application (see Figure 6) to load app in the TV Device.

Prev
Previous article does not exist