Customize appearance of the built-in player

What are Players?

Player is a free feature that allows customizing the default player.

Let’s compare the default and custom player. To show you the customization options:

• We set new interface colors.
• Add a logo (dog icon in the bottom-right corner).
• Add the button to select the playback speed.
• Enable the "mute" option by default.

Configure your custom player

1. Go to the Players tab and click Create a player.

2. Enter the name of your player (it will be displayed in the Gcore Customer Portal) and click Create.

The configuration page opens. Complete the remaining steps in it.

3. Set the custom player as the default one for VOD or/and Live stream if you want to use this player for all videos/streams. You can also choose a custom player for a specific video or stream.

4. Enable necessary video behavior options:

• Autoplay. If the option is active, a video starts playing automatically when a user opens the website page with it. This option should be enabled if you want to playback Live imitation automatically.

• Mute. If the option is active, video plays with the sound off.

If both Autoplay and Mute options are active, only one option will work. It depends on an end user's browser policy (Mozilla, Chrome).

5. Enable necessary player control options:

• Disable skin. If the option is active, the player control elements are hidden. 
• Save user settings. If the option is active, users watch the video with the same quality and sound settings they have had previously. It works until the browser cache gets cleared.
• Share video. If the option is active, a sharing button appears in the upper-right corner of the video for the users to post it to social networks.
• Playback speed control. If the option is active, users can slow down and speed up VOD playback. 
• Pause when clicking on player. If the option is active, video stops by clicking at any point on the player's screen.

6. Select colors for different elements of your player:

• Background color for the bottom panel of the player.
• Foreground color for the elements on the bottom panel.
• Text color for timeline.
• Hover color for those elements on the bottom panel that the cursor is hovering over.

7. To collect data on your viewers' actions in the player, activate the Enables Google Analytics option and specify your Google Analytics ID.

8. Add a logo that will be displayed on the screen.

9. Select the logo position. 

10. Save changes.