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 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.
Download Tizen SDK: https://developer.tizen.org/development/tizen-studio/download
-
Clone or download this repository.
-
Launch Tizen Studio and select
File -> Import -> Tizen -> Tizen Project -
Import the
appfolder from thetizen-demo-appdirectory into your workspace. -
Open a terminal from the
tizen-demo-appdirectory and runnpm installto initialize the project dependencies. -
Run
yarn build. This will generate or updatejw-tizen.cssandjw-tizen.jsin theapp/distfolder, 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 PageIn 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>
-
In order to run the application, you need to create an author and a distributor certificate: Samsung Creating Certificates Docs.
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, go to
Menu > Support > Contact Samsung > Unique Device ID.
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.
- Right click the project and select
Run As > Tizen TV Web Simulator Application (Samsung TV)
*Right click on the simulator to open a settings menu so you can access things like the web inspector.
- 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
*The emulator can lag, so it is recommended to use a real device if possible.
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:
-
Open the TV Settings Menu by selecting SETTINGS on your remote or navigating to SETTINGS from the Smart Hub
-
Select
General -> Network -> Network Status -> IP Settings
-
-
When configuring the device in Tizen Studio, if there is no port, keep the default
26101port
Once you finish setting up and configuring in Tizen Studio
- Right click the project and select
Run As > Tizen Web Application
-
Any changes made to the application’s source code belong in the
srcfolder. -
Run
yarn buildafter any changes to update the compiled dist files. -
You will need to restart the app to show any changes.
To change the media used within the application, you will need to update the playlist feeds supplied to it.
-
In
src/js/index.jsin theinitfunction, 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
feedsarray 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.
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.
Check out JW Player Tizen Troubleshooting.
Still need help? Please open an issue in this repo or reach out to our Support Team.
-
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