Quick Start: Creating and Styling a Player

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

The objective of this Quick Start is for you to be able to create and style players using the Players module.

After completing this Quick Start you should be able to:

  • Create a player
  • Style a player

Creating players

The Players module is used to create and style players. Once inside the Players module, click New Player and then enter a name for the player. Click on the player name to set the player properties. There are numerous player properties that can be configured to customize the look and feel of the player:

  • Player Information - Used to view the player version number and to customize the player name and short description
  • Styling - Used to select a player skin, configure the icon, progress bar and background colors and configure a player overlay
  • Player settings - Used to configure video auto-start, fullscreen options, and the player dimensions
  • Plugins - Use a combination of HTML, JavaScript and/or CSS to customize the behavior of the player
  • Social Sharing - Used to configure the social sharing options for the player
  • Endscreen - Used to configure what is displayed when a video ends
  • Availability - Used to restrict the videos within a player to show only in specified domains

The following video tutorial will give you an overview of the Players module.

 

Styling players

The styling properties can be used to configure the:

  • Player skin
  • Icon, progress bar and background colors
  • Logo overlay

To access the styling properties, click on the player name, locate the Styling section and click Edit.

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

To change a color:

  1. Click a color picker.
  2. Click a color on the right side of the control.
  3. Click in the square to select a shade of the desired color. A color can also be set by entering a hex color code into the text control.

A logo overlay is an image that will appear over the player. A sample overlay is shown below.

After making any changes to a player, you must publish the changes by clicking the Publish button before the changes will appear in published players.

Hands-on Task: Creating and styling a player

In this task you will create and style a player.

Create a new player

Style the player

  1. In Video Cloud Studio, click Players to open the Players module.
  2. Click New Player.
  3. Enter Custom Player for the name and click Save.
  4. Click the Custom Player link to open the player properties.
  5. Locate the Styling section and click Edit.
  6. Select a player Skin.
  7. Click the Progress Bar color selector and set the color to a shade of red.
  8. Click Save to save the changes. Note that the color changes will be reflected in the preview player at the top of the Players module.
  9. Click Publish to publish the changes.