显示全屏视频使用 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:
要运行范例从 Qt Creator ，打开 Welcome 模式，然后选择范例从 Examples 。更多信息，拜访 构建和运行范例 .
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
，和
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.
A
MainWindow
是
QMainWindow
采用
QWebEngineView
as the central 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; };
In the constructor we start by setting up the QWebEngineView as the central widget:
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , m_view(new QWebEngineView(this)) { setCentralWidget(m_view);
We then configure Qt WebEngine to advertise support for the Fullscreen API:
m_view->settings()->setAttribute(QWebEngineSettings::FullScreenSupportEnabled, true);
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:
connect(m_view->page(),
&QWebEnginePage::fullScreenRequested,
this,
&MainWindow::fullScreenRequested);
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
:
m_view->load(QUrl(QStringLiteral("qrc:/index.html")));
The second part of
MainWindow
is handling the full screen requests:
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(); } }
We create a new
FullScreenWindow
when entering full screen mode, and delete it when exiting.
A
FullScreenWindow
是
QWidget
包含
QWebEngineView
和
FullScreenNotification
.
#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; };
The constructor is responsible for hiding the normal window (while saving its geometry) and showing the new
FullScreenWindow
instead:
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(); }
The call to
QWebEngineView::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:
FullScreenWindow::~FullScreenWindow() { m_oldView->setPage(m_view->page()); m_oldView->window()->setGeometry(m_oldGeometry); m_oldView->window()->show(); hide(); }
We override
QWidget::resizeEvent
to do manual layout, keeping the
QWebEngineView
maximized, and the
FullScreenNotification
centered within the window:
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); }
A
FullScreenNotification
is just a
QLabel
with some styling and 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; };
In the constructor we configure the QLabel and set up a delayed fade-out animation using 动画框架 :
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(); }); }
The custom signal
shown
, which we use to trigger the animation, is emitted from the
showEvent
方法：
void FullScreenNotification::showEvent(QShowEvent *event) { QLabel::showEvent(event); if (!m_previouslyVisible && isVisible()) emit shown(); m_previouslyVisible = isVisible(); }