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
*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
appfolder from thetizen-demo-appdirectory into your workspace.- If you have issues importing the project, you can try loading it via
File -> Open Projects from File System...and select theappdirectory there instead.
- If you have issues importing the project, you can try loading it via
-
Open a terminal from the
tizen-demo-appdirectory and runnpm installto initialize the project dependencies. -
Run
npm run build. This will generate ajw-tizen.cssandjw-tizen.jsfile in 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>
-
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 SDKtab -
Install the
Samsung Certificate Extension -
Install
TV Extension Tools -
Install any
TV Extensions-{version}
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 TVand scroll down to find the 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.
-
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.
*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)
- 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
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
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.
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.
-
Any changes made to the application’s source code belong in the
srcfolder. -
Run
npm run 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