Video Player Customizations
/
How to Customize Video Controls with Cincopa
Last updated

How to Customize Video Controls with Cincopa

Cincopa provides powerful customization options for video controls. By leveraging runtime events, you can dynamically hide the controls, set custom colors, configure autoplay behavior, or add a company logo to the video control panel.

For more information, refer to the Cincopa Events Documentation.

Video Control Configuration Options

Overview of Arguments

ArgumentTypeDescription
hide_controlsStringtrue to hide video controls.
theme_color_mainStringHex value for the main theme color of the controls.
theme_color_main_2StringRGBA value for the player color, derived from the main theme color.
theme_color_main_bgStringRGBA value for the control bar background color, derived from the main color.
autostartStringConfigure autoplay behavior (true, false, desktop_only, mobile_only).
download_buttonBooleanEnable/Disable download button for asset
player_watermark_on_offBooleantrue to enable a watermark in the video control panel.
player_watermarkStringURL of the watermark image.
player_watermark_linkStringURL to open when the watermark is clicked.

1. Autoplay Configuration

You can set the video to autoplay conditionally based on the device type.

Options for autostart:

  • true: Autoplay on all devices.
  • false: Disable autoplay.
  • desktop_only: Autoplay only on desktop devices.
  • mobile_only: Autoplay only on mobile devices.

Example:

<script type="text/javascript">
var cincopa = cincopa || {};
cincopa.registeredFunctions = cincopa.registeredFunctions || [];
cincopa.registeredFunctions.push({
	func: function (name, data, gallery) {
    gallery.args.autostart = "desktop_only";
  }, filter: "runtime.on-args"
});
</script>

2. Hide Video Controls

You can hide the video controls by setting the hide_controls argument to true.

Example:

<script type="text/javascript">
var cincopa = cincopa || {};
cincopa.registeredFunctions = cincopa.registeredFunctions || [];
cincopa.registeredFunctions.push({
	func: function (name, data, gallery) {
   gallery.args.hide_controls = "true";
  }, filter: "runtime.on-args"
});
</script>

3. Add Company Logo to Video Control Panel

You can add a company logo to the video control panel by enabling the watermark feature and configuring its arguments.

Arguments:

  • player_watermark_on_off: Enable or disable the watermark (true or false).
  • player_watermark: Specify the URL of the watermark image.
  • player_watermark_link: Specify the URL to open when the watermark is clicked.

Example:

<script type="text/javascript">
var cincopa = cincopa || {};
cincopa.registeredFunctions = cincopa.registeredFunctions || [];
cincopa.registeredFunctions.push({
	func: function (name, data, gallery) {
    gallery.args.player_watermark_on_off = true;
    gallery.args.player_watermark = "https://wwwcdn.cincopa.com/_cms/design15/images/Smiling_Emoji_with_Smiling_Eyes.png";
    gallery.args.player_watermark_link = "https://www.cincopa.com/video-hosting";
  }, filter: "runtime.on-args"
});
</script>

4. Customize Control Bar Colors

You can customize the color of the control bar, including the main theme color, player color, and background color.

Example:

<script type="text/javascript">
var cincopa = cincopa || {};
cincopa.registeredFunctions = cincopa.registeredFunctions || [];
cincopa.registeredFunctions.push({
	func: function (name, data, gallery) {
    gallery.args.theme_color_main = "dd5ad9"; // Hex value for the main theme color

    var rgb = hexToRgbA('dd5ad9');

    gallery.args.theme_color_main_2 = "rgba(" + Math.max(rgb[0] - 60, 0) + "," + Math.max(rgb[1] - 60, 0) + "," + Math.max(rgb[2] - 60, 0) + ",1)"; // Player color

    gallery.args.theme_color_main_bg = "rgba(" + Math.max(rgb[0] - 10, 0) + "," + Math.max(rgb[1] - 10, 0) + "," + Math.max(rgb[2] - 10, 0) + ",0.3)"; // Controls background color
  }, filter: "runtime.on-args"
});

/* Function to convert hex to rgba */
function hexToRgbA(hex) {
    if (hex.indexOf("#") !== 0) hex = "#" + hex;
    var c;
    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
        c = hex.substring(1).split('');
        if (c.length == 3) {
            c = [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c = '0x' + c.join('');
        return [(c >> 16) & 255, (c >> 8) & 255, c & 255];
    }
    throw new Error('Bad Hex');
}
</script>

Key Notes

  1. Flexibility: These options allow you to fully control the video player behavior and appearance.
  2. Customization: Use custom colors to align the player design with your brand.
  3. Device-Specific Settings: Configure autoplay to optimize for different platforms.
  4. Brand Visibility: Add a company logo to the video control panel to enhance brand visibility.

For further assistance, feel free to check out our Cincopa Help Center.

Previous page
Next page