Platform DocsPlayers DocsRelease Notes
System StatusSubmit a CaseDashboard LoginContact Sales



<img src="https://img.shields.io/badge/%20-Beta-green.svg" /> This is a **beta** offering. By using this documentation, you are agreeing to abide by the terms of the <a href="https://www.jwplayer.com/beta-program-agreement/" target="_blank">JWP Beta Program Agreement</a>.

<br />

This is JWP’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.

<br /> <hr />

## Key Features

  • HLS, DASH, 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

<br /> <hr />

## Requirements

ItemNotes
**Tizen Studio**1. Download <a href="https://developer.tizen.org/development/tizen-studio/download" target="_blank">Tizen Studio</a>.<br />2. <a href="https://docs.tizen.org/application/tizen-studio/setup/install-sdk/" target="_blank">Install Tizen Studio</a>.
**Tizen 4.0+** and a **Smart TV 2018 or later**You must be using at least this minimum OS version and Smart TV combination.
**JWP Tizen App**Follow these instructions to [download the app](🔗).
**JWP license**Follow these steps if you work for a company that has a JWP license:<br /> <br />**1.** Request an account from your company admin.<br />**2.** Follow the instructions in the welcome email. <br /><br /><br />Follow these steps if you are an independent developer who needs a license:<br /><br /><a href="https://www.jwplayer.com/sign-up/?utm_source=developer&utm_medium=CTA" target="_blank"><img src="https://img.shields.io/badge/%20-Get your free developer license-EC0041.svg?style=for-the-badge" alt="A badge that displays 'Get your free developer license'"></a><br /><br />**1.** Go to our <a href="https://www.jwplayer.com/sign-up/?utm_source=developer&utm_medium=CTA" target="_blank">Developer sign-up page</a>.<br />**2.** Enter your email address at the top of the page.<br />**3.** Click **Start for free**.<br />**4.** Follow the instructions in the welcome email.
**JWP license key**1. From your <a href="https://dashboard.jwplayer.com/#/players/downloads" target="_blank"><strong>Player Downloads & Keys</strong></a> page, scroll down to the **Downloads** section. <br />2. In the **Downloads** section, copy the **LICENSE KEY** for the Fire OS SDK. <br /><br />_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._

<br /> <hr />

## Import the JWP Tizen app

  1. Clone or download the <a href="https://github.com/jwplayer/jwplayer-tizen-app" target="blank">JWPlayer Tizen App repository</a>.

  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.

<br /> <hr />

## Set up the demo app

The JWP 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.

<br />

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](🔗).


<br />
<hr />
## Locating the application certificate
In order to run the application, you need to <a href="https://developer.samsung.com/SmartTV/develop/getting-started/setting-up-sdk/creating-certificates.html" target="_blank">create an Author and a Distributor Certificate</a>.
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**.
<br />
<hr />
## 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.
<br />
<details><summary><strong>Web Simulator</strong></summary>
<br />
As per Samsung, the <a href="https://developer.samsung.com/smarttv/develop/getting-started/using-sdk/tv-simulator.html" target="_blank">web simulator</a> "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 <strong>Run As > Tizen TV Web Simulator Application (Samsung TV)</strong>.
<br />
</details>
<details><summary><strong>Device Emulator</strong></summary>
<br />
As per Samsung, the <a href="https://developer.samsung.com/smarttv/develop/getting-started/using-sdk/tv-emulator.html" target="_blank">device emulator</a> "is a tool that provides an environment similar to a real device, for testing purposes".
  1. Right-click the project.
  2. Select <strong>Run As > Tizen Web Application</strong>.
  <br />

If the previous steps do not work, try the following steps:
  1. Go to <strong>Tools > Emulator Manager</strong>.
  2. Select an emulator.
  3. Click <strong>Launch</strong>. A colorful ATV screen appears.
  4. Right-click on the application's folder.
  5. Choose <strong>Run As > Tizen Web Application</strong>.
<strong>NOTE:</strong> Since the emulator can lag, we <strong><em>highly suggest</em></strong> using a real device or the web simulator.
<br />
</details>
<details><summary><strong>Tizen TV</strong></summary>
<br />
Use Samsung's documentation to <a href="https://developer.samsung.com/smarttv/develop/getting-started/using-sdk/tv-device.html" target="_blank">set up the Tizen TV</a>.
<br />
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 <code>26101</code> port
<br /><br />
Find the TV's IP address:
  1. Select <strong>SETTINGS</strong> on your remote to open the TV Setting Menu. You can also navigate to <strong>SETTINGS</strong> from the Smart Hub.
  2. Select <strong>General > Network > Network Status > IP Settings</strong>.
<br /><br />
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 <strong>Run As > Tizen Web Application</strong>.
<br />
</details>
<br />
<hr />
## 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.
<br />
### 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.

  1. To update or add a playlist used within the app, include the desired playlist ID in the `feeds` array.
<br />
(Script tags will be stripped)