Support for Video Content with Transparency Elements

Situation Description

To create a unique and customized broadcast grid, the SmartPlayer team has developed and added a new feature for video content. For video content using transparency, a chroma key functionality allows part of the video to be replaced with transparent elements. Working with transparency thus enables a more personalized broadcast grid and diversifies the content displayed on the device.

This functionality is supported on devices running the following operating systems:

• Android
• Windows
• Linux
• Raspberry

Brief Overview of the Functionality

Chroma key (or "green screen") is a compositing technique used to highlight and replace the background of an image or video. During chroma keying, a specific color (often green or blue) is made transparent, allowing that background to be replaced with another image or video. This method is widely used in film and video production.

Action Steps

To start using this functionality, the user needs to log into the SmartPlayer personal account.
Next, the user should go to the "Content" section in the personal account and upload the appropriate video content by dragging and dropping it from local storage on the device.

Example of "Content" section display in SmartPlayer personal account

The content uploaded by the user will appear in the list of content available in the personal account for playback.

Example of uploaded content displayed in the personal account

After adding the content, the user should go to the "Broadcasts" section and select the "Create" category.

Example of "Broadcasts" section and "Create" category display

To create a broadcast, the user needs to select an area for content playback using a special icon.

Example of "Broadcasts" section and "Create" category display

The next step is to add two types of content: first, transfer content, such as an image, and then add video content with chroma key usage to the same area.

Example of properly configured broadcast for chroma key usage

Make sure to align the playback duration for both types of content in the broadcast, as shown in the screenshot above.

The user then needs to click on the video content in the zone to open the content settings toolbar on the right side of the screen.

Example of content settings toolbar display

In the opened settings toolbar, the user should select the "Content Settings" section.

Example of the "Content Settings" section display

After selecting "Content Settings," the user also needs to select the operating system of their device to locate the chroma key setting.

Example of settings with OS selection display

Once the correct OS settings are selected, the user will see the "Chroma Key" settings block. Two settings are available:

1. Checkbox for enabling/disabling chroma key
2. Color selection for chroma key – options: select color from palette, RGB model, HEX code

Example of chroma key settings display

When selecting the desired color for the chroma key, the user will be able to replace the portion of the video content that matches the chosen color with other content. It’s crucial to select a color from the palette that is as close as possible to the color the user wants to remove from the video content. If the color is selected incorrectly, the functionality may not work.

Once all settings are completed, the user should click the save button in the toolbar on the right and continue creating and configuring the broadcast for screen output.

Example of the "Save" button in chroma key settings

Related Information

To fully understand how this functionality operates, the user needs to launch a scheduled broadcast. For information on the steps for creating a broadcast and schedule, the following Wikipedia articles are recommended:

• Раздел "Устройства"
• Раздел "Контент на устройства"
• Раздел "Трансляции"
• Раздел "Расписание"

Video Tutorial

Supporting Video Content with Transparency

Additional Information

If this article does not help in using the functionality as intended, or if there are still questions after reading, users can ask questions in the "Discussions" section at the top of the page.

Example of "Discussions" tab display on a wiki page

Additional information can also be found on the page How to interact with the "Discussions" section