[Youtube Video] Playing a Video File in Samsung Smart TV

Playing video files in a Samsung Smart TV application requires a specific API provided by Samsung’s Web APIs library. This tutorial walks through the essentials of initializing and controlling a video player using the AVPlay class in the Samsung Smart TV SDK.

Setting Up the Project and Including the Web API

To get started, open the Samsung Smart TV SDK (version 5.1 is used in this tutorial). Once a new JavaScript project is created, the default project does not include video playback support out of the box. You need to add the Web API JavaScript file that provides the video player capabilities.

Add the following script tag to your HTML file to include the Web APIs library:

<script type="text/javascript" src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"></script>

This file is the foundation that enables video playback. You also need a container element in your HTML where the player will be attached — a simple <div id="player-container"></div> serves as the attachment point.

Understanding the AVPlay Class

The core of video playback in Samsung Smart TV applications is the AVPlay class, accessed through webapis.avplay. This class provides all the methods needed for loading, playing, and stopping video content. The initialization flow uses a callback-based pattern with a success callback and an error callback.

To retrieve a player instance, call webapis.avplay.getAVPlay(successCallback, errorCallback). If the player is successfully initialized, your success callback receives the player instance as a parameter. In case of failure, the error callback is invoked with an error object.

Initializing the Player

Inside the success callback, you receive a playerInstance object. Call its init() method with a configuration object that specifies:

• containerId — the ID of the DOM element to attach the player to (e.g., "player-container")
• displayRect — the position and dimensions of the player (left, top, width, height)
• autoRatio — set to true to automatically adjust the aspect ratio for a better viewing experience

Once initialized, save the player instance to a globally accessible variable so it can be referenced from other functions in your application.

Loading and Playing a Video

After initialization, use the open() method to supply the video URL to the player — note that open() is the correct method, not load(). Then call play(successCallback, errorCallback) to start playback. The play method also uses a callback pattern, so you can handle playback success and errors gracefully.

To wire up playback to a remote control button, handle the key event for the Play key:

case TVKey.KEY_PLAY: main.playVideo(); break;

Stopping the Video

Stopping video playback is straightforward — call the stop() method on your player instance. Map this to the Stop button key handler:

case TVKey.KEY_STOP: main.stopVideo(); break;

This ensures users can control playback using their TV remote, which is the primary input device for Smart TV applications.

Putting It All Together

The full initialization flow ties together seamlessly: when the app loads, initPlayer() is called from the onload handler. Inside it, getAVPlay() is called, and on success the player is initialized with a container and display dimensions. When the user presses Play on the remote, the video URL is opened and playback begins. When Stop is pressed, the player halts.

One important debugging tip from this tutorial: if you encounter an “undefined is not a function” error, it is often caused by scope issues when referencing the player object inside callbacks. Using a global variable instead of a property on the main object resolves this issue.

Watch the full video to see this implementation built step by step in the Samsung Smart TV SDK, including a live demo of the player loading and playing a video in the emulator.