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:
- Create a custom player template
- Edit a custom player template
- Define 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 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
|
Display the video’s title on the player or not.
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 |
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.
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.