Quick Start: Using Brightcove Player Studio to Create and Publish a Player

Product(s)
Brightcove Player
Role(s)
Studio User
Task(s)
Create & Configure Players
Get Started using Brightcove Player Studio

The purpose of this Quick Start is to show you how you can create and publish a player using Brightcove Player Studio.

Note: If you are using Video Cloud Studio, see Quick Start: Creating and Styling a Player. This topic is for publishers who are using the Brightcove Player only (Brightcove Player Studio).

 

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

  • Navigate inside Brightcove Player Studio
  • Create a player
  • Set player properties
  • Preview and publish a player

Audience

Video publishers who are using the Brightcove Player only (not Video Cloud) and need to create and publish videos using the Brightcove Player.

Prerequisites

  • A Brightcove Player account

Using the Quick Start assets

For this Quick Start, a poster image as well as HLS and MP4 video files are provided. You can download these files and place them on your own server or use the file URLs provided in this Quick Start.

Using Brightcove Player Studio to create and publish a Brightcove player

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

Create a player

To create a new player, follow these steps.

  1. Login to Brightcove Player Studio at https://studio.brightcove.com/products/player.
  2. The current 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.

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. Locate the Settings section and click Edit.
  3. Set the Aspect Ratio to 16:9.
  4. Set the Player Width to 640.
  5. Click Save.

For more information on the Settings properties, see Configuring Player Settings.

Assign video content to the player

The Video Content properties are used to set a poster image and assign video content to the player. The poster image is displayed in the player until the video starts playing. For the video content, providing both an HLS and MP4 asset will allow for the widest browser, platform, and device support. To configure the video content properties, follow these steps.

Note: If you have downloaded the sample files and have them hosted on your own servers, the URLs listed below should be updated to reflect where you have saved the video content.

  1. Locate the Video Content section and click Edit.
  2. Configure the first Video URL:
    • Media Type: HLS
    • URL: http://solutions.brightcove.com/bcls/docs/quickstart/laughing-gull.m3u8
  3. Configure the second Video URL:
    • Media Type: MP4
    • URL: http://solutions.brightcove.com/bcls/docs/quickstart/laughing-gull.mp4
  4. Set the Video Still Image URL to http://solutions.brightcove.com/bcls/docs/quickstart/laughing-gull.png
  5. Set the Media Dimensions to 640 x 360.
  6. Click Save.

For more information on the Video Content properties, see Configuring the Video Content Properties for a Player.

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 and then Publish again to confirm the player publish.
  2. Confirm that the publish was successful.
  3. Click Embed Code & URL and click Published Player. The Published Player Embed Code dialog will display.
  4. Click the Player URL to open the published player in a new browser tab.
  5. Leave the published player open and return to Studio.
  6. Click OK to close the publishing dialog.

Configure styling properties

The styling properties are used to configure the player skin and the icon, progress bar and background colors. For more information on styling players, see Styling Players.

The player skin controls the overall look of the player. Two player skins are available, Luna and Graphite.

To configure the style settings, follow these steps.

  1. Locate the Styling section and click Edit.
  2. Click the Progress Bar color picker.
  3. Click the red color on the right side of the control. Click in the square to select a shade of red.
  4. Click outside of the control to collapse the color picker.
  5. Click Save.

Configure social 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 sharing properties for a player, see Configuring the Social Properties for a Player.

To configure the social sharing settings, follow these steps.

  1. Locate the Social Sharing section and click Edit.
  2. Set Allow Sharing to Yes.
  3. Select all of the social media sites.
  4. Click Save.

Preview the player

The preview player at the top of the player settings page should reflect the styling and social sharing changes that have been made to the player.

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

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. 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 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 Studio.

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. Click Publish and then Publish again to confirm the player publish.
  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.