Customizing Cinema8 Video Player

Customizing Cinema8 Video Player

It is an important component for branding to reflect the corporate identity on every platform used. Existing native players may not reflect your corporate appearance. However, thanks to the customizable player offered by Cinema8, you can engrave your brand in the mind of your audience.

There are two types of player customization options in Cinema8. one of them is the general settings that will affect all your videos, and the other one is the customization settings that can be made for each video. Let's see how to make it.


General Player Customization

By making the general settings of the Player, you can change the colors of the progress bar and control bar icons of your videos, and change the play icon with the visual that is your own design.
Login to Creative Studio to start. Click Settings on the left panel. Click Player Customization on the page. Let's look at what the options here do:

Timeslider Progress: You can change the color of the progress bar of your video here. It appears red by default. Click the color box next to it and choose a color. If you wish, you can make this color transparent. For this, after choosing the color, move the slider below and determine the transparency ratio. You may not want to adjust these parts manually. You can also use the existing hex color code of your corporate color by typing it in the box below this small window.

Timeslider Rail: You can change the color of your video's progress bar before loading. When there is no progress in the video, it appears white by default. You can change the color of this bar by clicking the color box next to it. If you wish, you can make this color transparent. For this, after choosing the color, move the slider below and determine the transparency ratio. You may not want to adjust these parts manually. You can also use the existing hex color code of your corporate color by typing it in the box below this small window.

Controlbar Icons: You can change the color of the play-pause, audio, settings and full screen mode icons on your video player from the Controlbar Icons section. Click the color box next to it and choose a color. If you wish, you can make this color transparent. For this, after choosing the color, move the slider below and determine the transparency ratio. You may not want to adjust these parts manually. You can also use the existing hex color code of your corporate color by typing it in the box below this small window.

Play Icon: You can change the play icon that appears in the middle of the video from the Play Icon section. To preview the Play icon, you can click the Preview Play Icon button located at the top of the small video here. To add a Play image here, you should first have an image that you designed as minimum size of 128x128 px. Click Select Image to begin. Click the Upload button on the upper right on the window to add from your computer. If you wish, you can drag and drop your image to this area. Or click the cloud icon and choose your image from your computer. When the upload is completed, you will receive “File uploaded successfully!” message. Then, click on the Close button. Your image has been added to the library, select your image from the window and click the Add button at the bottom right. Here it is ready!

Play Icon (Hover): You can change the Hover view of the Play icon that appears in the middle of the video from the Play Icon Hover field. To add a Hover image here, you should first have an image that you designed as minimum size of 128x128 px. Click Select Image to begin. Click the Upload button on the upper right on the window to add from your computer. If you wish, you can drag and drop your image to this area. Or click the cloud icon and choose your image from your computer. When the upload is completed, you will receive “File uploaded successfully!” message. Then, click on the Close button. Your image has been added to the library, select your image from the window and click the Add button at the bottom right. Here it is ready!
If you want to reset all changes, just click the Restore Defaults button below the small video area.


Player Customization for Per Video

Apart from the general adjustments, there is an area where you can adjust the player controls for each of your videos. To get started, you first need to create a project from your video in the library. You can click here to see the project creation steps. When you open the editor screen of your project, click on the Settings tab on the right panel. Let's look at what the options here do:

Settings

AutoPlay: If you want your video to play automatically when viewers open your video, you need to mark the AutoPlay feature.

Show Track Mark: When the video starts to be watched, the yellow points on the progress bar indicate where the interactive elements you added on your video are located. If you want these points to appear to the viewer, mark the Show Track Mark feature.

Show Share Icon: If you want people to share your video easily on social media, you can place the share icon on the top right of the video. To do this, mark the Show Share Icon feature.

Show Suggested Videos: If you want to add video suggestions at the end of your videos, you can mark Show Suggested Videos option. The suggested videos are presented to the viewers according to the tags you enter in your projects.

Pause Video When Tab is Inactive: You may want to stop your video when your viewers change tab or open a different application. For this, you need to mark Pause Video When Tab is Inactive feature.


Player Controls

Hide Seekbar: There may be situations that you don't want viewers to navigate in the video because of the interactions on the video. Mark the Hide Seekbar feature when you want to hide your player's navigation bar.

Hide Timer: Your video may have much more duration than a single viewer watches due to the interactions within your video. This may make the viewer feel that they will watch a very long video. Mark the Hide Timer feature when you don't want to show the video duration to your viewers.

Hide Play-Pause Button: When you add selection points to your interactive videos, you may have stopped your video. You may not want people to continue the video without making a selection. In such cases, mark the Hide Play-Pause Button feature.

Hide Volume: You can hide the audio on/off button on the video player by marking the Hide Volume feature.

Hide Full Screen: You can hide the full-screen button on the video player by marking the Hide Full-Screen feature.

Hide Settings: When the viewer clicks the settings button on the video player, viewers can adjust the video speed and quality and access the subtitle options of the videos you added. When you want to hide this button, you need to mark the Hide Settings feature.

Hide Rewind Button: In such cases where you do not want your viewers to rewind your videos, you can hide this feature by marking the Hide Rewind Button feature.

Hide Forward Button: In such cases where you do not want your viewers to forward your videos, you can hide this feature by marking the Hide Forward Button feature.


    • Related Articles

    • What is Video Element in Cinema8

      With the Video element, you can add videos on your video in full screen. If you want, you can activate a button where you can allow them to pass the video you put when the time expires. First, we drag and drop our element from the Elements list to ...
    • Introduction to Cinema8 Interactive Video Platform

      Cinema8 is an interactive video development platform founded by Gobito Digital Solutions in 2017. Cinema8, which meets the video needs of enterprise or individuals with its features such as production, hosting, broadcasting, and reporting, continues ...
    • Customizing Form Elements, Playing with Styles

      With Cinema8, you can easily customize your video player colours according to your company colours or personal tastes and make your video screen interesting. You can also embed fonts from Google Fonts to Cinema8 and use it in your interactive video ...
    • Using 3rd Party Video Streaming Servers

      Before creating an interactive video in Cinema8, you should have a linear video. So, let's look at the ways to select the video you will use. - Video Upload to Cinema8 (Streaming and Storage) - Cinema8 Stock Video Library - Synchronizing Another ...
    • Introduction to the Video Editor - The Creative Studio

      Cinema8 Video Editor provides users with the possibility of creating interactive video in a very simple way with its drag and drop methods and easy-to-use layer structure. Let's take a look at the general structure and design of Cinema8 Video Editor ...