Back to Qt.io
Contact Us Blog Download Qt

WebEngine ウィジェット ビデオプレーヤーの例

QWebEngineView を使用してフルスクリーン動画を表示します。

Video Playerは、QWebEngineView を使用して HTML5 動画のフルスクリーン再生をサポートする方法を示します。

Fullscreen APIは、Web ページがその HTML 要素の 1 つをユーザーの画面全体を占めるように要求できるようにする、クロス ブラウザ Javascript API です。一般的には、<video> 要素を介したフルスクリーン・ビデオ再生に使用されますが、原理的には、あらゆる HTML コンテンツをフルスクリーン・モードで表示するために使用できます。Qt WebEngine はこの API をサポートしていますが、デフォルトでは無効になっています。この例では、それをオンにするために必要な手順を示します：

  • QWebEngineSettings で有効にする。
  • 新しいフルスクリーンウィンドウを作成して、QWebEnginePage::fullScreenRequested シグナルを処理する。
  • 通知ポップアップを表示して、全画面表示されていることをユーザーに知らせる。

例の実行

からサンプルを実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Exampleを参照してください。

概要

起動すると、サンプル・プログラムは、埋め込まれたYouTubeビデオ・プレーヤーを表示するQWebEngineView 、通常の（フルスクリーンでない）ウィンドウを作成します。フルスクリーン・トグル・ボタン（右下隅）をクリックすると、フルスクリーン・モードになります。また、エスケープキーを押すことでフルスクリーンモードを終了できることを知らせる通知オーバーレイが中央に表示されるはずです。

実装的には、フルスクリーンモードに入るには、別のQWebEngineView インスタンスで新しいフルスクリーンウィンドウを作成し、通常のウィンドウのQWebEngineView からこの新しいQWebEngineView にQWebEnginePage を移行する必要があります。フルスクリーンモードを終了すると、この移行は逆になる。

サンプル・コードは3つのクラス、MainWindow 、FullScreenWindow 、FullScreenNotification に分かれています。クラスMainWindow とFullScreenWindow はそれぞれ1つのトップレベル・ウィンドウの管理を担当し、FullScreenNotification は通知ボックスのスタイリングとアニメーションを担当します。MainWindow は起動時に作成され、プログラム実行中ずっと存在します。一方、FullScreenWindow はフルスクリーンモードになるたびに作成されます。

MainWindow クラスの宣言

MainWindow は、QWebEngineView を中心ウィジェットとするQMainWindow です：

#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クラスの定義

コンストラクタでは、まずQWebEngineView を中心ウィジェットとして設定します：

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

次に、Qt WebEngine を設定して、フルスクリーン API のサポートをアドバタイズします：

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

この行がないと、フルスクリーン・トグル・ボタンが無効になります（グレー表示）。これは、ページ上で動作するJavascriptが、ブラウザがフルスクリーン・モードをサポートしていないことを検出するためです。

次に、fullScreenRequested シグナルをスロットに接続します：

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

このシグナルは、ページ上のJavascriptがフルスクリーンモードに入りたいとき、またはフルスクリーンモードから抜けたいときに、いつでも発せられます。このシグナルを処理しない場合（ただし、FullScreenSupportEnabled 属性はtrue のまま）、トグルボタンは有効になりますが、Javascriptのフルスクリーンリクエストが拒否されるため、クリックしても効果はありません。

最後に、いくつかのHTML（サンプルに含まれるwebenginewidgets/videoplayer/data/index.html を参照）をQWebEngineView に読み込みます：

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

MainWindow の2番目の部分は、フルスクリーン・リクエストの処理です：

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

フルスクリーンモードに入るときに新しいFullScreenWindow 。

FullScreenWindowクラスの宣言

FullScreenWindow は、QWebEngineView とFullScreenNotification を含むQWidget です。

#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 クラスの定義

コンストラクタは、通常のウィンドウを非表示にし（ジオメトリは保存する）、代わりに新しいFullScreenWindow を表示します：

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

QWebEngineView::setPage を呼び出すと、ウェブ・ページがMainWindow のビューからFullScreenWindow のビューに移動します。

デストラクタでは、同じメソッドを使ってページを戻し、メイン・ウィンドウのジオメトリと可視性を元に戻します：

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

QWidget::resizeEvent をオーバーライドして手動レイアウトを行い、QWebEngineView を最大化し、FullScreenNotification をウィンドウの中央に配置します：

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クラスの宣言

FullScreenNotification は、QLabel にスタイリングとアニメーションを加えただけのものです：

#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クラスの定義

コンストラクタでは、QLabel を設定し、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(); });
}

アニメーションをトリガーするためのカスタム・シグナルshown は、showEvent メソッドから発信されます：

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

プロジェクト例 @ code.qt.io

© 2025 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.