<img src="https://img.shields.io/badge/%20-ALL-%2300B180" style="float:left"/><br />



<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**<ol><li>Download <a href="https://developer.tizen.org/development/tizen-studio/download" target="_blank">Tizen Studio</a>.</li><li><a href="https://docs.tizen.org/application/tizen-studio/setup/install-sdk/" target="_blank">Install Tizen Studio</a>.</li></ol>
**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: <ol><li>Request an account from your company admin.</li><li>Follow the instructions in the welcome email.</li></ol> Follow these steps if you are an independent developer who needs a license: <ol><li>Go to our <a href="https://info.jwplayer.com/sign-up/" target="_blank">sign-up page</a>.</li><li>Fill out the form.</li><li>Click **Start for free**.</li><li>Follow the instructions in the welcome email.</li></ol>
**JWP license key**<ol><li>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.</li><li>In the **Downloads** section, copy the **LICENSE KEY** for the Fire OS SDK.</li></ol>_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>.



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 />

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 />

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.

    
  3. To update or add a playlist used within the app, include the desired playlist ID in the `feeds` array.

<br />

<!-- Removes the automatic page-to-page navigation at the bottom of the page -->

<style> .rm-Pagination { display: none; } </style>