Embed a player in a Tizen App

Learn how to add a player to a Samsung Tizen Smart TV

IMPORTANT

This is a beta offering. By using this documentation, you are agreeing to abide by the terms of the JW Player Beta Program Agreement.


This is JW Player’s demo application for Samsung Tizen Smart TVs showcasing how the player can be used for such applications. It is a Tizen Web Application built with HTML, CSS, and JS and targeting Tizen 4.0+ and 2018 Smart TVs and later.

There are three screens to the demo app. The main playlist landing page, the video detail page, and the player page. The config-loader is used to pass player configs to the app.


Key Features

  • HLS, DASH, SmoothStreaming, WebM, and MP4 playback
  • Rich configuration options including playlists, content title, and poster image
  • Full-featured API to monitor player, playlist, playback, and content state
  • API to monitor and set video and audio qualities.
  • VAST, VMAP, and VPAID advertising
  • FreeWheel and Google IMA advertising support
  • API design that enables native control creation and can be applied to iOS and web player implementations
  • Caption support
  • Analytics



Requirements

Item Notes
Tizen Studio 1. Download Tizen Studio.
2. Install Tizen Studio.
Tizen 4.0+ and a Smart TV 2018 or later You must be using at least this minimum OS version and Smart TV combination.
JW Player Tizen App Follow these instructions to download the app.
JW Player license Follow these steps if you work for a company that has a JW Player license:

1. Request an account from your company admin.
2. Follow the instructions in the welcome email.


Follow these steps if you are an independent developer who needs a license:

A badge that displays 'Get your free developer license'

1. Go to our Developer sign-up page.
2. Enter your email address at the top of the page.
3. Click Start for free.
4. Follow the instructions in the welcome email.
JW Player license key 1. From your Player Downloads & Keys page, scroll down to the Downloads section.
2. In the Downloads section, copy the LICENSE KEY for the Fire OS SDK.

NOTE: If you have more than one property in your account, select the property from the dropdown menu at the top of the page. Each property has a unique set of license keys.



Import the JW Player Tizen app

  1. Clone or download the JWPlayer Tizen App repository.
  2. From within Tizen Studio, click File > Import > Tizen > Tizen Project.
  3. Import the app folder from the tizen-demo-app directory into your workspace.



Set up the demo app

The JW Player Tizen App has a unique build setup. The source code is compiled into app/dist and the app itself is created in the app directory. It references the compiled source code. Going this route made it easier to integrate webpack and es6 with Tizen to allow for more flexible and faster development.

The build system is a simple webpack/babel setup used for compiling with eslint used for linting. If you make any changes, you will need to run yarn build in order to see them reflected.


Use the following steps to set up the demo app:

  1. Open a terminal from the tizen-demo-app directory.
  2. Run npm install.
  3. Run yarn build. If jw-tizen.css and jw-tizen.js do not exist in the app/dist folder, this command will generate or update those two files.
  4. In app/index.html in the <head>, add a link to the player library that will be used in the app. You can use either a cloud-hosted player library or self-hosted player library.
<script src="{CLOUD-HOSTED_PLAYER_LIBRARY_URL}"></script>
<script src="https://www.yourdomain.com/{player_folder}/jwplayer.js"></script>
<script>jwplayer.key="{player_key}"</script>



Locating the application certificate

In order to run the application, you need to create an Author and a Distributor Certificate.

If you are running the application on a TV, you need to know the TV's Unique Device ID (DUID). On your TV, go to Menu > Support > Contact Samsung > Unique Device ID.



Run the application

You can run the application in 3 different environments; with a Web Simulator, with an Emulator, or with a TV. The simulator is great for development and quick run throughs, whereas the tv is better for the actual experience.


Web Simulator

As per Samsung, the web simulator "is a light-weight tool that provides many settings and features for testing Samsung TV Web applications on a computer".

  1. Right-click the project.
  2. Select Run As > Tizen TV Web Simulator Application (Samsung TV).

Device Emulator

As per Samsung, the device emulator "is a tool that provides an environment similar to a real device, for testing purposes".

  1. Right-click the project.
  2. Select Run As > Tizen Web Application.

If the previous steps do not work, try the following steps:

  1. Go to Tools > Emulator Manager.
  2. Select an emulator.
  3. Click Launch. A colorful ATV screen appears.
  4. Right-click on the application's folder.
  5. Choose Run As > Tizen Web Application.

NOTE: Since the emulator can lag, we highly suggest using a real device or the web simulator.

Tizen TV

Use Samsung's documentation to set up the Tizen TV.


Keep the following points in mind:

  •    • Make sure the TV is connected to the same wifi as your computer.
  •    • When configuring the device in Tizen Studio, if there is no port, keep the default 26101 port


Find the TV's IP address:

  1. Select SETTINGS on your remote to open the TV Setting Menu. You can also navigate to SETTINGS from the Smart Hub.
  2. Select General > Network > Network Status > IP Settings.


Once you finish setting up the TV and configuring the device in Tizen Studio, use the following steps:

  1. Right-click the project.
  2. Select Run As > Tizen Web Application.



Update the app

Adding and updating application screens

  1. Make a change to the application source code. Any changes must be made in the src folder.
  2. Run yarn build after any changes to update the compiled dist files.
  3. Restart the app. A restart is required to show any changes.


Adding and updating application media

To change the media used within the application, you will need to update the supplied to the feeds array of the Gallery component.

  1. Open src/js/index.js.
  2. In the init function, locate the feeds array in the Gallery component.
gallery = new Gallery({
    feeds: [PLAYLIST_ID_1, PLAYLIST_ID_2, ...],
    parent: {
        view: mainDiv
    },
    init
});
  1. To update or add a playlist used within the app, include the desired playlist ID in the feeds array.


Updated 3 days ago



Embed a player in a Tizen App


Learn how to add a player to a Samsung Tizen Smart TV

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.