Adding a Video Component

Published 2014-10-28 | (Compatible with SDK 3.5,4.5,5.0,5.1 and 2012,2013,2014 models)

How to use a Video Component in visual mode of Samsung SDK.

** This class will not be supported in 2015.

   All functionalities of AppsFramework are more improved, integrating with CAPH. Therefore Appsframework is not supported since 2015 Smart TV. To use this functionalities of Appsframework, refer to here.


The Samsung Smart TV SDK WYSIWYG editor provides a video component for inserting videos into application design. There are very few properties associated with the video component, as it is always played in full screen mode. Therefore, the user cannot modify the visual properties of the video component while adding it to the design. However, the video component needs certain parameters during initialization.



The video player always plays in the full screen mode as the video component does not take any style sheet properties to modify its appearance.


The video component needs a few parameters which are explained below. The use of the video component has the following restrictions:

  1. No initialization or ID is needed for using the video component, as only one video component can be added to the design at a time.
  2. The video component uses a plugin to play videos. The plugin is a part of the Samsung Applications Framework and you have little control over it, its inbuild functions can be freely used.


$.sfVideo = function (option, value);

Options: play, stop, setItem, registerKeyHandler


The play() function plays a particular URL of the video component. Any key can be assigned to this function. However, use the setItem before using the play() function. See setItem.

The focus changes from the framework to the video component, when a video is played. Therefore, the framework does not respond to any key events.



If full screen playback is not needed, set the player area size. For example:

playerSetting = {
    sec : 0,
    screenSize : {    // Set Partial play size. The controller will be attached below this area.
        left : 100,
        top : 100,
        width : 320,
        height : 240

$.sfVideo('play', playerSetting);


Call the stop() function to quit the video at any point of time. This function is written in a separate user-defined module.


$sf.Video('stop', true);


The setItem parameter defines the index value of the video to be played. Usually, the URL of a video item is declared as an object array. Therefore the index item of this array must be set before playing.

The syntax of this function takes 2 arguments:

  • The setItem parameter is a compulsory parameter to set the value of the index.
  • The object of the array that is declared in the second parameter.


$.sfVideo('setItem', my_play_list[index]);


When a video is played, the focus changes from the framework to the video component. Therefore, the framework does not respond to any key events. To set the key event handler, use the registerKeyHandler option.

In the example below, the handleKeyDown function of the object receives the key event.


$.sfVideo('registerKeyHandler', this);

SceneScene2.prototype.handleKeyDown = function (keyCode) {
    switch (keyCode) {
    case $.sfKey.LEFT:
        $.sfVideo('stop', true);


The list or array of videos that the developer intends to play in the video component is declared as an array of objects to preserve the declaration format. The syntax for declaring a single object element of the array is as follows:

url: '',
title: 'Football'
Network address of the video file. It is the root path.
The text that appears on the top of the Video component while playing a video.


It is important to declare the object elements of the video URL array as described above for the proper working of the video.

The example below shows how to declare the video URL array as an array of object elements.

my_play_list = [
        url: '',
        title: 'Football'
        url: '',
        title: 'Wildlife'
        url: '',
        title: 'Movie Trailer'

The figure below shows a video being played in a partial area of the screen.

Figure: Play video (partial screen)

The figure below shows a video played in full screen.

Figure: Play video (full screen)