Embed a player in a Tizen App (Web Player)

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

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.

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

Requirements

Item	Notes
Tizen Studio	Download Tizen Studio. 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.
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: Request an account from your company admin. Follow the instructions in the welcome email. Follow these steps if you are an independent developer who needs a license: Go to our sign-up page. Fill out the form. Click Start for free. Follow the instructions in the welcome email.
JWP license key	From your Player Downloads & Keys page, scroll down to the Downloads section. 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 JWP Tizen app

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

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.

Use the following steps to set up the demo app:

Open a terminal from the tizen-demo-app directory.
Run npm install.
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.
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".

Right-click the project.
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".

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

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

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

💡
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:

Select SETTINGS on your remote to open the TV Setting Menu. You can also navigate to SETTINGS from the Smart Hub.
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:

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

Update the app

Adding and updating application screens

Make a change to the application source code. Any changes must be made in the src folder.
Run yarn build after any changes to update the compiled dist files.
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.

Open src/js/index.js.

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
});

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