Using Playlists in Player V4

You can create playlists for Player V4 using Ooyala Theme Builder. Some differences exist in the way you configure and embed playlists for Player V4 and Player V3. For detailed information about Theme Builder, see Playlists and the Theme Builder User Interface.
Note: Playlist pods are not supported in this release.

Supported Player Versions

Playlist integration with Ooyala Theme Builder is supported in Player V4 version 4.10.4 or later.

Supported Browsers

Playlist integration runs on all supported Player V4 browsers (see Supported Environments for the Player V4 Skin).

Supported Theme Builder UI Settings in Player V4

The following table describes which settings in the Theme Builder user interface are supported in Player V4.
ThemeBuilder Tab Setting Notes
Playlists tab All Settings Fully Supported
Players tab    
  Choice of player Required. This selection defines the PLAYER_ID specified in the embed code.
  Setting subtab Not supported. Configure Player V4 skin settings instead. See Customizing the Player V4 Skin with skin.json.
  Controls subtab Not supported. Configure Player V4 skin settings instead.
  Screens subtab Not supported. Configure Player V4 skin settings instead.
  Pods subtab Supported. See the following settings.
  Type Supported. Corresponds to the orientation page-level parameter.
  Overflow Supported. Corresponds to the podType page-level parameter.
  Position Supported. Corresponds to the position page-level parameter.
Note: If specified as a page-level parameter, this setting overrides the orientation setting.
  Thumbnail Size Supported. Corresponds to the thumbnailsSize page-level parameter.
  Thumbnail Spacing Supported. Corresponds to the thumbnailsSpacing page-level parameter.
  Font size Supported. Corresponds to the wrapperFontSize page-level parameter.
  Playlist elements Supported. Corresponds to the caption page-level parameter.
  Caption position Supported. Corresponds to the captionPosition page-level parameter.
Embed tab    
  Player Required. This selection defines the PLAYER_ID specified in the embed code.
  Playlist Required. This selection defines the PLAYLIST_ID specified in the embed code.
  Video This will overwrite the embed code of your video if set to 'specific video'.
  Settings  
  Auto Play Supported. Corresponds to the autoplay page-level parameter. See Embedded Parameters for Player V4.
  Auto Repeat Supported. Corresponds to the loop page-level parameter. See Embedded Parameters for Player V4.
  Player Size Not supported. Configure Player V4 skin settings instead.
  Width Not supported. Configure Player V4 skin settings instead.
  Generate Embed Code You will use portions of the generated V3 embed code when you embed Player V4 format on a web page.

Integrating a Playlist with Player V4

  1. Create and configure the playlist in Theme Builder. See Working with Playlists in Theme Builder and Working with Players and Pods in Theme Builder (refer to the table above for supported settings).
  2. In Theme Builder, generate the embed code (Player V3 version). See Working with Embeds in Theme Builder (refer to the table above for supported settings).
  3. On the web page where you load your player, add the Playlists plugin (playlists.js) to the <head> section, somewhere after you specify core.min.js. See Hosting Player V4 Resources.
    <html>
        <head>
            <title>My Test Player V4 Web Page</title>
            <!-- V4 JS core is required. Plugins such as skin, discovery and Advertising need to be loaded separately -->
            <script src="url_where_hosted/core.min.js"></script>
            <!-- Change these html5-skin.min.css and html5-skin.js to your local build if necessary -->
            <script src="url_where_hosted/html5-skin.min.js"></script>
            <link rel="stylesheet" href="url_where_hosted/html5-skin.min.css"/>
            <!-- A Video Plugin is required. This example shows the Main Video Plugin -->
            <script src="url_where_hosted/main_html5.min.js"></script>
            <!-- Playlists Module -->
            <script src="url_where_hosted/playlists.js"></script>
        </head>
        ...
    <html>  
  4. On the web page where you load your player, use specific portions of the generated embed code for Player V4 embedding. For example, if the generated Player V3 embed code is:
    <div id="playerContainer"></div>
    <script type="text/javascript" src="https://player.ooyala.com/v3/[PLAYER_ID]"></script>
    <script type="text/javascript">
    var ooyalaPlayer; 
       OO.ready(function() {
          var playerConfiguration = {
           playlistsPlugin: {"data":["[PLAYLIST_ID]"]},
           autoplay: false,
           loop: false,
           height: 357,
           width: 800,
           useFirstVideoFromPlaylist: true
        };
    You would use the following portions in your Player V4 page embed script:
    var playerConfiguration = {
        "playlistsPlugin": {"data":["[PLAYLIST_ID]"]},
        "autoplay": false,
        "loop": false,
      };

    You must also use the PLAYER_ID that is assigned here. A working playlist must have both the proper PLAYER_ID and its matching PLAYLIST_ID assigned or you will get an error for 'metadata' not found. The PLAYLIST_ID assigns the list of videos, but the layout, size, and look of the playlist is attached to the PLAYER_ID. The PLAYER_ID must match the setting for the playerBrandingId specified on the web page.

    Note: Ignore everything else in the generated Player V3 embed code.
  5. If you want, customize the playlist further by configuring the associated skin settings. See Customizing the Player V4 Skin with skin.json.

Playlist Page-level Parameters

Settings specified in Theme Builder override the playlist default settings. Settings specified in the following page-level parameters override settings specified in Theme Builder.
Note: Page-level parameter names are case sensitive.

Required Parameters

Name Description Type Default
playlistsPlugin Parent parameter for playlists. Object  
data PLAYLIST_ID from the generated embed code for this playlist. string none
Optional Parameters
Name Description Type Default
caption Contents of the caption for a video. You can specify any combination of title, description, and duration, or specify "none" to omit captions. Examples:
  • "caption": "title,description,duration"
  • "caption": "title,duration"
  • "caption": "none" (disables the default and displays no captions)
For each video, the values for the specified caption options come from Backlot. The values will be placed with each thumbnail.
string "title"
captionPosition Position of the caption. One of the following values:
  • "inside" places the thumbnail information over the thumbnail.
  • "outside" places the thumbnail information in a separate box to the side, above, or below the thumbnail.
string "inside"
orientation Playlist orientation. One of the following values:
  • "vertical"
  • "horizontal"
string "horizontal"
podType Pod type. If orientation: "horizontal", determines how the player handles clicking the right and left arrows. One of the following values:
  • "scrolling" moves one video at a time
  • "paging" moves one screen full of thumbnails ("page")
This setting has no effect if orientation: "vertical".
string "scrolling"
position Playlist position. One of the following values:
  • "left"
  • "right"
  • "top"
  • "bottom"
string "bottom"
thumbnailsSize Size (in pixels) of the thumbnail image. Must be smaller than the size of the video or the playlist will fail. number 150
thumbnailsSpacing Spacing (in pixels) between thumbnail images. number 3
useFirstVideoFromPlaylist
  • If true, allows a playlist to be loaded and have its first video set as the page's initial embedCode, rather than the actual embedCode placed on the page.
  • If false (the default), the actual embedCode placed on the page is used.
For example, if you had a playlist loaded into an already existing page, you could use this paraemter to allow the playlist to immediately replace the currently loaded / playing video. If a user is browsing collections of videos and chooses one of them, they would expect the first video of the selected collection to start playing (or at least be loaded right away) without performing additional clicks.
Boolean false
wrapperFontSize Size of the wrapper font. number 14

Was this article helpful?