JW Player Tizen App

Embed a Player in a Tizen App

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.

Build System

The Tizen Demo App has a unique build setup to make it easier to integrate webpack and es6. The build system is a simple webpack/babel setup used for compiling with eslint used for linting. The source code in src is compiled and output to app/dist. The app itself is created in this app directory and imports the compiled source code directly.

Getting Started

Download Tizen SDK: https://developer.tizen.org/development/tizen-studio/download

*If you are using an M1 Macbook and encounter any installation issues, you can try installing Tizen Studio following this process: https://remoteorigin.com/blog/install-tizen-studio-on-apple-m1/

Clone or download this repository.
Launch Tizen Studio and select File -> Import -> Tizen -> Tizen Project
Import the app folder from the tizen-demo-app directory into your workspace.
- If you have issues importing the project, you can try loading it via File -> Open Projects from File System... and select the app directory there instead.
Open a terminal from the tizen-demo-app directory and run npm install to initialize the project dependencies.
Run npm run build. This will generate a jw-tizen.css and jw-tizen.js file in the app/dist folder, both of which are needed to run the project.
In app/index.html, you will need to add a link to your player that will be used in the app. It is the same process as Adding a JW Player Library to a Page

In the <head>, add either of the following:
- <script src="https://www.yourdomain.com/{player_folder}/jwplayer.js"></script> <script>jwplayer.key='{player_key}'</script>
- <script src="{CLOUD-HOSTED_PLAYER_LIBRARY_URL}"></script>

TV Extensions

There may be additional packages you need to install to run the application. You can find them in the Package Manager which can be accessed via Tools -> Package Manager

Select the Extension SDK tab
Install the Samsung Certificate Extension
Install TV Extension Tools
Install any TV Extensions-{version}

Application Certificates

In order to run the application, you need to create an author and a distributor certificate: Samsung Creating Certificates Docs.

When creating the distributor certificate, set the Privilege level to Partner.

If you are running the application on a TV, you need to know the TVs Unique Device ID (DUID), which can be found here:

On your TV, open the settings menu and go to Support > About This TV and scroll down to find the Unique Device ID.

Running the Application

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

Web Simulator

Samsung Web Simulator Docs

In the Project Explorer, right click on the project and select Run As > Tizen TV Web Simulator Application (Samsung TV)
If you don't see a Project Explorer, you can open it by going to Window -> Show View -> Other -> General dropdown -> Project Explorer

*Right click on the simulator screen to open a settings menu so you can access things like the web inspector.

Emulator

*There have been issues running the emulator on Mac OS's newer than Catalina, so it's recommended to use a real device if possible. If you are having HAXM issues, you can try to work through them following this guide: https://github.com/intel/haxm/wiki/Installation-Instructions-on-macOS (Archived Jan. 2023)

Samsung Emulator Docs

Right-click on the project and select Run As > Tizen Web Application

If that doesn’t work try:

Go to Tools > Emulator Manager
Select the Emulator you want and click Launch
Wait for a colorful ATV Screen
Right-click on the application's folder and choose Run As > Tizen Web Application

Tizen TV

Samsung TV Docs

Directions to setup the TV and configure it as a device are outlined in the linked doc.

Make sure the TV is connected to the same wifi as your computer.
To find the TVs IP Address:
1. Open the TV Settings Menu by selecting SETTINGS on your remote or navigating to SETTINGS from the Smart Hub
2. Select General -> Network -> Network Status -> IP Settings
When configuring the device in Tizen Studio, if there is no port, keep the default 26101 port

Once you finish setting up and configuring in Tizen Studio:

Right click the project and select Build Signed Package
In the Device Manager, right click on the TV name in the device list and be sure to select Permit to install applications
Right click the project and select Run As > Tizen Web Application

The Tizen JW Demo app should then launch automatically within the TV.

Updating the App

Creating Your Own Player Screen

If you choose to create a custom player screen, you will need to handle back click events in order to ensure controls remains fully functional like below:

jwplayer().on('backClick', onBackClick);

function onBackClick() {
    // Back Click Functionality
}

Here is an example of how the demo application handles these events in the player screen.

Adding/Updating Application Screens

Any changes made to the application’s source code belong in the src folder.
Run npm run build after any changes to update the compiled dist files.
You will need to restart the app to show any changes.

Adding/Updating Application Media

To change the media used within the application, you will need to update the playlist feeds supplied to it.

In src/js/index.js in the init function, you will see an object passed into the Gallery component like below:
```
  gallery = new Gallery({  
  	feeds: [PLAYLIST_ID_1, PLAYLIST_ID_2, ...],  
  	parent: {view: mainDiv},  
  	init  
  });
```
The values in this object’s feeds array are Playlist IDs from your account dashboard.
To update a playlist used within the app, you will just need to update the playlist for the desired playlist id in your dashboard.
To add a new playlist to the app, create a new playlist in your dashboard and add the created playlist’s id to this array.
You will need to restart the app to see your changes reflected.

Debugging

If you are using the Web Simulator, you can debug similarly to how you would debug in a browser. To pull up the web inspector, right click on the simulator and select Web Inspector.

If you are using the Emulator or TV, you can right click on the project and select Debug As -> Tizen Web Application and a web inspector will appear.

Possible Issues

Check out JW Player Tizen Troubleshooting.

Still need help? Please open an issue in this repo or reach out to our Support Team.

Helpful Resources

Tizen App Development Guide
Building a React App for Tizen
Official Samsung Tizen Demo Apps
Tizen Remote Controls Reference
Full list of Tizen Platforms and the devices that support them here.
- Tizen 4.0 and below is supported on 2018 TVs
- Tizen 5.0 and below is supported on 2019 TVs

jwplayer / jwplayer-tizen-app