Add a cloud-hosted player (Web Player)

The cloud-hosted player provides flexibility to configure playback behavior, customize experiences, and access the latest features using the dashboard or JSON.

This article explains how to implement a cloud-hosted player on your site.

Prerequisite

Item Description

Item	Description
Media	Content to play within the player For best results, use media or playlists managed in the dashboard. This approach ensures access to optimized renditions, thumbnails, and bandwidth handling. Follow these steps to obtain the platform-hosted media or playlist URL: Single Media In your Media library, copy the ID from the Media ID column. On the Properties page, copy the Property ID for the property associated with the media. Replace the `{site_id}` and `{media_id}` placeholders with the property ID and media ID values to construct the media URL: `https://cdn.jwplayer.com/v2/sites/{site_id}/media/{media_id}/playback.json` Playlist On the Playlists page, click the name of a playlist. The playlist settings appear. On the Developers tab, copy the JSON URL. You can also host your media on your own servers. However, self-hosting requires manual optimization for renditions, thumbnails, and adaptive streaming.

Media

Content to play within the player

For best results, use media or playlists managed in the dashboard. This approach ensures access to optimized renditions, thumbnails, and bandwidth handling.

Follow these steps to obtain the platform-hosted media or playlist URL:

Single Media

In your Media library, copy the ID from the Media ID column.
On the Properties page, copy the Property ID for the property associated with the media.
Replace the {site_id} and {media_id} placeholders with the property ID and media ID values to construct the media URL:
https://cdn.jwplayer.com/v2/sites/{site_id}/media/{media_id}/playback.json

Playlist

On the Playlists page, click the name of a playlist. The playlist settings appear.
On the Developers tab, copy the JSON URL.

You can also host your media on your own servers. However, self-hosting requires manual optimization for renditions, thumbnails, and adaptive streaming.

Add a cloud-hosted player

Follow these steps to add a cloud-hosted player on your webpage:

On the Players page, hover over a player name.
At the end of the row, click ⋯ > Copy player library URL. The player library URL is copied to your clipboard.
Within the <head> of your site page, paste the URL to the player library within a <script> element.
```
<script src="{PLAYER_LIBRARY_URL}"></script>
```

Embed the player with media in the <body> of your webpage:

playlist (JSON/RSS): Configures the player to load a JSON or RSS playlist URL
playlist (array): Configures the player to load a self-hosted media file or a specific JWP Platform media rendition

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

<script>
    jwplayer("myElement").setup({
        "playlist": "{json_or_rss_url}"
    });
</script>

<!-- Example: Load a self-hosted media file or specific platform-hosted media rendition -->

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

<script>
    jwplayer("myElement").setup({ 
        "playlist": [{
            "file": "{media_resource_url}"
        }]
    });
</script>

When your viewers visit the page, they can click the play icon and watch your content.

💡
Troubleshoot your player setup if issues occur.
Most cloud-hosted setups don’t require additional coding. If you have a unique use case, refer to the Advanced Topics articles in the side navigation for additional customization guidance.