Share a playlist in Wowza Video

Once you've created a playlist in Wowza Video, you can share it with your audience to keep them engaged and to enhance their viewing experience.

A playlist can be shared using a code snippet to embed the player on your site or through a Wowza Video hosted page. The embed code or hosted page loads Wowza Flowplayer with the playlist plugin to play all videos in the playlist sequence. 

We provide the following ways to embed a playlist:

• JavaScript embed code.
• Iframe embed code.
• Hosted page preview link.

Note: When sharing a playlist, you must attach it to a player configuration. You can use the default player configuration for this purpose, or you can create your own player configuration. For more, see About player configurations in Wowza Video.

Before you start

Before you can share your playlist, make sure you've completed the following tasks:

• Create a manual or dynamic playlist with your video assets. For more, see Create a manual playlist in Wowza Video and Create a dynamic playlist in Wowza Video.
• If you don't have a player configuration or you're not using the default, create a new player configuration that suits your requirements.

Share a playlist

Use these steps to share an existing playlist from Wowza Video. With the embed code or preview link, you can add the playlist and its configuration to your websites.

1. In Wowza Video, click Playlists in the sidebar navigation.
2. Go to the Manual or Dynamic to find the playlist.
3. When the playlist displays, click Share Playlist.
4. In the Share playlist modal, go to the JavaScript embed, iFrame embed, or Hosted page tabs, depending on your use case:​
   • JavaScript embed — Copy this JavaScript code snippet and add it to your site to embed the player and playlist. 
   • iFrame embed — Copy this iframe embed code and add it to your site to embed the player and playlist.
   • Hosted page — Copy this URL and share it directly with your viewers. Wowza Video automatically generates a hosted webpage to display your player and playlilst. 

Embed a playlist using JavaScript

To programmatically work with the video player, the best option is to use the JavaScript embed code in your own sites. This allows you to interact with the video player and access the Wowza Video API 2.0.

1. Follow the directions in the Share a playlist section.
2. From the Share playlist modal, go to the JavaScript embed tab.
3. In the Configuration section, select a player configuration from the dropdown.
4. Click if you want to Hide playlist navigation controls in the player. This option removes the ability to navigate between playlist items from the player's control bar.
5. In the Playlist position section, select the radio button that applies to your use case:

• Right: Add the playlist to the player's right.
• Left: Add the playlist to the player's left.
• Hidden: Hide the playlist so it doesn't display with the player.
• Separate embed codes: Create two separate embed codes for the player and playlist. This provides more flexibility in cases where you want to separate the player and playlist, meaning you can separate and insert the code generated anywhere in your HMTL.

6. Select to Autoplay next video by default. If selected, the Time between videos field is activated, and you can add a value in seconds.
7. Select to Loop the playlist once it's finished playing.
8. Select Shuffle to add your videos to the playlist in a random order.
9. Once your configuration is complete, a Preview is generated based on the selected options.
10. Copy the Embed code and add it to your site to embed and display the player. The embed code looks similar to:

<div id="fp-player-container-2205b4e8-b160-43c2-868d-d88698a4e850" class="fp-playlist-layout right">
<script type="module">
import flowplayer from "https://embed.wowza.com/2205b4e8-b160-43c2-868d-d88698a4e850/91cc94ed-e7f2-461a-89f4-afaad5eac039.js";
flowplayer("#player-2205b4e8-b160-43c2-868d-d88698a4e850", {
  "playlist": {
    "controls": "#fp-player-container-2205b4e8-b160-43c2-868d-d88698a4e850",
    "advance": false,
    "shuffle": false,
    "skip_controls": true
  }
});
</script>
<div id="player-2205b4e8-b160-43c2-868d-d88698a4e850"></div >
<div id="fp-playlist-container-2205b4e8-b160-43c2-868d-d88698a4e850"></div>
</div>

Embed a playlist using iframe

Using an iframe embed code is a standard way to embed media content. Many services provide this as the only embed option.

We recommend using iframe embeds to add the player to your site. With iframe embeds, the code is easy to copy. Additionally, the video player is isolated in its own window, preventing conflicts with other items on the page.

Note: Using an iframe embed code limits the amount of interaction with the player since it resides in its own window. If you want to access the player object directly to programmatically interact with it or customize it more than what is provided using the iframe embed options, use the JavaScript embed code.

1. Follow the directions in the Share a playlist section.
2. From the Share playlist modal, go to the iFrame embed tab.
3. In the Configuration section, select a player configuration from the dropdown.
4. In the Dimensions section, select either Responsive or Fixed:

• ​Responsive: The player adapts dynamically to different screen sizes, resolutions, or orientations so it can remain user-friendly across devices like desktops, tablets, and smartphones.
• Fixed: The player has a fixed width and height that can be specified in pixels. The display doesn't dynamically adjust across devices.

5. In the Playlist position section, select the radio button that applies to your use case:

• Right: Add the playlist to the player's right.
• Left: Add the playlist to the player's left.
• Hidden: Hide the playlist so it doesn't display with the player.

6. Select to Autoplay next video by default. If selected, the Time between videos field is activated, and you can add a value in seconds.
7. Select to Loop the playlist once it's finished playing.
8. Select Shuffle to add your videos to the playlist in random order.
9. Once your configuration is complete, a Preview is generated based on the selected options.
10. Copy the Embed code and add it to your site to embed and display the player. The iframe looks similar to:

<iframe webkitAllowFullScreen mozallowfullscreen allowfullscreen src="https://embed.wowza.com/api/video/embed.jsp?id=91cc94ed-e7f2-461a-89f4-afaad5eac039&pi=2205b4e8-b160-43c2-868d-d88698a4e850&display=right" byline="0" portrait="0" frameborder="0" allow="autoplay" width=800 height=600></iframe>

Share a playlist using a hosted page

You can directly share the player and playlist with your viewers using a hosted page URL. When you use the hosted page configuration option, Wowza Video automatically generates and hosts a web page for you with the embedded player and configured playlist.

1. Follow the directions in the Share a playlist section.
2. From the Share playlist modal, go to the Hosted page tab.
3. In the Configuration section, select a player configuration from the dropdown.
4. In the Playlist position section, select the radio button that applies to your use case:

• Right: Add the playlist to the player's right.
• Left: Add the playlist to the player's left.
• Hidden: Hide the playlist so it doesn't display with the player.

5. Select to Autoplay next video by default. If selected, the Time between videos field is activated, and you can add a value in seconds.
6. Select to Loop the playlist once it's finished playing.
7. Select Shuffle to add your videos to the playlist in random order.
8. Once your configuration is complete, a Preview is generated based on the selected options.
9. Copy the Preview link and share it with your viewers. The URL looks similar to:

https://embed.wowza.com/hosted/2205b4e8-b160-43c2-868d-d88698a4e850/91cc94ed-e7f2-461a-89f4-afaad5eac039?display=right