Quick Start: Using the Players Module to Create and Publish a Player

Product(s)
Video Cloud
Role(s)
Studio User
Player Developer
Task(s)
Create & Configure Players

The purpose of this Quick Start is to show you how you can create and publish a player using the Players module in Video Cloud Studio.

 

After completing this Quick Start, you should be able to:

  • Navigate inside the Players module
  • Create a player
  • Set player properties
  • Pass a Video Cloud video ID to display in the player
  • Preview and publish a player

Note: If you are looking to publish a playlist or a single video to a player, use the publish function inside the Media module. For more information, see Publishing Videos and Playlists with the Media Module.

Audience

Any video publisher who needs to create and publish videos using the Players module.

Prerequisites

  • A Video Cloud account with access to the Players module
  • A video in your Video Cloud account to publish; The video used in this Quick Start can be downloaded here or you can use your own content
  • If you are using the video provided with this Quick Start, upload it to your Video Cloud account

Instructions

To create and publish a Brightcove player using Video Cloud Studio, you will complete the following tasks:

Create a player

To create a new player, follow these steps.

  1. Login to Video Cloud Studio.
  2. The current Video Cloud account name will appear in the upper right corner of the page. If you have multiple accounts, click the current user - current account link and select the account you would like to create the player in.
  3. Click the Players link in the navigation header.
  4. Click the New Player button.
  5. Enter a Name and Short Description for the player. For this Quick Start, the player name will be Sample Player.
  6. Confirm that the player appears in the list of players.

When a new player is created using the Players module, the player is built using the latest player version as published by Brightcove. To see the player version, open the Players module and click on the player that you want to check. The Player Information properties will display the Published Player Version.

Note that all players may not be the same version. As Brightcove continues to develop and improve the Brightcove player, new player versions will be released. By default, updates are applied to all players automatically. To prevent auto-updating of a player, you must set the Update Mode setting to Manual (also known as locking a player). For more information, see Setting the Player Update Mode and Version.

Configure the player dimensions

By adding player dimensions, width and height parameters will be added to the iframe embed code. If you leave the dimensions blank, the player can be put into a <div> of any size on a page and it will expand to fill the space. To set the player dimensions, follow these steps.

  1. Click the link for the Sample Player to open the player properties page.
  2. Click Player Information in the left navigation menu.
  3. Set the Aspect Ratio to 16:9.
  4. Set the Player Width to 640.
  5. Click Save.

For more information on the Player Information properties, see Setting Player Information Properties.

Publish and preview the player

Publishing the player will push the changes to the published player. For more information on preview players, published players and player publishing code, see Generating Player Embed Code.

To publish the player, follow these steps.

  1. Click Publish & Embed and then Publish Changes to publish the player.
  2. Confirm that the publish was successful.
  3. Click on the Player URL to open the published player in a new browser tab. The player will be empty as no video has been assigned to the player.

    Note: You may see the message, "Your player is being published. Your content is being updated, and may not be ready to view. This could take a few minutes.". If you see this message, changes to the published player are in progress. Proceed once the message goes away.

Dynamically assign video content to the player

For this Quick Start, we will dynamically assign a Video Cloud video ID to the player by using a URL parameter. To do this, follow these steps.

  1. Open the Media module and locate the video you want to publish. The video ID will appear below the video name.
  2. Copy the video ID to the clipboard.
  3. Return to the tab with the published player. To dynamically pass in the video ID to display, append the following to the URL and press enter:
    ?videoId=your video id

    Note: The URL parameter name is case sensitive.

    The complete URL will look something like:

    https://players.brightcove.net/1486906377/Ctzra7vEL_default/index.html?videoId=5798846643001
  4. Confirm the video appears.

Configure styling properties

The style properties are used to customize the appearance of the player. For more information on styling players, see Styling Players.

To configure the style settings, return to the Players module and follow these steps.

  1. Click Styling in the left navigation menu.
  2. Select a Play Button Shape and Play Button Position.
  3. In the Color Theme section, click the Main color picker.
  4. Click the red color on the ride side of the control. Click in the square to select a shade of red.
  5. Click outside of the control to collapse the color picker.
  6. Note that below the preview player there is a message stating that changes have been made to the player.

Configure social sharing properties

When social sharing is enabled, a share icon will appear at the bottom of the player next to the playhead. This will allow viewers to share your content out to popular social media sites. For more information on configuring the social properties for a player, see Configuring the Social Properties for a Player.

To configure the social settings, follow these steps.

  1. Click Social in the left navigation menu.
  2. Check the Enable Sharing checkbox.
  3. Select all of the social media sites.

Preview the player

The preview player on the page should reflect the styling and social changes that have been made to the player.

Note: If you return to the published player that we opened earlier and refresh the page, you will notice that these changes are not live in the published player. The color and social changes will not be pushed to the published player until the changes have been published inside of the Players module.

It is also possible to generate the publishing code for the preview player. For example, maybe the marketing department needs to approve all changes made to the player. You can send them a URL to the preview player so they can approve the changes. To generate the publishing code for the preview player, follow these steps.

  1. On the Players module homepage, click Embed Code & URL and click Preview Player. The Preview Player Embed Code dialog will display.
  2. Click the Player URL to open the preview player in a new browser tab.
  3. The preview player should occupy the entire width of the browser page and have a Brightcove logo overlay indicating that it is the preview player. Confirm that the color changes and viral promotion changes are visible.
  4. Leave the preview player open and return to the Players module.

Publish the final player

The changes in the preview player will not be visible in the published player until the changes are published. To publish the changes, follow these steps.

  1. In the Players module, click Publish & Embed and then Publish Changes to publish the player.
  2. Confirm that the publish was successful.
  3. Return to the browser tab with the published player. Remember, the preview player will display a Brightcove logo overlay.
  4. Refresh the page and verify that the color change and viral promotion settings are now visible in the published player. Note that there might be a slight delay before the changes appear in the published player.