Self-host JW Showcase

JW Showcase is a sample application that leverages playlists from JW Player's Dashboard to distribute your content across platforms. This guide will provide instructions for getting set up with our web app.

Getting Started
Download the latest version

For basic configuration, we recommend downloading the precompiled version of JW Showcase from Github under “Downloads” for the latest release. For instructions on advanced configuration and customization of the JW Showcase source code, see our Developer Guide.



Configure Your App

Unzip the precompiled app and open  the config.json file located in the root folder of the precompiled app folder in any text editor.



Here you’ll need to replace the sample “player”, “featured playlists”, and “playlists” with media ids from your library within the JW Player dashboard.

 
{
   "player": "DTYxzkKG",
   "theme": "light",
   "siteName": "JW Showcase",
   "description": "JW Showcase is an open-source, dynamically generated video website built around JW Player and JW Platform services. It enables you to easily publish your JW Player-hosted video content with no coding and minimal configuration.",
   "bannerImage": "images/logo.png",
   "footerText": "Powered by JW Player",
   "backgroundColor": "",
   "featuredPlaylist": "lrYLc95e",
   "playlists": [
       "WXu7kuaW",
       "Q352cyuc",
       "oR7ahO0J"
   ]
}

To locate your player ID, navigate to “Tools” under the “Players” section of the dashboard.


Select the player you wish to use for your app under “Cloud Hosted Player Libraries”. The library URL for that player will contain your player ID.


Replace the ID in the config.json file with your own, ie:
 

"player": "DTYxzkKG",

Next, to set your “featured playlist” and “playlists” for the app, navigate to “Playlists” under the “Lists” section of the dashboard.




Click into any playlist you wish to display in your app and grab the playlist ID from the top of the playlist detail page.


Replace the “featured” and “playlists” IDs in the config.json file, ie:

"featuredPlaylist": "lrYLc95e",
   "playlists": [
       "WXu7kuaW",
       "Q352cyuc",
       "oR7ahO0J"
   ]

 

 

Branding Your App

In the config.json file, you can choose between a “light” and “dark” theme option for the app to match your branding and customize the footer text. You can also designate a site name and description, which will be added to the app’s metadata.
 
{
   "player": "DTYxzkKG",
   "theme": "light",
   "siteName": "JW Showcase",
   "description":  "JW Showcase is an open-source, dynamically generated video website built around JW Player and JW Platform services. It enables you to easily publish your JW Player-hosted video content with no coding and minimal configuration.", 
   "bannerImage": "images/logo.png",
   "footerText": "Powered by JW Player",
   "backgroundColor": "",
   "featuredPlaylist": "lrYLc95e",
   "playlists": [
       "WXu7kuaW",
       "Q352cyuc",
       "oR7ahO0J"
   ]
}

To add your logo to the app header, simply replace the “logo.png” file in the “images” folder with your own image. Be sure to keep the name “logo.png” as this is referenced elsewhere in the app.

Launching Your App

Once you have configured and branded your app, you can use any FTP client (ie. Cyberduck) to upload the files from your app onto your own web server.

Did you find this article helpful?

Please log in to rate this article.