<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- videoplayer.qdoc -->
<title>WebEngine Widgets Video Player Example | Qt WebEngine 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtwebengine-index.html">Qt WebEngine</a></td><td ><a href="webengine-widgetexamples.html">Qt WebEngine Widgets Examples</a></td><td >WebEngine Widgets Video Player Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtwebengine-index.html">Qt 5.12.6 Reference Documentation</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#overview">Overview</a></li>
<li class="level1"><a href="#mainwindow-class-declaration">MainWindow Class Declaration</a></li>
<li class="level1"><a href="#mainwindow-class-definition">MainWindow Class Definition</a></li>
<li class="level1"><a href="#fullscreenwindow-class-declaration">FullScreenWindow Class Declaration</a></li>
<li class="level1"><a href="#fullscreenwindow-class-definition">FullScreenWindow Class Definition</a></li>
<li class="level1"><a href="#fullscreennotification-class-declaration">FullScreenNotification Class Declaration</a></li>
<li class="level1"><a href="#fullscreenwindow-class-definition">FullScreenWindow Class Definition</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">WebEngine Widgets Video Player Example</h1>
<span class="subtitle"></span>
<!-- $$$webenginewidgets/videoplayer-brief -->
<p>Displays full screen video using <a href="qwebengineview.html">QWebEngineView</a>.</p>
<!-- @@@webenginewidgets/videoplayer -->
<!-- $$$webenginewidgets/videoplayer-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/videoplayer-example.png" alt="" /></p><p><i>Video Player</i> demonstrates how to support full screen playback of HTML5 video using <a href="qwebengineview.html">QWebEngineView</a>.</p>
<p><a href="https://fullscreen.spec.whatwg.org/">The Fullscreen API</a> 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 <code><video></code> 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:</p>
<ul>
<li>Enabling it in <a href="qwebenginesettings.html">QWebEngineSettings</a>.</li>
<li>Handling the <a href="qwebenginepage.html#fullScreenRequested">QWebEnginePage::fullScreenRequested</a> signal by creating a new full screen window.</li>
<li>Displaying a notification popup to ensure that the user is aware that something is being displayed full screen.</li>
</ul>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<a name="overview"></a>
<h2 id="overview">Overview</h2>
<p>Once started, the example program will create a normal (non-fullscreen) window with a <a href="qwebengineview.html">QWebEngineView</a> 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.</p>
<p>Implementation-wise entering full screen mode entails creating a new full screen window with a separate <a href="qwebengineview.html">QWebEngineView</a> instance and migrating the <a href="qwebenginepage.html">QWebEnginePage</a> from the normal window's <a href="qwebengineview.html">QWebEngineView</a> to this new <a href="qwebengineview.html">QWebEngineView</a>. Exiting full screen mode reverses this migration.</p>
<p>The example code is divided between three classes, <code>MainWindow</code>, <code>FullScreenWindow</code>, and <code>FullScreenNotification</code>. The classes <code>MainWindow</code> and <code>FullScreenWindow</code> are each responsible for managing one top-level window, while <code>FullScreenNotification</code> is responsible for styling and animating the notification box. A <code>MainWindow</code> is created on startup and lives for the entire program runtime, while a new <code>FullScreenWindow</code> is created every time full screen mode is entered.</p>
<a name="mainwindow-class-declaration"></a>
<h2 id="mainwindow-class-declaration">MainWindow Class Declaration</h2>
<p>A <code>MainWindow</code> is a QMainWindow with a <a href="qwebengineview.html">QWebEngineView</a> as the central widget:</p>
<pre class="cpp">
<span class="preprocessor">#include "fullscreenwindow.h"</span>
<span class="preprocessor">#include <QMainWindow></span>
<span class="preprocessor">#include <QWebEngineView></span>
<span class="preprocessor">#include <QWebEngineFullScreenRequest></span>
<span class="keyword">class</span> MainWindow : <span class="keyword">public</span> <span class="type">QMainWindow</span>
{
Q_OBJECT
<span class="keyword">public</span>:
<span class="keyword">explicit</span> MainWindow(<span class="type">QWidget</span> <span class="operator">*</span>parent <span class="operator">=</span> nullptr);
<span class="keyword">private</span> <span class="keyword">slots</span>:
<span class="type">void</span> fullScreenRequested(<span class="type"><a href="qwebenginefullscreenrequest.html">QWebEngineFullScreenRequest</a></span> request);
<span class="keyword">private</span>:
<span class="type"><a href="qwebengineview.html">QWebEngineView</a></span> <span class="operator">*</span>m_view;
<span class="type">QScopedPointer</span><span class="operator"><</span>FullScreenWindow<span class="operator">></span> m_fullScreenWindow;
};
</pre>
<a name="mainwindow-class-definition"></a>
<h2 id="mainwindow-class-definition">MainWindow Class Definition</h2>
<p>In the constructor we start by setting up the <a href="qwebengineview.html">QWebEngineView</a> as the central widget:</p>
<pre class="cpp">
MainWindow<span class="operator">::</span>MainWindow(<span class="type">QWidget</span> <span class="operator">*</span>parent)
: <span class="type">QMainWindow</span>(parent)
<span class="operator">,</span> m_view(<span class="keyword">new</span> <span class="type"><a href="qwebengineview.html">QWebEngineView</a></span>(<span class="keyword">this</span>))
{
setCentralWidget(m_view);
</pre>
<p>We then configure Qt WebEngine to advertise support for the Fullscreen API:</p>
<pre class="cpp">
m_view<span class="operator">-</span><span class="operator">></span>settings()<span class="operator">-</span><span class="operator">></span>setAttribute(<span class="type"><a href="qwebenginesettings.html">QWebEngineSettings</a></span><span class="operator">::</span>FullScreenSupportEnabled<span class="operator">,</span> <span class="keyword">true</span>);
</pre>
<p>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.</p>
<p>Next we connect the <code>fullScreenRequested</code> signal to our slot:</p>
<pre class="cpp">
connect(m_view<span class="operator">-</span><span class="operator">></span>page()<span class="operator">,</span>
<span class="operator">&</span><span class="type"><a href="qwebenginepage.html">QWebEnginePage</a></span><span class="operator">::</span>fullScreenRequested<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span>
<span class="operator">&</span>MainWindow<span class="operator">::</span>fullScreenRequested);
</pre>
<p>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 <code>FullScreenSupportEnabled</code> attribute as <code>true</code>) the toggle button will be enabled but clicking on it will have no effect as Javascript's full screen request will be denied.</p>
<p>Finally, we load some HTML (see <a href="qtwebengine-webenginewidgets-videoplayer-data-index-html.html">index.html</a> included with the example) into our <a href="qwebengineview.html">QWebEngineView</a>:</p>
<pre class="cpp">
m_view<span class="operator">-</span><span class="operator">></span>load(<span class="type">QUrl</span>(<span class="type">QStringLiteral</span>(<span class="string">"qrc:/index.html"</span>)));
</pre>
<p>The second part of <code>MainWindow</code> is handling the full screen requests:</p>
<pre class="cpp">
<span class="type">void</span> MainWindow<span class="operator">::</span>fullScreenRequested(<span class="type"><a href="qwebenginefullscreenrequest.html">QWebEngineFullScreenRequest</a></span> request)
{
<span class="keyword">if</span> (request<span class="operator">.</span>toggleOn()) {
<span class="keyword">if</span> (m_fullScreenWindow)
<span class="keyword">return</span>;
request<span class="operator">.</span>accept();
m_fullScreenWindow<span class="operator">.</span>reset(<span class="keyword">new</span> FullScreenWindow(m_view));
} <span class="keyword">else</span> {
<span class="keyword">if</span> (<span class="operator">!</span>m_fullScreenWindow)
<span class="keyword">return</span>;
request<span class="operator">.</span>accept();
m_fullScreenWindow<span class="operator">.</span>reset();
}
}
</pre>
<p>We create a new <code>FullScreenWindow</code> when entering full screen mode, and delete it when exiting.</p>
<a name="fullscreenwindow-class-declaration"></a>
<h2 id="fullscreenwindow-class-declaration">FullScreenWindow Class Declaration</h2>
<p>A <code>FullScreenWindow</code> is a QWidget containing a <a href="qwebengineview.html">QWebEngineView</a> and a <code>FullScreenNotification</code>.</p>
<pre class="cpp">
<span class="preprocessor">#include <QWidget></span>
QT_BEGIN_NAMESPACE
<span class="keyword">class</span> <span class="type"><a href="qwebengineview.html">QWebEngineView</a></span>;
QT_END_NAMESPACE
<span class="keyword">class</span> FullScreenNotification;
<span class="keyword">class</span> FullScreenWindow : <span class="keyword">public</span> <span class="type">QWidget</span>
{
Q_OBJECT
<span class="keyword">public</span>:
<span class="keyword">explicit</span> FullScreenWindow(<span class="type"><a href="qwebengineview.html">QWebEngineView</a></span> <span class="operator">*</span>oldView<span class="operator">,</span> <span class="type">QWidget</span> <span class="operator">*</span>parent <span class="operator">=</span> nullptr);
<span class="operator">~</span>FullScreenWindow();
<span class="keyword">protected</span>:
<span class="type">void</span> resizeEvent(<span class="type">QResizeEvent</span> <span class="operator">*</span>event) override;
<span class="keyword">private</span>:
<span class="type"><a href="qwebengineview.html">QWebEngineView</a></span> <span class="operator">*</span>m_view;
FullScreenNotification <span class="operator">*</span>m_notification;
<span class="type"><a href="qwebengineview.html">QWebEngineView</a></span> <span class="operator">*</span>m_oldView;
<span class="type">QRect</span> m_oldGeometry;
};
</pre>
<a name="fullscreenwindow-class-definition"></a>
<h2 id="fullscreenwindow-class-definition">FullScreenWindow Class Definition</h2>
<p>The constructor is responsible for hiding the normal window (while saving its geometry) and showing the new <code>FullScreenWindow</code> instead:</p>
<pre class="cpp">
FullScreenWindow<span class="operator">::</span>FullScreenWindow(<span class="type"><a href="qwebengineview.html">QWebEngineView</a></span> <span class="operator">*</span>oldView<span class="operator">,</span> <span class="type">QWidget</span> <span class="operator">*</span>parent)
: <span class="type">QWidget</span>(parent)
<span class="operator">,</span> m_view(<span class="keyword">new</span> <span class="type"><a href="qwebengineview.html">QWebEngineView</a></span>(<span class="keyword">this</span>))
<span class="operator">,</span> m_notification(<span class="keyword">new</span> FullScreenNotification(<span class="keyword">this</span>))
<span class="operator">,</span> m_oldView(oldView)
<span class="operator">,</span> m_oldGeometry(oldView<span class="operator">-</span><span class="operator">></span>window()<span class="operator">-</span><span class="operator">></span>geometry())
{
m_view<span class="operator">-</span><span class="operator">></span>stackUnder(m_notification);
<span class="keyword">auto</span> exitAction <span class="operator">=</span> <span class="keyword">new</span> <span class="type">QAction</span>(<span class="keyword">this</span>);
exitAction<span class="operator">-</span><span class="operator">></span>setShortcut(<span class="type">Qt</span><span class="operator">::</span>Key_Escape);
connect(exitAction<span class="operator">,</span> <span class="operator">&</span><span class="type">QAction</span><span class="operator">::</span>triggered<span class="operator">,</span> <span class="operator">[</span><span class="keyword">this</span><span class="operator">]</span>() {
m_view<span class="operator">-</span><span class="operator">></span>triggerPageAction(<span class="type"><a href="qwebenginepage.html">QWebEnginePage</a></span><span class="operator">::</span>ExitFullScreen);
});
addAction(exitAction);
m_view<span class="operator">-</span><span class="operator">></span>setPage(m_oldView<span class="operator">-</span><span class="operator">></span>page());
setGeometry(m_oldGeometry);
showFullScreen();
m_oldView<span class="operator">-</span><span class="operator">></span>window()<span class="operator">-</span><span class="operator">></span>hide();
}
</pre>
<p>The call to <a href="qwebengineview.html#setPage">QWebEngineView::setPage</a> will move the web page from the <code>MainWindow</code>'s view to <code>FullScreenWindow</code>'s view.</p>
<p>In the destructor we use the same method to move the page back, after which we restore the main window's geometry and visibility:</p>
<pre class="cpp">
FullScreenWindow<span class="operator">::</span><span class="operator">~</span>FullScreenWindow()
{
m_oldView<span class="operator">-</span><span class="operator">></span>setPage(m_view<span class="operator">-</span><span class="operator">></span>page());
m_oldView<span class="operator">-</span><span class="operator">></span>window()<span class="operator">-</span><span class="operator">></span>setGeometry(m_oldGeometry);
m_oldView<span class="operator">-</span><span class="operator">></span>window()<span class="operator">-</span><span class="operator">></span>show();
hide();
}
</pre>
<p>We override QWidget::resizeEvent to do manual layout, keeping the <a href="qwebengineview.html">QWebEngineView</a> maximized, and the <code>FullScreenNotification</code> centered within the window:</p>
<pre class="cpp">
<span class="type">void</span> FullScreenWindow<span class="operator">::</span>resizeEvent(<span class="type">QResizeEvent</span> <span class="operator">*</span>event)
{
<span class="type">QRect</span> viewGeometry(<span class="type">QPoint</span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span>)<span class="operator">,</span> size());
m_view<span class="operator">-</span><span class="operator">></span>setGeometry(viewGeometry);
<span class="type">QRect</span> notificationGeometry(<span class="type">QPoint</span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span>)<span class="operator">,</span> m_notification<span class="operator">-</span><span class="operator">></span>sizeHint());
notificationGeometry<span class="operator">.</span>moveCenter(viewGeometry<span class="operator">.</span>center());
m_notification<span class="operator">-</span><span class="operator">></span>setGeometry(notificationGeometry);
<span class="type">QWidget</span><span class="operator">::</span>resizeEvent(event);
}
</pre>
<a name="fullscreennotification-class-declaration"></a>
<h2 id="fullscreennotification-class-declaration">FullScreenNotification Class Declaration</h2>
<p>A <code>FullScreenNotification</code> is just a QLabel with some styling and animation:</p>
<pre class="cpp">
<span class="preprocessor">#include <QLabel></span>
<span class="keyword">class</span> FullScreenNotification : <span class="keyword">public</span> <span class="type">QLabel</span>
{
Q_OBJECT
<span class="keyword">public</span>:
FullScreenNotification(<span class="type">QWidget</span> <span class="operator">*</span>parent <span class="operator">=</span> nullptr);
<span class="keyword">protected</span>:
<span class="type">void</span> showEvent(<span class="type">QShowEvent</span> <span class="operator">*</span>event) override;
<span class="keyword">signals</span>:
<span class="type">void</span> shown();
<span class="keyword">private</span>:
bool m_previouslyVisible;
};
</pre>
<a name="fullscreenwindow-class-definition"></a>
<h2 id="fullscreenwindow-class-definition">FullScreenWindow Class Definition</h2>
<p>In the constructor we configure the QLabel and set up a delayed fade-out animation using The Animation Framework:</p>
<pre class="cpp">
FullScreenNotification<span class="operator">::</span>FullScreenNotification(<span class="type">QWidget</span> <span class="operator">*</span>parent)
: <span class="type">QLabel</span>(parent)
<span class="operator">,</span> m_previouslyVisible(<span class="keyword">false</span>)
{
setText(tr(<span class="string">"You are now in full screen mode. Press ESC to quit!"</span>));
setStyleSheet(
<span class="string">"font-size: 24px;"</span>
<span class="string">"color: white;"</span>
<span class="string">"background-color: black;"</span>
<span class="string">"border-color: white;"</span>
<span class="string">"border-width: 2px;"</span>
<span class="string">"border-style: solid;"</span>
<span class="string">"padding: 100px"</span>);
setAttribute(<span class="type">Qt</span><span class="operator">::</span>WA_TransparentForMouseEvents);
<span class="keyword">auto</span> effect <span class="operator">=</span> <span class="keyword">new</span> <span class="type">QGraphicsOpacityEffect</span>;
effect<span class="operator">-</span><span class="operator">></span>setOpacity(<span class="number">1</span>);
setGraphicsEffect(effect);
<span class="keyword">auto</span> animations <span class="operator">=</span> <span class="keyword">new</span> <span class="type">QSequentialAnimationGroup</span>(<span class="keyword">this</span>);
animations<span class="operator">-</span><span class="operator">></span>addPause(<span class="number">3000</span>);
<span class="keyword">auto</span> opacityAnimation <span class="operator">=</span> <span class="keyword">new</span> <span class="type">QPropertyAnimation</span>(effect<span class="operator">,</span> <span class="string">"opacity"</span><span class="operator">,</span> animations);
opacityAnimation<span class="operator">-</span><span class="operator">></span>setDuration(<span class="number">2000</span>);
opacityAnimation<span class="operator">-</span><span class="operator">></span>setStartValue(<span class="number">1.0</span>);
opacityAnimation<span class="operator">-</span><span class="operator">></span>setEndValue(<span class="number">0.0</span>);
opacityAnimation<span class="operator">-</span><span class="operator">></span>setEasingCurve(<span class="type">QEasingCurve</span><span class="operator">::</span>OutQuad);
animations<span class="operator">-</span><span class="operator">></span>addAnimation(opacityAnimation);
connect(<span class="keyword">this</span><span class="operator">,</span> <span class="operator">&</span>FullScreenNotification<span class="operator">::</span>shown<span class="operator">,</span>
<span class="operator">[</span>animations<span class="operator">]</span>(){ animations<span class="operator">-</span><span class="operator">></span>start(); });
connect(animations<span class="operator">,</span> <span class="operator">&</span><span class="type">QAbstractAnimation</span><span class="operator">::</span>finished<span class="operator">,</span>
<span class="operator">[</span><span class="keyword">this</span><span class="operator">]</span>(){ <span class="keyword">this</span><span class="operator">-</span><span class="operator">></span>hide(); });
}
</pre>
<p>The custom signal <code>shown</code>, which we use to trigger the animation, is emitted from the <code>showEvent</code> method:</p>
<pre class="cpp">
<span class="type">void</span> FullScreenNotification<span class="operator">::</span>showEvent(<span class="type">QShowEvent</span> <span class="operator">*</span>event)
{
<span class="type">QLabel</span><span class="operator">::</span>showEvent(event);
<span class="keyword">if</span> (<span class="operator">!</span>m_previouslyVisible <span class="operator">&</span><span class="operator">&</span> isVisible())
<span class="keyword">emit</span> shown();
m_previouslyVisible <span class="operator">=</span> isVisible();
}
</pre>
<p>Files:</p>
<ul>
<li><a href="qtwebengine-webenginewidgets-videoplayer-data-index-html.html">webenginewidgets/videoplayer/data/index.html</a></li>
<li><a href="qtwebengine-webenginewidgets-videoplayer-data-videoplayer-qrc.html">webenginewidgets/videoplayer/data/videoplayer.qrc</a></li>
<li><a href="qtwebengine-webenginewidgets-videoplayer-fullscreennotification-cpp.html">webenginewidgets/videoplayer/fullscreennotification.cpp</a></li>
<li><a href="qtwebengine-webenginewidgets-videoplayer-fullscreennotification-h.html">webenginewidgets/videoplayer/fullscreennotification.h</a></li>
<li><a href="qtwebengine-webenginewidgets-videoplayer-fullscreenwindow-cpp.html">webenginewidgets/videoplayer/fullscreenwindow.cpp</a></li>
<li><a href="qtwebengine-webenginewidgets-videoplayer-fullscreenwindow-h.html">webenginewidgets/videoplayer/fullscreenwindow.h</a></li>
<li><a href="qtwebengine-webenginewidgets-videoplayer-main-cpp.html">webenginewidgets/videoplayer/main.cpp</a></li>
<li><a href="qtwebengine-webenginewidgets-videoplayer-mainwindow-cpp.html">webenginewidgets/videoplayer/mainwindow.cpp</a></li>
<li><a href="qtwebengine-webenginewidgets-videoplayer-mainwindow-h.html">webenginewidgets/videoplayer/mainwindow.h</a></li>
<li><a href="qtwebengine-webenginewidgets-videoplayer-videoplayer-pro.html">webenginewidgets/videoplayer/videoplayer.pro</a></li>
</ul>
</div>
<!-- @@@webenginewidgets/videoplayer -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
7
>
armv7hl
>
media
>
core-updates
>
by-pkgid
>
433eb9daba9f45efee96fd578b74d021
>
files
>
443
