WebEngine Widgets Video Player Example

Displays full screen video using QWebEngineView .

Video Player demonstrates how to support full screen playback of HTML5 video using QWebEngineView .

The Fullscreen API is a cross-browser Javascript API that enables a web page to request that one of its HTML elements be made to occupy the user’s entire screen. It is commonly used for full screen video playback via the <video> element, but can in principle be used to display any HTML content in full screen mode. Qt WebEngine supports this API, however it is disabled by default. This example shows the steps needed to switch it on, including:

• Enabling it in QWebEngineSettings .

• Handling the fullScreenRequested signal by creating a new full screen window.

• Displaying a notification popup to ensure that the user is aware that something is being displayed full screen.

Running the Example

To run the example from Qt Creator , open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

Overview

Once started, the example program will create a normal (non-fullscreen) window with a QWebEngineView showing an embedded YouTube video player. You can then click on the full screen toggle button (bottom-right corner) to enter full screen mode. This should also display a centered notification overlay informing you that you can exit full screen mode by pressing the escape key.

Implementation-wise entering full screen mode entails creating a new full screen window with a separate QWebEngineView instance and migrating the QWebEnginePage from the normal window’s QWebEngineView to this new QWebEngineView . Exiting full screen mode reverses this migration.

The example code is divided between three classes, MainWindow, FullScreenWindow, and FullScreenNotification. The classes MainWindow and FullScreenWindow are each responsible for managing one top-level window, while FullScreenNotification is responsible for styling and animating the notification box. A MainWindow is created on startup and lives for the entire program runtime, while a new FullScreenWindow is created every time full screen mode is entered.

MainWindow Class Declaration

A MainWindow is a QMainWindow with a QWebEngineView as the central widget:

MainWindow Class Definition

In the constructor we start by setting up the QWebEngineView as the central widget:

We then configure Qt WebEngine to advertise support for the Fullscreen API:

Without this line the full screen toggle button would be disabled (grayed out) as the Javascript running on the page can detect that our browser does not support full screen mode.

Next we connect the fullScreenRequested signal to our slot:

This signal is emitted whenever the Javascript on the page wants to enter or exit full screen mode. Without handling this signal (but still keeping the FullScreenSupportEnabled attribute as true) the toggle button will be enabled but clicking on it will have no effect as Javascript’s full screen request will be denied.

Finally, we load some HTML (see webenginewidgets/videoplayer/data/index.html included with the example) into our QWebEngineView :

The second part of MainWindow is handling the full screen requests:

We create a new FullScreenWindow when entering full screen mode, and delete it when exiting.

FullScreenWindow Class Declaration

A FullScreenWindow is a QWidget containing a QWebEngineView and a FullScreenNotification.

FullScreenWindow Class Definition

The constructor is responsible for hiding the normal window (while saving its geometry) and showing the new FullScreenWindow instead:

The call to setPage will move the web page from the MainWindow's view to FullScreenWindow's view.

In the destructor we use the same method to move the page back, after which we restore the main window’s geometry and visibility:

We override resizeEvent to do manual layout, keeping the QWebEngineView maximized, and the FullScreenNotification centered within the window:

FullScreenNotification Class Declaration

A FullScreenNotification is just a QLabel with some styling and animation:

FullScreenWindow Class Definition

In the constructor we configure the QLabel and set up a delayed fade-out animation using The Animation Framework :

The custom signal shown, which we use to trigger the animation, is emitted from the showEvent method:

Example project @ code.qt.io