Player

Customize Player Template



This article details the customizable settings of the player in the BlendVision One Showroom and the BlendVision One iframe Player as well as how to configure them using the BlendVision One web console.

Before we start 

If you are using the BlendVision One Player SDK, you will have access to further customization options. Please refer instead to the following documentation regarding the Player SDK:

Manage your custom player template

To manage the player template, log in to the BlendVision One web console and navigate to [Player > Settings] on the side menu.

You will be able to perform actions detailed in the following sections:

  • Create a custom player template
  • Edit a custom player template
  • Set the default player template
  • Delete a custom player template

Note: The preset template “Standard” can not be edited or deleted.

 

Create a custom player template

1. You can create a custom Video/AOD player template in two ways:

  • Click the “Add New Template” button to create a new custom player template
  • Check the template you prefer as the base, then click “Copy” from the drop-down menu to copy its properties and create a new template.

2. Customize the settings as needed and click the “Save” button to submit your new template.

  • Video

 

The BlendVision One iframe player offers a range of customizable settings to suit your branding and specific requirements. Below is a sample player with associated sample settings in the chart:

<iframe src="https://showroom.one.blendvision.com/embed?token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXNvdXJjZV9pZCI6ImQ2YmUxZTAxLWZjMGItNDBlNy05MDUwLTg1YjBiMzY2MTZkOCIsInJlc291cmNlX3R5cGUiOiJSRVNPVVJDRV9UWVBFX1ZPRCJ9.bo7P-OoVoAfEiLO_zew_jrEEzbQja6Sz4SxvJZY19oCV9MmEGrxc6s_cbCoIzvOs59itV3Xvgzvg2onlFoKVsMHoQd03Vyv3KwABVoOEyqmQuvAstnawR4096fQFjZiHFHJ7D1zMjUHe3lHoB3mGoq95I_NmJpe-AHag_yWVMSwjxldgXKd3Lg80LY6dSutGtLhpOJ9QliYHUJjpTT-gEr5AHrpEfYcxEv-arNBSA1pgUwID_-37uGsz2gj8I9acNRum7n3ucrIautbWs8fR6shYCiEIhb-r0iRDuexURp2my1OURxLBrtWumRAJR_1Q_G3DThpGImtu4rtfZCDjGA" width="640" height="360" allow="autoplay; encrypted-media; clipboard-write" frameborder="0" allowfullscreen></iframe>

 

Settings Functionality Sample

Hide All

 

ON/OFF

If you enable “Hide all”, all the UI controllers will be hidden and you can use the APIs to control the playback.

 

OFF

 

Layout

 

  1. Title:ON/OFF

Display the video’s title on the player or not.  

  1. Embedded/Standalone
  • Standalone design (with a [Back] button) is usually leveraged for websites/apps with a focus on immersive viewing experiences (ex. an OTT media platform).
  • Embedded design (without a [Back] button) is usually leveraged for websites/apps with more engagement features or information provided on the same page (ex. an online course platform).

Please note that this setting will only be applied to the iframe player.  The player in the showroom will have the embedded design by default.

ON

Embedded

Autoplay

ON/OFF

Autoplay the video when the player is initiated. It is suggested to enable "Turn on video mute" to prevent certain browsers from blocking autoplay.

ON
Loop

ON/OFF

If you enable the "Loop" playback setting, the video will be automatically replayed after it ends. Please be aware that this feature is only applicable to VOD/AODVOD.

ONOFF

 

Chromecast

ON/OFF

Enable “Chromecast” to cast videos to your Chromecast device. 

ON
Turn on video mute

ON/OFF

Mute the video when the player is initiated. The default setting is “ON”.

OFFON


Picture-in-Picture

ON/OFF

Support player Picture-in-Picture mode on showroom and iframe.
The watermark, cover image, and subtitle will not be displayed on the mini (children) player.
The default setting is “OFF”.

OFF
Share by Social Media

ON/OFF

Social media sharing options will be provided. Available social media platforms for desktops will be Twitter, LINE, and Facebook; mobile options will be defined by the iOS/Android sharing panel of the user's device.

OFFON
Share by Embed iframe

ON/OFF

iframe code will be provided on the sharing panel of desktop web, which enables end-users to embed your VOD/AOD/livestream on their own websites. Please note that this feature is not available when token protection is enabled.

OFFON
Information

ON/OFF

A long description will be provided in the information panel. You edit this for each of your VOD/AOD/livestream within their settings [General > Metadata > Long Description]. If no long description metadata is provided, this panel will not be displayed.

