(2011) (SDK2.0) Flash Video Tutorial (v.100)

Flash Video App Creation Tutorial
[SDK 2.0] Year 2011 Version 1.00
Samsung Smart TV
@Samsung Electronics Copyright All Rights Reserved

1
1. 2.
Overview................................................................................................................................... 4 Introduction ................................................................................................................................ 5 2.1 Development environment .......................................................................................................... 5 2.2 How to Setup Flash Media Server .................................................................................................. 5 2.3 Files needed for a Flash Player App ................................................................................................ 6
3.
Overall structure .......................................................................................................................... 7 3.1 The Apps design ..................................................................................................................... 7 App project components description ................................................................................................... 7 3.2 App project directory structure ...................................................................................................... 8
4.
App Creation .............................................................................................................................. 9 4.1 Stage 1 - Creating the Basic App ................................................................................................... 9 4.2 Stage 2 - Creating the Flash Player Applet ....................................................................................... 15 4.3 Stage 3 Accessing Flash Player from the JavaScript .......................................................................... 21
5.
Concluding remarks ..................................................................................................................... 25

2
Preface
Purpose of Document
This document is a tutorial that is aimed at App developers for Samsung Smart TV, and is written to help developers understand how to use the Adobe Flash Player features of the Samsung App service. These features are needed to create VOD (Video on Demand) Apps based on RTMP and RTMPe protocols. It is recommended that you read Development Guide for Samsung Smart TV (hereinafter referred to as "the Guide") first. This document provides references to the Guide tutorial for your understanding.
Target Readers
This document is aimed at programmers who have used web development languages such as HTML, CSS, JavaScript and ActionScript, and will be even more helpful for those who have web development experience. This document has been written on the assumption that readers have already read the Guide tutorial.

3
1. Overview
This tutorial will go step by step through the development of a App that features video playback over the RTMP and RTMPe protocols. The main goal for this tutorial is to present basic ideas in clear and possibly simple way. It focuses on providing basic code that needs to take place in any App application that uses Adobe Flash Player as well as brief description of using streaming media over the RTMP/RTMPe protocols. The FMS (Flash Media Server) installation and configuration wont be discussed in here. Its been assumed that the complete environment have been set up and only the FMS instance address and video media file name need to be provided. At the time of writing the Samsung Smart TV engine is supporting version 8 of the Adobe Flash Player. The player however has been extended with RTMP and RTMPe as well as with h.264 video codec. The RTMPe implementation with its streaming data encryption capability is especially interesting since it enables Content Providers to build VOD applications.

4
2. Introduction
In order to develop the Adobe Flash Player App, developers are required to have background knowledge such as HTML, JavaScript, ActionScript and CSS. In general, there will be no explanation about HTML, JavaScript, ActionScript or CSS provided in this document. However some aspects including cooperation between JavaScript and ActionScript will be discussed as they are crucial for good understanding of the idea. Developing Apps suited for TVs is different from developing Apps on PCs in several aspects. You can get more information on this from the Guide.
2.1 Development environment

You are going to use the Samsung Smart TV SDK ("SWDK") version 1.100 made by Samsung to create your App. With use of the emulator provided with the SWDK, you can operate your App before actually putting it in your TV. It is also possible to run the App on a TV using the "User App" feature. For details of this process please see the document "User App for Samsung Apps Into a TV Set". Please note that the performance of the video playback may be better when using the TV than when using the emulator. Therefore uploading to a TV is recommended as a test method.
2.2 How to Setup Flash Media Server

