Qt6.4.3中QML WebEngineView无法播放无480P的YouTube视频

问题描述 #

使用Qt 6.4.3开发的程序，通过WebEngineView加载YouTube视频时出现异常：

• 加载https://www.youtube.com/embed/cabBXCq7_P8能显示预览，但点击播放报错
• 加载https://www.youtube.com/watch?v=cabBXCq7_P8时提示"You browser can't play this video"

相关代码 #

CMakeLists.txt #

cmake_minimum_required(VERSION 3.16)

project(youtube_video VERSION 0.1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick WebEngineQuick)

qt_standard_project_setup()

qt_add_executable(appyoutube_video
    main.cpp
)

qt_add_qml_module(appyoutube_video
    URI youtube_video
    VERSION 1.0
    QML_FILES Main.qml
)

# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
# If you are developing for iOS or macOS you should consider setting an
# explicit, fixed bundle identifier manually though.
set_target_properties(appyoutube_video PROPERTIES
#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.appyoutube_video
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

target_link_libraries(appyoutube_video
    PRIVATE Qt6::Quick Qt6::WebEngineQuick
)

include(GNUInstallDirs)
install(TARGETS appyoutube_video
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

main.cpp #

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtWebEngineQuick/qtwebenginequickglobal.h>

int main(int argc, char *argv[]) {
    QtWebEngineQuick::initialize();
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/youtube_video/Main.qml"_qs);
    QObject::connect(
        &engine, &QQmlApplicationEngine::objectCreationFailed, &app, []() { QCoreApplication::exit(-1); }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

Main.qml #

import QtQuick
import QtQuick.Controls
import QtQuick.Window
import QtWebEngine

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    WebEngineView {
        anchors.fill: parent
        url: "https://www.youtube.com/embed/cabBXCq7_P8"
    }
}

错误原因 #

1. 用户代理检测限制：YouTube会检测访问的用户代理，Qt WebEngine默认的用户代理标识不被YouTube的播放服务认可，被判定为不支持的浏览器环境，从而阻止视频播放。
2. 编解码器缺失：开源版本的Qt WebEngine可能未包含H.264等受专利保护的多媒体编解码器，而YouTube主流视频采用这些编码格式，导致无法解码播放。
3. 嵌入权限参数不足：Embed链接缺少必要的权限参数，可能导致播放权限被限制。

修复方案 #

1. 修改用户代理，模拟主流浏览器 #

可以在QML中给WebEngineView设置主流浏览器的用户代理：

WebEngineView {
    anchors.fill: parent
    // 模拟Chrome浏览器的用户代理
    userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36"
    url: "https://www.youtube.com/embed/cabBXCq7_P8"
}

也可以在C++代码中全局设置用户代理（在QtWebEngineQuick::initialize()之后添加）：

#include <QWebEngineProfile>

// ...

int main(int argc, char *argv[]) {
    QtWebEngineQuick::initialize();
    // 设置全局用户代理
    QWebEngineProfile::defaultProfile()->setHttpUserAgent(
        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36"
    );
    QGuiApplication app(argc, argv);

    // ... 后续代码不变
}

2. 补充多媒体编解码器支持 #

• Windows平台：安装系统级的多媒体编解码器包（比如K-Lite Codec Pack），或者使用Qt商业版本（包含专利编解码器）。
• Linux平台：安装gstreamer相关插件，以Debian/Ubuntu为例：

  sudo apt install gstreamer1.0-libav gstreamer1.0-plugins-good gstreamer1.0-plugins-bad gstreamer1.0-plugins-ugly
  

• macOS平台：系统通常自带必要编解码器，若缺失可尝试更新系统，或使用Qt商业版本。

3. 为Embed链接添加权限参数 #

给YouTube的Embed链接补充必要的权限参数，提升兼容性：

url: "https://www.youtube.com/embed/cabBXCq7_P8?allow=autoplay; encrypted-media; fullscreen"

内容的提问来源于stack exchange，提问作者Ivan