Video Player

Navigation:  Widget Designer > Widgets >

Video Player

prev main next

Navigation:  Widget Designer > Widgets >

Video Player

prev main next

Please wait. Due to its content this page might take a while to load...

The VideoPlayer widget lets you add a borderless media player widget to your interface.

wd_widget_video-player

The on-screen controls offer you the possibility to play/pause the video, adjust the volume of audio and toggle full-screen.

Please note:
In order to control the VideoPlayer widget within your interface it is a best practice to create dedicated CustomScript buttons or use commands in general to control the VideoPlayer widget. The VideoPlayer related commands are these ones.

To create a VideoPlayer widget choose "Widgets > VideoPlayer". The mouse cursor changes to a crosshairs icon, indicating the create mode. With a left-click anywhere on the empty main background window you add the selected widget to the current page. Left-click again if you like to add one more. To quit the create mode, you can switch to the run mode with [F8], where you can use all widgets.

To edit the VideoPlayer parameters, first switch to the edit / move mode ([F9]) mode and then right-click on the desired VideoPlayer widget and choose the menu entry "Item Properties", press [ALT+P] whilst the mouse is hovering above it or double-click on it when being in the edit / move mode ([F9]). The VideoPlayer property dialog opens up.

wd_widget_video-player-properties

General Widget Settings

Name:

A unique name can be entered to identify the widget via the Object and Member Notation. The default name is based on the widget type and ID.

Page:

This drop-down offers all available pages to place the widget on.

ID:
The VideoPlayer’s ID may be changed by entering a new one in the text field top left. If you change it, you will be asked if you also want to adapt the name to the new ID.

Notes:

A short note can be added here. It is not displayed outside the widget but can be set and retrieved with the WidgetID.Note property member.

Visible:

Uncheck this box to hide the widget.

Fix:
When the option “Fix” is checked, the VideoPlayer will be displayed on every page.

Size:

Enter a pixel size for the VideoPlayer's size.

X and Y:

Enter the location of the widget (upper left corner) in pixels

Video Player Properties

File:

Click on the "Select File..." button to open a file dialog where you can choose your path and video file.

In addition to the on-screen controls, you also have the option to adjust the Volume in the item properties, as well as play ( > ), pause ( || ) and stop ( [] ) the video.

Tick the Loop box to continuously loop the video playback, un-tick it if you only want to have the video played once.

Ui Effects & Animations

CSS based effects and animations can be applied to this widget. Please refer to the topic Effects & Animations for more information.

Supported Video Codecs

As Widget Designer V6 is based on HTML5, it also uses the integrated video playback feature HTML5 offers. As a result, the format of the videos played back with it are restricted to certain, mostly open source codecs. Those codecs also depend on the browser wherein the video is played. While it is not possible to playback the WebM format with a Safari browser, the Internet Explorer for example does not allow the Theora codec (OGG).

The Widget GUI itself consists of an embedded Chromium browser, called CEF ("Chromium Embedded Framework"). Considering this, the main GUI is currently able to playback Theora (.ogg), VP8 and VP9 (.webm), as well as H.264 via FFmpeg (.mp4). Other formats can be played back when accessing the project with an external browser, of course depending on the used browser.

For more information on the HTML5 video player as well as a table with browsers and supported codecs, please refer to the Wikipedia entry concerning this topic.

If you need to re-encode files, the VLC player proves a useful open source tool until we offer a converter.