Introduction to the Control Overlay

The control overlay is a semi-transparent user interface that appears above the video window. By default it appears when hovering with the mouse over the video area and disappears automatically after 3 seconds. I designed the control overlay for maximum flexibility and versatility. Nearly every element can be changed or hidden.

The button layout

There are 4 button zones, each zone can be customized by replacing or adding buttons. Press the left arrow button to add a new button to the button group, the "X" button to erase one or more selected buttons or the up/down arrows to control the button's display order.

System buttons

The system buttons appear in the top-right corner of the control overlay. By default you have the standard windows minimize/maximize/close buttons along with the fullscreen button which nearly system level for a media player. This button group has a maximum limit of 7 button.

Pre-Title buttons

The pre-title buttons appear in the top-left corner of the control overlay, to the left of the title text. This button group has a maximum limit of 3 button.

Fixed buttons

The fixed buttons appear in the bottom-center region of the control overlay. Fixed buttons are always visible. This button group has a maximum limit of 7 button.

Dynamic buttons

The dynamic buttons appear in the bottom-right corner of the control overlay. Dynamic buttons are visible if there is room to display them and this is why they are sorted in reverse order, appearing from right to left, meaning the lowest button in the list is the first to disappear and appears closest to the fixed buttons. This button group has no button limit other than the available screen space.

Visual element customization

Visual elements in the Control Overlay are by default sized relative to your monitor's resolution, attempting to maintain good proportions regardless of the resolution. However, some people prefer the user interface to be small and unintrusive while others who may suffer from impaired vision may require a large and easy to see interface. For this reason, control overlay element sizes are very flexible, giving you the opportunity to modify each visual element to your heart's desire.

Title area

This is where the title text and pre-title/system buttons are displayed.

Button spacing

This is the space between each button in the button groups.

Side margins

This is the horizontal space between the edge of the video and the visible elements.

Vertical margins

This is the vertical space between control overlay elements (e.g. distance between fixed buttons and the timeline).

Dynamic buttons

Control the dynamic buttons size.

Timeline bar

Control the height (thickness) of the timeline bar.

Timeline font

Control the timeline font size.

Timeline chapters

Control the width of a chapter/bookmark displayed on the timeline.

Timeline cursor

Choose which mouse cursor to show when hovering over the timeline.

Volume bar height

Control the height (thickness) of the volume bar.

Volume bar width

Control the width of the volume bar.

Bar widgets

Control the widget size on the timeline and volume bars (relative to the height of each bar).

Title font

Pick a font for the title text.

Timeline font

Pick a font for the timeline text.

Colors and Opacity

Why stop at sizes when you can control the color and opacity (transparency) of most elements (other than the button/widget images).

Background color and opacity

Control the color and opacity of the background overlay gradient that darkens the video area so the overlay controls are properly visible against both bright and dark video.

Title font color and opacity

Control the color and opacity of the title text.

Timeline font color and opacity

Control the color and opacity of the timeline text.

Timeline active color and opacity

Control the color and opacity of the active timeline (area where video has already played).

Timeline inactive color and opacity

Control the color and opacity of the inactive timeline (area where video has not yet played).

Timeline chapter color and opacity

Control the color and opacity of timeline chapters.

Volume active color and opacity

Control the color and opacity of the active volume area.

Volume inactive color and opacity

Control the color and opacity of the inactive volume area.

Button highlight color and opacity

Control the color and opacity of the mouse button hover highlight.

Settings

The setting section allows you to determine how the control overlay looks, behaves and reacts to your actions.

Automatically show the control overlay on mouse movement

Disable to prevent the control overlay from showing on mouse movement.

even when another app has focus (may cause overlay to appear between windows)

This setting controls whether the overlay window should appear when hovering with the mouse cursor over the video area even if player is not the focused application. When the control overlay appears, the playback window pops to the front of other applications.

Show the control overlay when moving mouse cursor to Screen:Bottom (fullscreen)

Enable this setting for the control overlay to appear when the mouse cursor is moved to the bottom of the screen fullscreen mode.

Show the control overlay when moving mouse cursor to Screen:Top (fullscreen)

Enable this setting for the control overlay to appear when the mouse cursor is moved to the top of the screen fullscreen mode.

Seeking functions show the control overlay

This setting controls whether the control overlay is shown when seeking forward or background a specified number of seconds.

Pausing shows the control overlay

Enable this setting to show the control overlay when playback is paused.

Rewind / Fast Forward functions show the control overlay

Enable this setting to show the control overlay when the rewind or fast forward features are used.

Opening a new media shows the control overlay

Enable this setting to show the control overlay each time a new media is opened.

Automatically hide the control overlay on idle (seconds)

Specify the number of seconds for the control overlay to automatically hide on idle (inactivity).

Only when playing (do not hide when paused or when no media is loaded)

Enable this setting to prevent the control overlay from automatically hiding on inactivity if the player is currently paused or when no media is loaded.

Automatically hide the control overlay when clicking video area

Enable this setting to hide the control overlay when clicking the video area with the mouse cursor.

Show title text

Disable this setting to hide the title text.

Show fixed buttons

Disable this setting to hide the fixed buttons.

Show dynamic buttons

Disable this setting to hide the dynamic buttons.

Show pre-title buttons

Disable this setting to hide the pre-title buttons.

Show system buttons

Disable this setting to hide the system buttons.

Show volume bar

Disable this setting to hide the volume bar.

Show volume bar widget

Disable this setting to hide the volume bar widget.

Show timeline bar widget

Disable this setting to hide the timeline bar widget.

Show timeline chapters / bookmarks

Disable this setting to prevent chapters or bookmarks from appearing on the timeline.

Resetting the settings

Wow, there are so many options, you may just lose your way, wouldn't it be nice if there was an easy way to reset some of these settings?

Apply default settings button

Pressing this button resets the control overlay settings to their default values.

Apply default design (color, size and font)

Pressing this button resets the control overlay color, size and font to their default values.

Apply default button layout

Pressing this button resets the 4 button zones to their default layout.

Apply default IPTV button layout

If you primarily play IPTV content, pressing this button resets the 4 button zones to a default layout designed for IPTV playback.