Back to Qt.io
Contact Us Blog Download Qt
Sur cette page

Exemple de lecteur vidéo des widgets WebEngine

Affiche une vidéo en plein écran à l'aide de QWebEngineView.

Interface du lecteur vidéo YouTube

Video Player montre comment prendre en charge la lecture en plein écran d'une vidéo HTML5 à l'aide de QWebEngineView.

L'API Fullscreen est une API Javascript inter-navigateurs qui permet à une page web de demander qu'un de ses éléments HTML occupe la totalité de l'écran de l'utilisateur. Elle est généralement utilisée pour la lecture de vidéos en plein écran via l'élément <video>, mais peut en principe être utilisée pour afficher n'importe quel contenu HTML en mode plein écran. Qt WebEngine prend en charge cette API, mais elle est désactivée par défaut. Cet exemple montre les étapes nécessaires pour l'activer :

  • Activation de l'API dans QWebEngineSettings.
  • Traitement du signal QWebEnginePage::fullScreenRequested par la création d'une nouvelle fenêtre plein écran.
  • Affichage d'une fenêtre de notification pour s'assurer que l'utilisateur sait que quelque chose est affiché en plein écran.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Vue d'ensemble

Une fois lancé, le programme d'exemple crée une fenêtre normale (non plein écran) avec une page QWebEngineView affichant un lecteur vidéo YouTube intégré. Vous pouvez ensuite cliquer sur le bouton de basculement plein écran (dans le coin inférieur droit) pour passer en mode plein écran. Une notification centrée devrait également s'afficher pour vous informer que vous pouvez quitter le mode plein écran en appuyant sur la touche "Echap".

Du point de vue de la mise en œuvre, l'entrée en mode plein écran implique la création d'une nouvelle fenêtre plein écran avec une instance QWebEngineView distincte et la migration de QWebEnginePage de la fenêtre normale QWebEngineView vers cette nouvelle QWebEngineView. La sortie du mode plein écran inverse cette migration.

Le code de l'exemple est divisé en trois classes, MainWindow, FullScreenWindow et FullScreenNotification. Les classes MainWindow et FullScreenWindow sont chacune responsables de la gestion d'une fenêtre de premier niveau, tandis que FullScreenNotification est responsable du style et de l'animation de la boîte de notification. Une fenêtre MainWindow est créée au démarrage et reste en place pendant toute la durée d'exécution du programme, tandis qu'une nouvelle fenêtre FullScreenWindow est créée chaque fois que l'on passe en mode plein écran.

Déclaration de la classe MainWindow

Un MainWindow est un QMainWindow avec un QWebEngineView comme widget central :

#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;
};

Définition de la classe MainWindow

Dans le constructeur, nous commençons par configurer QWebEngineView comme widget central :

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

Nous configurons ensuite Qt WebEngine pour qu'il annonce la prise en charge de l'API Fullscreen :

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

Sans cette ligne, le bouton de basculement vers le mode plein écran serait désactivé (grisé), car le Javascript exécuté sur la page peut détecter que notre navigateur ne prend pas en charge le mode plein écran.

Ensuite, nous connectons le signal fullScreenRequested à notre slot :

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

Ce signal est émis chaque fois que le Javascript de la page veut entrer ou sortir du mode plein écran. Sans traiter ce signal (mais en conservant l'attribut FullScreenSupportEnabled comme true), le bouton de basculement sera activé, mais le fait de cliquer dessus n'aura aucun effet, car la demande de plein écran de Javascript sera rejetée.

Enfin, nous chargeons un peu de HTML dans notre QWebEngineView:

    const QUrl baseUrl = QUrl(u"https://www.qt.io"_s);
    const QString videoUrl = u"https://www.youtube.com/embed/CjyjEUFn_FI"_s;
    const QString html = u"<!doctype html>"
                         "<html lang='en'>"
                         "     <head>"
                         "         <meta charset='utf-8'>"
                         "         <style type='text/css'>"
                         "             #ytplayer {"
                         "                 position: absolute;"
                         "                 top: 0;"
                         "                 left: 0;"
                         "                 width: 100%;"
                         "                 height: 100%;"
                         "             }"
                         "         </style>"
                         "     </head>"
                         "     <body>"
                         "         <iframe"
                         "             id='ytplayer'"
                         "             src='%1'"
                         "             frameborder='0'"
                         "             allowfullscreen>"
                         "         </iframe>"
                         "     </body>"
                         "</html>"_s.arg(videoUrl);
    m_view->setHtml(html, baseUrl);

Remarque : l'exemple ne charge pas le contenu à partir d'un fichier local. La politique de sécurité de Youtube exige que les lecteurs intégrés vérifient l'origine de la requête. Cet exemple contourne cette restriction en utilisant l'API QWebEngineView::setHtml et en définissant le paramètre baseUrl de sorte que la demande semble provenir de https://www.qt.io, ce qui répond à l'exigence de vérification de l'origine.

La deuxième partie de MainWindow traite les demandes de plein écran :

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();
    }
}

Nous créons un nouveau FullScreenWindow lorsque nous passons en mode plein écran et nous le supprimons lorsque nous en sortons.

Déclaration de la classe FullScreenWindow

Un FullScreenWindow est un QWidget contenant un QWebEngineView et un 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;
};

Définition de la classe FullScreenWindow

Le constructeur est chargé de masquer la fenêtre normale (tout en sauvegardant sa géométrie) et d'afficher la nouvelle FullScreenWindow à la place :

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();
}

L'appel à QWebEngineView::setPage déplacera la page web de la vue MainWindow à la vue FullScreenWindow.

Dans le destructeur, nous utilisons la même méthode pour déplacer la page vers l'arrière, après quoi nous restaurons la géométrie et la visibilité de la fenêtre principale :

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

Nous remplaçons QWidget::resizeEvent pour effectuer une mise en page manuelle, en gardant la page QWebEngineView maximisée et la page FullScreenNotification centrée dans la fenêtre :

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);
}

Déclaration de la classe FullScreenNotification

Une FullScreenNotification n'est rien d'autre qu'une QLabel avec un peu de style et d'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;
};

Définition de la classe FullScreenWindow

Dans le constructeur, nous configurons le site QLabel et mettons en place une animation de fondu-enchaîné différé à l'aide de The Animation Framework:

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(); });
}

Le signal personnalisé shown, que nous utilisons pour déclencher l'animation, est émis par la méthode showEvent:

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

Exemple de projet @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. 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.