OFFON
Primary Color

#HEX

Define the primary color to display on the player via HEX values, including progress bar and toggle button on the settings section.

“Restore” button will be displayed to help you restore to the default value after you edit the color. 

#79B5FB
Panel Color

#HEX

Define the panel color on the player via HEX values, including the background of setting, volume bar, and information section.

“Restore” button will be displayed to help you restore to the default value after you edit the color. 

#212B36

 

  • AOD 

Layout-Poster View

Layout-Audio Bar

 

Settings Functionality Sample
Layout
  1. Audio Bar/Poster View

When playing audio, the displays of audio type can be chosen as Audio Bar or Poster View. The default setting is Poster View.

  1. Embedded/Standalone
  • Standalone design (with a [Back] button) is usually leveraged for websites/apps with a focus on immersive viewing experiences (ex. an OTT media platform).
  • Embedded design (without a [Back] button) is usually leveraged for websites/apps with more engagement features or information provided on the same page (ex. an online course platform).

Please note that this setting will only be applied to the iframe player. The player in the showroom will have the embedded design by default.

Poster View

Embedded

Title

ON/OFF

Display the audio’s title on the player or not.  

ON
Short Description

ON/OFF

This feature is only enabled when Layout “Audio Bar” is selected. Display the audio’s short description on the player or not, where it will be shown under the title. 

ON
Cover image

Default/Custom

You can set up your cover image on the player by default or by uploading your image. Cover image is always enabled on Poster View , but it can be turned on/off when Audio Bar is selected. 

Default
Loop

ON/OFF

If you enable the "Loop" playback setting, the audio will be automatically replayed after it ends. Please be aware that this feature is only applicable to VOD/AOD.

OFF
Chromecast

ON/OFF

Enable “Chromecast” to cast videos to your Chromecast device. 

ON
Share by Social Media

ON/OFF

Social media sharing options will be provided. Available social media platforms for desktops will be Twitter, LINE, and Facebook; mobile options will be defined by the iOS/Android sharing panel of the user's device.

ON
Share by Embed iframe

ON/OFF

iframe code will be provided on the sharing panel of desktop web, which enables end-users to embed your VOD/AOD/livestream on their own websites. Please note that this feature is not available when token protection is enabled.

ON
Information

ON/OFF

A long description will be provided in the information panel. You edit this for each of your VOD/AOD/livestream within their settings [General > Metadata > Long Description]. If no long description metadata is provided, this panel will not be displayed.

ON
Primary Color

#HEX

Define the primary color to display on the player via HEX values, including progress bar and toggle button on the settings section.

Restore” button will be displayed to help you restore to the default value after you edit the color. 

#79B5FB
Background Color

#HEX

Define the background color to display on the player via HEX values.

A “restore” button will be displayed to help you restore to the default value after you edit the color. 

#161C24
Panel Color

#HEX

Define the panel color on the player via HEX values, including the background of setting, volume bar, and information section.

A “restore” button will be displayed to help you restore to the default value after you edit the color. 

#212B36

 

 

Edit a custom player template

You can also edit a custom template you have previously created:

1. Check the template you prefer to edit, then click “Edit” from the drop-down menu.

2. Set the customizable settings as needed and click the “Save” button to submit the edited result.

After saving your template, the new settings will be reflected to all content that is assigned to use this template. 

 

Define a default player template

This function allows you to save time by automatically applying a default player template to new VODs/ AOD/livestreams you create.

Furthermore, if a template applied to a VOD/AOD/livestream is deleted, their template will automatically be replaced with the default template. Also, if the template applied to a VOD/AOD/livestream is replaced with another template during the event, the template will automatically reflect to the VOD/AOD/livestream. 

Please note that there can be only one default template at a time, and once a VOD/AOD/livestream has been created, changing the default template will not affect them.

Here's how you can change the default template:

1. Check the template you prefer as the default. Then Click the “Set as default” button to apply it as the default template

2. You can check the “Assigned” column for the numbers of VODs/AOD/livestreams using the selected template

 

Delete a custom player template

With the exception of the “Standard” template, templates can be edited or deleted at any time.

1. Check the template you want to edit, then click “Delete” from the drop-down menu.

2. Press the “Delete” button on the confirmation window to delete the selected template.

Note: After deleting a template, the current default template will be applied to all content currently using the deleted template.

 

Apply the customized player to your content

After applying the desired settings and customizing your player template, you can refer to Set up Player Features on how to set up the template for each of your content.

 

What's more

Updated