WebEngine Widgets Video Player Beispiel

Video Player demonstriert die Unterstützung der Vollbildwiedergabe von HTML5-Videos mit QWebEngineView.

Die Fullscreen-API ist eine browserübergreifende Javascript-API, die es einer Webseite ermöglicht, eines ihrer HTML-Elemente so anzufordern, dass es den gesamten Bildschirm des Benutzers einnimmt. Sie wird in der Regel für die Wiedergabe von Videos im Vollbildmodus über das Element <video> verwendet, kann aber prinzipiell für die Anzeige beliebiger HTML-Inhalte im Vollbildmodus genutzt werden. Qt WebEngine unterstützt diese API, sie ist jedoch standardmäßig deaktiviert. Dieses Beispiel zeigt die notwendigen Schritte, um sie einzuschalten:

• Aktivieren in QWebEngineSettings.
• Behandlung des Signals QWebEnginePage::fullScreenRequested durch Erstellen eines neuen Vollbildfensters.
• Anzeige eines Benachrichtigungs-Popups, um sicherzustellen, dass der Benutzer weiß, dass etwas im Vollbildmodus angezeigt wird.

Ausführen des Beispiels

Zum Ausführen des Beispiels von Qt Creatorauszuführen, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples aus. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

Überblick

Sobald das Beispielprogramm gestartet ist, wird ein normales (nicht bildschirmfüllendes) Fenster mit einem QWebEngineView erstellt, das einen eingebetteten YouTube-Videoplayer zeigt. Sie können dann auf die Vollbildschaltfläche (rechte untere Ecke) klicken, um den Vollbildmodus zu aktivieren. Dabei sollte auch ein zentriertes Benachrichtigungs-Overlay angezeigt werden, das Sie darüber informiert, dass Sie den Vollbildmodus durch Drücken der Escape-Taste verlassen können.

Bei der Implementierung des Vollbildmodus wird ein neues Vollbildfenster mit einer separaten Instanz von QWebEngineView erstellt und die QWebEnginePage aus dem normalen Fenster QWebEngineView in dieses neue QWebEngineView übertragen. Das Verlassen des Vollbildmodus macht diese Migration wieder rückgängig.

Der Beispielcode ist auf drei Klassen aufgeteilt, MainWindow, FullScreenWindow und FullScreenNotification. Die Klassen MainWindow und FullScreenWindow sind jeweils für die Verwaltung eines Fensters der obersten Ebene zuständig, während FullScreenNotification für das Styling und die Animation des Benachrichtigungsfeldes verantwortlich ist. Eine MainWindow wird beim Start erstellt und bleibt für die gesamte Programmlaufzeit bestehen, während eine neue FullScreenWindow jedes Mal erstellt wird, wenn der Vollbildmodus aktiviert wird.

Deklaration der MainWindow-Klasse

Ein MainWindow ist ein QMainWindow mit einem QWebEngineView als zentrales Widget:

#include "fullscreenwindow.h"

#include <QMainWindow>
#include <QWebEngineView>
#include <QWebEngineFullScreenRequest>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);

private slots:
    void fullScreenRequested(QWebEngineFullScreenRequest request);

private:
    QWebEngineView *m_view;
    QScopedPointer<FullScreenWindow> m_fullScreenWindow;
};

MainWindow Klassendeklaration