0. Why you have to install Adobe Flash Media Server
In order to develop a Flash VoD App with RTMP(RTMPE), you need to have Adobe Flash Media Server, which can provide progressive download services and streaming services with RTMP(RTMPE) for Flash Player. Especially, RTMPE is the encrypted RTMP protocol for securing the stream data between clients and a server. For more details of Flash Media Server, please visite the Adobe website (http://www.adobe.com).

5
1.
How to download Adobe Flash Media Server You can download a trial copy of Adobe Flash Media Server from the Adobe website (http://www.adobe.com/downloads/). If you have an Adobe membership, its free, you can have access to trial downloads and special community areas.
2.
How to install Adobe Flash Media Server To install and get started Adobe Flash Media Server, you can use the online documentation, Adobe Flash Media Server Installation Guide. This manual explains information about system requirements, installing, upgrading, getting started streaming media and so on. see
http://www.adobe.com/livedocs/flashmediaserver/3.0/docs/help.html?content=08_xmlref_031.html.
2.3 Files needed for a Flash Player App

You will be provided with sample modules code and images. Unzip the zip files, and refer to section 0 to locate them in the appropriate places. Please note that this tutorial does not supply video files for playback for copyright reasons. At the time of writing (January 2010) it is recommended that FLV format video is used. The video file has to be put on the Flash Media Server instance accessible from the TV set device.
RTMP Playback Sample

RTMP_Playback_Sample.zip

6
3. Overall structure
In this section, were going to examine the structure of the App that we will create.
3.1 The Apps design

Our Flash Player App will be composed of the following parts: 1. JavaScript based application: a. b. 2. Main module with the basic players functionality Utils module containing library of reusable functionalities.
ActionScript based application: a. b. RTMP_Playback.swf file - generated by the Flash application and played by Flash Player. RTMP_Playback.fla file contains ActionScript code to control the playback.
App project components description

Component
Main Utils Common.API.TVKeyValue Common.API.Widget
Description
Object handling all playback related functions Object handling auxiliary functions Remote control key codes wrapper class Widget API class, in this tutorial we will use Player plugin functions

7
3.2 App project directory structure

The following picture presents the App project directory structure:
Directory
RTMP_Playback_Sample
Description
The main folder of the App. It contains the index.html, config.xml and RTMP_Playback fla and swf files.
fplayer scripts styles images
Parent directory for all the Apps subdirectories Directory containing main.js, utils.js javascript files. Directory with fplayer.css cascade style sheet Directory containing all the bitmap images used by App

8
4. App Creation
This section will briefly show the initial configuration of the App. It assumes that basic App creation is already understood by the reader. For more detail on this part, please see the Guide tutorial.
4.1 Stage 1 - Creating the Basic App

Start the SWDK for Samsung TV Apps. Create a new App using the following config.xml file:
<?xml version="1.0"?> <widget> <widgetname>Flash VoD Widget</widgetname> <type>user</type> <fullwidget>y</fullwidget> <category>video</category> <ver>106</ver> <ThumbIcon>fplayer/images/icons/fplayer_106.png</ThumbIcon> <BigThumbIcon>fplayer/images/icons/fplayer_115.png</BigThumbIcon> <ListIcon>fplayer/images/icons/fplayer_85.png</ListIcon> <BigListIcon>fplayer/images/icons/fplayer_95.png</BigListIcon> <description> The Adobe Flash Player RTMPe Test Widget </description> <width>960</width> <height>540</height> <author> <name>Pawel Buczynski, Wojciech Deneka</name> <email></email> <link>http://www.rd.samsung.pl</link> <organization>Samsung Electronics Poland R&D Center</organization> </author> </widget>
Please note the following settings that we have used:

9

<fullwidget>y</fullwidget> - this means that the App will run in full screen mode. This affects what keys are registered by default. <type>user</type> - this enables the user App feature for testing on a real TV set. This tag has no effect on the emulator. <category>video</category> - tells the App manager to keep the App in video category and display video category icon in App listings. Add a file index.html as follows:
<html> <head>  <script language="javascript" type="text/javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script> <script language="javascript" type="text/javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>  <script language="javascript" type="text/javascript" src="fplayer/scripts/main.js"> </script> <script language="javascript" type="text/javascript" src="fplayer/scripts/utils.js"> </script> <link rel="stylesheet" href="fplayer/styles/fplayer.css" type="text/css">  <object id="pluginTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW"> </object> <object id="pluginAudio" classid="clsid:SAMSUNG-INFOLINK-AUDIO"> </object> <object type="application/x-shockwave-flash" id="flvplayer" class="fullscreen"> <param name="movie" value="RTMP_Playback.swf"> <param name="quality" value="high"> <param name="bgcolor" value="black"> </object> </head> <body id="fplayerBody" >

10

<div id="container" class="widget"> <div id="statusPad" style="position: absolute;top: 20;left: 20;width: 250px;padding: 0px;height: 400px;color: #444;font-size: 14px;"></div>  <div id="ctrlPad"> <div id="btnBar"> <img id="rewBtn" class="ctrlBtn" src="fplayer/images/btn/rew.png"> <img id="stopBtn" class="ctrlBtn" src="fplayer/images/btn/stop.png"> <img id="playBtn" class="ctrlBtn" src="fplayer/images/btn/play.png"> <img id="pauseBtn" class="ctrlBtn" src="fplayer/images/btn/pause.png"> <img id="fwdBtn" class="ctrlBtn" src="fplayer/images/btn/ff.png"> </div> <div id="volBar"> <img id="volBtn" class="ctrlBtn" src="fplayer/images/btn/vol.png"> <div id="volVal"></div> </div> </div> <div id="nav" class="widget"> <img src="fplayer/images/btn/krew.png"> Rewind <img src="fplayer/images/btn/kstop.png"> Stop <img src="fplayer/images/btn/kplay.png"> Play <img src="fplayer/images/btn/kpause.png"> Pause <img src="fplayer/images/btn/kfwd.png"> Forward <img src="fplayer/images/btn/return.png"> Return </div> </div> <body> </html>

11

Then add main.js in the scripts folder, with contents as follows:
var Main = { pluginAPI : null, pluginAudio : null, player: null, originalSource: null, fullScreen: false }
Main.onLoad = function() { Utils.init(); Utils.debug("Main.onLoad"); Utils.widgetAPI.sendReadyEvent();
/* If something went wrong just return to the Widget Manager */ if (!Main.init()) Utils.widgetAPI.sendReturnEvent(); Main.displayVolValue();
//Setting the buttons apparance $('playBtn').style.opacity = '0.8'; $('stopBtn').style.opacity = '0.5'; $('pauseBtn').style.opacity = '0.5'; }
Main.keyDown = function() { //TODO The content of this function will be provided in another section of this document. }
//TODO Here the volume controlling functions will be added.
//TODO Here the wrapper functions will be added

12

Main.init = function() { var success = true; Main.pluginAPI = $("pluginTVMW"); Main.pluginAudio = $("pluginAudio");
if (!Main.pluginAPI) { success = false; } else { /* Save current TV Source */ Main.originalSource = Main.pluginAPI.GetSource();
/* Set TV source to media player plugin */ Main.pluginAPI.SetMediaSource();
/* initialize Flash Player Object*/ Main.player = window["flvplayer"];
} return success; }
/** * displays current audio volume value */ Main.displayVolValue = function() { var vol = Main.pluginAudio.GetVolume(); $('volVal').replaceContent(vol); }

13

Main.displayMuteStatus = function(muted) { if(!muted) { $('volBtn').src='fplayer/images/btn/mute.png'; var vol = Main.pluginAudio.GetVolume(); $('volVal').replaceContent('MUTE'); } else { $('volBtn').src='fplayer/images/btn/vol.png'; Main.displayVolValue(); } }
window.onload = Main.onLoad; window.onunload = Main.onUnload; window.onkeydown = Main.keyDown;
As you can see there are two javascript functions that are of the highest importance here. The Main.onLoad() function is called when the DOM window.onload event appears. First of all, the Main.onLoad event handler sends information to the Samsung Smart TV that the App is about to start. Next is the Main.init() function call. In it the App sets references to the plugin objects that are responsible for managing both: the middleware and audio. If the middleware plugin object has been successfully created then the media source is being changed to the App and the original source is being stored in an auxiliary object. The original source will be needed during unloading the App simply to restore the video that was previously watched by the user. The Samsung Smart TV Flash Player implementation is not capable to control sound volume since this task is dedicated to another plugin which deals with the TV sets middleware. The Main.pluginAudio object stores the reference to this plugin and allows App to manipulate sound by calling SetVolumeWithKey(0) when increase and SetVolumeWithKey(1) when decrease the volume. This feature will be discussed later in another section of this document. Now, start the SDK emulator. If you see the message of alert() : Main.onLoad(), in the log manager, that means you have successfully created the App.

14
4.2 Stage 2 - Creating the Flash Player Applet

This section will describe how to make a basic ActionScript application that can communicate with a App written in JavaScript. Since that some practical experience in programming ActionScript with FL Adobe Flash CS 3 (4) development environments is here mandatory. First, insert the AS code below into the RTMP_Playback.fla (or RTMP_Playback.swf) file opened with the FL Adobe Flash CS 3 (4) editor.
import flash.external.ExternalInterface;
var flagPause = 0; var volumeValue = 10; var my_nc:NetConnection = new NetConnection();
function debug(message) { text1.text = text1.text + message + " \n"; text1.scroll = text1.scroll + 1; } // End of the function
// Create a local streaming connection my_nc.connect("rtmpe://106.116.10.2/vod");
// Create a NetStream object and define an onStatus() function var my_ns:NetStream = new NetStream(my_nc);
// Attach the NetStream video feed to the Video object my_video.attachVideo(my_ns);
// Set the buffer time to two seconds my_ns.setBufferTime(2);
// Begin playing the FLV file my_ns.play("theMovieFileName");

15
// Wire up JS external interface - exposing functions if(ExternalInterface.available){ info("onLoad: External Interface available, exposing callbacks to enclosing JavaScript"); ExternalInterface.addCallback("VideoPause", null, _externalPause); ExternalInterface.addCallback("VideoPlay", null, _externalResume); ExternalInterface.addCallback("VideoSkip", null, _externalSkip); ExternalInterface.addCallback("VideoStop", null, _externalStop);
}else{ warn("onLoad: External Interface is not available - no methods exposed"); }
/* * Pause playback */ function _externalPause(params:Object) :Void{ if(flagPause == 0) { my_ns.pause(); flagPause = 1; } } /** * Resume playback */ function _externalResume(params:Object) :Void{ if(flagPause == 1) { my_ns.pause(); flagPause = 0; } } /** * Seek to the given time offset from the current playheadtime */

16

var stamp = 0; function _externalSkip(params:Object) :Void{ var time = params; my_ns.seek(my_ns.time + time); } /** * Stop playback */ function _externalStop(params:Object) :Void{ if(flagPause == 0) { my_ns.pause(); my_ns.seek(0);
flagPause = 1; }else{ my_ns.seek(0); } }
This code is responsible for setting the initial objects that will be required by the video playback. Aside from the flagPause or volumeValue objects that play here just a second plan role the one which is more important is the my_nc:NetConnection with its connect(Uri) function call. Here in the example code it looks like: my_nc.connect("rtmpe://192.168.10.10/vod") and as it is it declares opening the network connection with a stream that is served remotely and available over the rtmpe protocol. As the server we mean here the Flash Media Server instance. Thats all we have to do if want to use secured encrypted stream for the playback. Another option is to connect over the rtmp (without encryption) and in this case we just need to remove the e letter from the URI like for instance: my_nc.connect("rtmp://192.168.10.10/vod"). After establishing connection here is the place for creating objects responsible for the acctual playback:
var flagPause = 0; var my_nc = new NetConnection(); var url = "rtmpe://192.168.10.10/vod"; // put the FMS address in here.

17

var videoname = "themoviefilename"; my_nc.connect(url); var my_ns = new NetStream(my_nc); var movieduration:Number = 0; var ratio:Number = 0; var fps_interval = setInterval(_displayFPS, 1000, my_ns); my_video.attachVideo(my_ns); my_ns.setBufferTime(2); my_ns.play(videoname); // here is the place for movie file name.
From now the video is started and visible for the user. That could be end of this story however what is a must for such kind of applications is a user interaction. We have to add key down event handlers to introduce such functionalities like: stop, pause, fast forward, rewind and finally play (resume) of the video. The entire event comes from the JavaScript application that in fact hosts the Flash Player. We need to expose the interface for the JavaScript that will establish communication between Flash Player and the JavaScript.
if (flash.external.ExternalInterface.available) { info("onLoad: External Interface available, exposing callbacks to enclosing JavaScript"); flash.external.ExternalInterface.addCallback("pause", null, _externalPause); flash.external.ExternalInterface.addCallback("play", null, _externalResume); flash.external.ExternalInterface.addCallback("skip", null, _externalSkip); flash.external.ExternalInterface.addCallback("stop", null, _externalStop); } else { warn("onLoad: External Interface is not available - no methods exposed"); } // end else if
Here you can find event handlers used by progress bar and indicator on the screen:
my_ns.onStatus = function (infoObject) { if (this.time == 0) { bar._width = 0; } // end if if (this.time > 0 && this.time >= movieduration 0.5)

18

{ clearInterval(fps_interval); bar._width = 0; progresscounter.text = "0:00 / 0:00"; delete this.onStatus; } // end if }; my_ns.onMetaData = function (infoObject) { movieduration = parseInt(infoObject.duration); ratio = 800 / movieduration; };
And define all the functions that stand the interface:
function _externalPause(params) { if (flagPause == 0) { clearInterval(fps_interval); my_ns.pause(); flagPause = 1; } // end if } // End of the function function _externalResume(params) { fps_interval = setInterval(_displayFPS, 1000, my_ns); if (flagPause != 1) { my_ns.play(videoname); } else { my_ns.pause(); flagPause = 0; } // end else if

19

} // End of the function function _externalSkip(params) { var _loc1 = params; _updateProgressValue(); my_ns.seek(my_ns.time + _loc1); } // End of the function function _externalStop(params) { clearInterval(fps_interval); if (flagPause == 0) { my_ns.pause(); my_ns.seek(0); flagPause = 1; } else { my_ns.seek(0); } // end else if progresscounter.text = "0:00 / 0:00"; } // End of the function function _updateProgressValue() { bar._width = my_ns.time * ratio; } // End of the function function _displayFPS(ns) { _updateProgressValue(); progresscounter.text = "Now playing: " + url + "/" + videoname + " "+
_convertPlaybackTime(my_ns.time / movieduration * movieduration) + " / " + _convertPlaybackTime(movieduration);
} // End of the function function _convertPlaybackTime(s) { var minDivFactor = 60;

20

var secDivFactor = 1; return (Math.floor(s / minDivFactor) + (Math.floor(s % minDivFactor / secDivFactor) > 9 ? (":") : (":0")) + Math.floor(s % minDivFactor / secDivFactor)); } // End of the function
At the very end of the code writing (modification) we cant forgot to update the related swf file (here RTMP_Playback.swf) by selecting Publish option available in the FL Adobe Flash CS 3 (4) File menu. Thats enough to start using the interface from the JavaScript level of the App. This will be discussed in the next section.
4.3 Stage 3 Accessing Flash Player from the JavaScript

If you saw the Stage 1 of this tutorial you would notice that weve already declared the onkeydown event handler function named Main.keyDown(). But till now the functions body was empty. After finishing the Flash Player part we are ready to implement all the event handling procedures we need.
Main.keyDown = function() { var keyCode = event.keyCode; Utils.debug("Key pressed: " + keyCode); switch(keyCode) { case Utils.key.KEY_PLAY: Utils.debug("KEY PLAY"); Main.play(); break; case Utils.key.KEY_PAUSE: Utils.debug("KEY PAUSE"); Main.pause(); break; case Utils.key.KEY_STOP: Utils.debug("KEY STOP"); Main.stop(); break; case Utils.key.KEY_FF: Utils.debug("KEY FF"); Main.skip(10);

21

break;
case Utils.key.KEY_RW: Utils.debug("KEY RW"); Main.skip(-10); break;
case Utils.key.KEY_VOL_UP: Utils.debug("KEY VOL UP"); Main.volUp(); break;
case Utils.key.KEY_VOL_DOWN: Utils.debug("KEY VOL DOWN"); Main.volDown(); break;
case Utils.key.KEY_MUTE: // MUTE key Utils.debug('handleKey MUTE'); Main.toggleMuteVol(); break;
case Utils.key.KEY_RETURN: // RETURN key Utils.debug('handleKey RETURN'); Main.stop(); Utils.widgetAPI.sendReturnEvent(); break;
default: Utils.debug("Unhandled key"); break; } }
The code above needs some comment to be clearly understood. First of all the Main.keyDown() function retrieves the pressed key value from the global event object that is provided by the MAPLE browser. All the event.keyCode values are being

22

compared with the enumeration constants defined in the, common for all the Apps, library file provided by the tvKey object which has been defined globally. The object could be created in any place of the code in the following form: var tvKey = new Common.API.TVKeyValue(). It is true with the assumption that there is an html reference to its source file within the index.html page. And finally we need the wrapper functions to execute Flash Players commands. To do this we add the following:
Main.play = function() { try { Utils.debug("playing...: "); Main.player.play();
$('playBtn').style.opacity = '0.8'; $('stopBtn').style.opacity = '0.5'; $('pauseBtn').style.opacity = '0.5';
} catch (e) { Utils.debug("Error in Main.play() function: " + e); } }
Main.pause = function() { try { Utils.debug("pausing...: "); Main.player.pause(); $('playBtn').style.opacity = '0.5'; $('pauseBtn').style.opacity = '0.8'; $('stopBtn').style.opacity = '0.5'; } catch (e) { Utils.debug("Error in Main.pause() function: " + e); } }

23

Main.stop = function() { try { Utils.debug("stopping...: "); Main.player.stop(); $('playBtn').style.opacity = '0.5'; $('pauseBtn').style.opacity = '0.5'; $('stopBtn').style.opacity = '0.8';
} catch (e) { Utils.debug("Error in Main.stop() function: " + e); } } Main.skip = function(time) { try { Utils.debug("skip...: " + time + " sec."); Main.player.skip(time);
} catch (e) { Utils.debug("Error in Main.skip() function: " + e); } }
And thats all about the basic playback. We are ready to start the App and see the video. Its possible to stop the playback, skip some scenes by pressing FFW or rewind it with REW, PAUSE and then resume by pressing the PLAY button on the remote controller. Youve probably noticed the $('playBtn') which is an abbreviation of document.getElementById(playBtn). The $ function definition as well as another auxiliary function have been defined in a separate JS file named utils.js. The very last thing is adding the volume control to our App. Since the hardware specific of the TV set it had been decided to not use the Flash Player as the sound volume controller. Thats why there exists another specialized web browsers plugin, which is responsible for managing audio adjustment tasks. As it was mentioned in the stage one section of this tutorial, we have to use standard interface functions of the audio plugin like here:
Main.volUp = function()

24

{ Main.pluginAudio.SetSystemMute(0); Main.pluginAudio.SetVolumeWithKey(0); Main.displayVolValue(); }
Main.volDown = function() { Main.pluginAudio.SetSystemMute(0); Main.pluginAudio.SetVolumeWithKey(1); Main.displayVolValue() }
Main.toggleMuteVol = function() { var muted = Main.pluginAudio.GetSystemMute(); Main.pluginAudio.SetSystemMute(muted?0:1); Main.displayMuteStatus(muted); }
From now all the sources are complete. We can start the App on the TV set. Of course first we have to deploy it there but this topic has been explained in details by the User App for Samsung Apps Into a TV Set tutorial published on www.samsungdforum.com web site and it is beyond the scope of this document.
5. Concluding remarks
This tutorial has explored the main functions of the Flash Player plugin used to play video stream over RTMP/RTMPe. It has also shown how to control volume using the audio plugin. Other API functions are available from the video and audio plugins, and it is recommended that you read the full API description for each plugin, which you can find in the Guide.

25

(2011) (SDK2.0) Flash Video Tutorial (v.100)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

(2011) (SDK2.0) Flash Video Tutorial (v.100)

Uploaded by

Copyright:

Available Formats

Flash Video App Creation Tutorial

[SDK 2.0] Year 2011 Version 1.00

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

Concluding remarks ..................................................................................................................... 25

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

2.1 Development environment

2.2 How to Setup Flash Media Server

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

2.3 Files needed for a Flash Player App

RTMP Playback Sample

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

3.1 The Apps design

App project components description

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

3.2 App project directory structure

fplayer scripts styles images

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

4.1 Stage 1 - Creating the Basic App

Please note the following settings that we have used:

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

Main.onLoad = function() { Utils.init(); Utils.debug("Main.onLoad"); Utils.widgetAPI.sendReadyEvent();

//TODO Here the volume controlling functions will be added.

//TODO Here the wrapper functions will be added

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

if (!Main.pluginAPI) { success = false; } else { /* Save current TV Source */ Main.originalSource = Main.pluginAPI.GetSource();

/* Set TV source to media player plugin */ Main.pluginAPI.SetMediaSource();

/* initialize Flash Player Object*/ Main.player = window["flvplayer"];

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

window.onload = Main.onLoad; window.onunload = Main.onUnload; window.onkeydown = Main.keyDown;

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

4.2 Stage 2 - Creating the Flash Player Applet

var flagPause = 0; var volumeValue = 10; var my_nc:NetConnection = new NetConnection();

// Create a local streaming connection my_nc.connect("rtmpe://106.116.10.2/vod");

// Attach the NetStream video feed to the Video object my_video.attachVideo(my_ns);

// Set the buffer time to two seconds my_ns.setBufferTime(2);

// Begin playing the FLV file my_ns.play("theMovieFileName");

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

}else{ warn("onLoad: External Interface is not available - no methods exposed"); }

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial

flagPause = 1; }else{ my_ns.seek(0); } }

@Samsung Electronics Copyright All Rights Reserved

Flash Video App Creation Tutorial