Player

Customize Player Template



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

Before we start 

If you are using the BlendVision Player SDK, you will have access to further customization options. Please refer instead to the Embed into Your Web/App for the following SDKs:

  • Web Player SDK
  • iOS Player SDK
  • Android Player SDK

Manage your custom player template

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

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

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 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
Turn on video mute

ON/OFF

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

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/AOD.

OFF

 

Play

ON/OFF

Enable to display “Play/Pause” button on the player to play or pause the content.

You can control playback in the iframe player using the APIs.

ON

Progress Bar

ON/OFF

Enable to display progress bar on the player to check the current status or drag it to the time users want to play.  

ON

Rewind

ON/OFF

Enable to display “Rewind” button on the player to rewind the content.

ON

Fast-forward

ON/OFF

Enable to display “Fast-forward” button on the player to fast forward the content.

ON

Timestamp

ON/OFF

Enable to display playback timestamp on the player to check the time elapsed/total duration of the content.

ON

Volume

ON/OFF

Enable to display “Volume” button on the player to increase/decrease volume.

ON

Settings

ON/OFF

Enable to display “Settings” button on the player to adjust quality, playback speed and loop feature.

ON

Full Screen

ON/OFF

Enable to display “Full Screen” button on the player to maximize the size of your screen.

ON

Chromecast

ON/OFF

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

ON
AirPlay

ON/OFF

Enable “AirPlay” to stream videos to your Apple devices. 

*The AirPlay feature is only available when using the Safari browser.

 

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

Please note that when using Audio Bar, the subtitle will not be displayed on the player.

  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 of 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
Play

ON/OFF

Enable to display “Play/Pause” button on the player to play or pause the content.

You can control playback in the iframe player using the APIs.

 

ON
Progress Bar

ON/OFF

Enable to display progress bar on the player to check the current status or drag it to the time users want to play.

 

ON
Rewind

ON/OFF

Enable to display “Rewind” button on the player to rewind the content.

 

ON
Fast-forward

ON/OFF

Enable to display “Fast-forward” button on the player to fast-forward the content.

 

ON
Timestamp

ON/OFF

Enable to display playback timestamp on the player to check the time elapsed/total duration of the content.

 

ON
Volume

ON/OFF

Enable to display “Volume” button on the player to increase/decrease volume.

 

ON
Settings

ON/OFF

Enable to display “Settings” button on the player to adjust quality, playback speed and loop feature.

 

ON
Full Screen

ON/OFF

Enable to display “Full Screen” button on the player to maximize the size of your screen.

 

ON
AirPlay

ON/OFF

Enable “AirPlay” to stream videos to your Apple devices. 

*The AirPlay feature is only available when using the Safari browser.

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 VOD/ AOD/livestream 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 VOD/AOD/livestream 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