Im Konstruktor richten wir zunächst QWebEngineView als zentrales Widget ein:

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , m_view(new QWebEngineView(this))
{
    setCentralWidget(m_view);

Dann konfigurieren wir Qt WebEngine, um die Unterstützung für die Vollbild-API bekannt zu machen:

    m_view->settings()->setAttribute(QWebEngineSettings::FullScreenSupportEnabled, true);

Ohne diese Zeile wäre die Schaltfläche zum Umschalten auf Vollbild deaktiviert (ausgegraut), da das auf der Seite laufende Javascript erkennen kann, dass unser Browser den Vollbildmodus nicht unterstützt.

Als nächstes verbinden wir das Signal fullScreenRequested mit unserem Slot:

    connect(m_view->page(),
            &QWebEnginePage::fullScreenRequested,
            this,
            &MainWindow::fullScreenRequested);

Dieses Signal wird immer dann ausgegeben, wenn das Javascript auf der Seite den Vollbildmodus aktivieren oder deaktivieren möchte. Wenn wir dieses Signal nicht behandeln (aber das FullScreenSupportEnabled -Attribut als true beibehalten), wird die Umschalttaste zwar aktiviert, aber ein Klick darauf hat keine Wirkung, da die Javascript-Anforderung des Vollbildmodus abgelehnt wird.

Schließlich laden wir etwas HTML (siehe webenginewidgets/videoplayer/data/index.html im Beispiel) in unser QWebEngineView:

    m_view->load(QUrl(QStringLiteral("qrc:/index.html")));

Der zweite Teil von MainWindow befasst sich mit den Vollbildanforderungen:

void MainWindow::fullScreenRequested(QWebEngineFullScreenRequest request)
{
    if (request.toggleOn()) {
        if (m_fullScreenWindow)
            return;
        request.accept();
        m_fullScreenWindow.reset(new FullScreenWindow(m_view));
    } else {
        if (!m_fullScreenWindow)
            return;
        request.accept();
        m_fullScreenWindow.reset();
    }
}

Wir erstellen ein neues FullScreenWindow, wenn wir in den Vollbildmodus wechseln, und löschen es, wenn wir den Modus verlassen.

FullScreenWindow Klassendeklaration

Ein FullScreenWindow ist ein QWidget, das ein QWebEngineView und ein FullScreenNotification enthält.

#include <QWidget>

QT_BEGIN_NAMESPACE
class QWebEngineView;
QT_END_NAMESPACE

class FullScreenNotification;

class FullScreenWindow : public QWidget
{
    Q_OBJECT
public:
    explicit FullScreenWindow(QWebEngineView *oldView, QWidget *parent = nullptr);
    ~FullScreenWindow();

protected:
    void resizeEvent(QResizeEvent *event) override;

private:
    QWebEngineView *m_view;
    FullScreenNotification *m_notification;
    QWebEngineView *m_oldView;
    QRect m_oldGeometry;
};

FullScreenWindow-Klassendefinition

Der Konstruktor ist dafür verantwortlich, das normale Fenster auszublenden (wobei seine Geometrie gespeichert wird) und stattdessen das neue FullScreenWindow anzuzeigen:

FullScreenWindow::FullScreenWindow(QWebEngineView *oldView, QWidget *parent)
    : QWidget(parent)
    , m_view(new QWebEngineView(this))
    , m_notification(new FullScreenNotification(this))
    , m_oldView(oldView)
    , m_oldGeometry(oldView->window()->geometry())
{
    m_view->stackUnder(m_notification);

    auto exitAction = new QAction(this);
    exitAction->setShortcut(Qt::Key_Escape);
    connect(exitAction, &QAction::triggered, [this]() {
        m_view->triggerPageAction(QWebEnginePage::ExitFullScreen);
    });
    addAction(exitAction);

    m_view->setPage(m_oldView->page());
    setGeometry(m_oldGeometry);
    showFullScreen();
    m_oldView->window()->hide();
}

Der Aufruf von QWebEngineView::setPage verschiebt die Webseite aus der Ansicht von MainWindow in die Ansicht von FullScreenWindow.

Im Destruktor verwenden wir dieselbe Methode, um die Seite zurück zu verschieben, woraufhin wir die Geometrie und Sichtbarkeit des Hauptfensters wiederherstellen:

FullScreenWindow::~FullScreenWindow()
{
    m_oldView->setPage(m_view->page());
    m_oldView->window()->setGeometry(m_oldGeometry);
    m_oldView->window()->show();
    hide();
}

Wir überschreiben QWidget::resizeEvent, um ein manuelles Layout zu erstellen, wobei QWebEngineView maximiert und FullScreenNotification innerhalb des Fensters zentriert bleibt:

void FullScreenWindow::resizeEvent(QResizeEvent *event)
{
    QRect viewGeometry(QPoint(0, 0), size());
    m_view->setGeometry(viewGeometry);

    QRect notificationGeometry(QPoint(0, 0), m_notification->sizeHint());
    notificationGeometry.moveCenter(viewGeometry.center());
    m_notification->setGeometry(notificationGeometry);

    QWidget::resizeEvent(event);
}

FullScreenNotification Klassendeklaration

Ein FullScreenNotification ist einfach ein QLabel mit etwas Styling und Animation:

#include <QLabel>

class FullScreenNotification : public QLabel
{
    Q_OBJECT
public:
    FullScreenNotification(QWidget *parent = nullptr);

protected:
    void showEvent(QShowEvent *event) override;

signals:
    void shown();

private:
    bool m_previouslyVisible;
};

FullScreenWindow Klassendeklaration

Im Konstruktor konfigurieren wir die QLabel und richten eine verzögerte Ausblendungsanimation mit dem Animation Framework ein:

FullScreenNotification::FullScreenNotification(QWidget *parent)
    : QLabel(parent)
    , m_previouslyVisible(false)
{
    setText(tr("You are now in full screen mode. Press ESC to quit!"));
    setStyleSheet(
        "font-size: 24px;"
        "color: white;"
        "background-color: black;"
        "border-color: white;"
        "border-width: 2px;"
        "border-style: solid;"
        "padding: 100px");
    setAttribute(Qt::WA_TransparentForMouseEvents);

    auto effect = new QGraphicsOpacityEffect;
    effect->setOpacity(1);
    setGraphicsEffect(effect);

    auto animations = new QSequentialAnimationGroup(this);
    animations->addPause(3000);
    auto opacityAnimation = new QPropertyAnimation(effect, "opacity", animations);
    opacityAnimation->setDuration(2000);
    opacityAnimation->setStartValue(1.0);
    opacityAnimation->setEndValue(0.0);
    opacityAnimation->setEasingCurve(QEasingCurve::OutQuad);
    animations->addAnimation(opacityAnimation);

    connect(this, &FullScreenNotification::shown,
            [animations](){ animations->start(); });

    connect(animations, &QAbstractAnimation::finished,
            [this](){ this->hide(); });
}

Das benutzerdefinierte Signal shown, das wir zum Auslösen der Animation verwenden, wird von der Methode showEvent ausgegeben:

void FullScreenNotification::showEvent(QShowEvent *event)
{
    QLabel::showEvent(event);
    if (!m_previouslyVisible && isVisible())
        emit shown();
    m_previouslyVisible = isVisible();
}

Beispielprojekt @ code.qt.io