Announcing our brand new Developer Guides and API documentation in beta! Click here to see the new docs.

Add an HTML5 player to a site

Last Updated: June 26, 2019

To add a player to your site, you must add a reference to the player library, embed the player, and configure the player with content.


Get a player library

You can get a player library in several ways. The following table explains the cloud-hosted and self-hosted approaches that you can use. Review the approaches and follow the process for the approach that suits your implementation needs.

Approach Process
Cloud-hosted by JW Player without API calls 1. From your dashboard, click Players > Downloads & Keys.
2. In the Cloud Hosted Player Libraries section, select a Player Title from the dropdown menu.
3. Copy the Cloud Player Library Url.
Cloud-hosted by JW Player with API calls 1. Make a call to api.jwplatform.com using GET /players/list to list the players in your account. If this is your first time using the Management API, read our documentation on authentication and call syntax.

2. Locate the key in the response, for example: {key: "aBCdE12G"}.

3. Construct the cloud-hosted player library URL with the key: https://cdn.jwplayer.com/libraries/{key}.js.
Self-hosted Use of a self-hosted JW Player library requires a JW Player Enterprise license. Please contact our team if you would like to upgrade your account.

1. From your dashboard, click Players > Downloads & Keys.
2. In the Downloads section, select a VERSION of the self-hosted JW Player library from the dropdown menu.
3. Click the icon in the DOWNLOAD column.
4. Copy the LICENSE KEY for the JW Player library.
5. Rename and upload the unzipped library folder to your server. When renaming the folder, remove the periods from the folder name.


Add library reference and embed player to a page

Now that you have the URL for your player library, you can add a library reference to a page and embed a player.

  1. In the <head> of your page, add a reference to the player library JavaScript file. If you are self-hosting your player, also add your license key: jwplayer.key="{license_key}".
  2. Create a named <div> in the <body> of your page in the location where the player should appear.
  3. Call setup() with the playlist property to instantiate the player in the named <div>.

    In addition to instantiating an instance of a player, setup() allows you to enable and configure player features. setup() is one of several methods that can be used to interact with the player.


Use the Code examples section to validate your implementation.


Code examples

The following code examples illustrate the code structure of a cloud-hosted or self-hosted player that has been implemented correctly.

Example 1: Cloud-hosted player with playlist defined by a URL referring to a JSON file containing a list of videos

<html>
  <head>
    ...
    <script src="https://cdn.jwplayer.com/libraries/aBCdE12G.js"></script>
    ...
  </head>
  <body>
    ...

    <div id="myElement"></div>

    <script type="text/JavaScript">

      jwplayer("myElement").setup({ 
        "playlist": "https://cdn.jwplayer.com/v2/playlists/xxxxYYYY"
      });

    </script>

    ...
  </body>
</html>



Example 2: Self-hosted player with playlist defined by an array of videos

<html>
  <head>
    ...
    <script src="https://www.yourdomain.com/jwplayer863/jwplayer.js"></script>
    <script>jwplayer.key="ABCdeFG123456SeVenABCdeFG123456SeVen=="></script>
    ...
  </head>
  <body>
    ...

    <div id="myElement"></div>

    <script type="text/JavaScript">

      jwplayer("myElement").setup({ 
        "playlist": [{
            "file": "/assets/sintel.mp4",
            "mediaid": "ddra5731"
        },{
            "file": "/assets/bigbuckbunny.mp4",
            "mediaid": "ddrx3v2a"
        }]
      });

    </script>

    ...
  </body>
</html>



Use this form to provide your feedback.