三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

UE里怎么播放视频和打开外部网页

发布时间：2026/8/16 14:19:55 三亩地 编程学习日记
UE里怎么播放视频和打开外部网页

UE里怎么播放视频、打开外部网页？

先说结论：在 UE 里播放视频、打开外部网页，不用自己写解码器，也不用接 FFmpeg——直接用一个 Web 控件就能搞定。视频交给 Chromium 内核的 GPU 解码管线，网页、iframe、弹窗都走标准的浏览器能力。H.264、VP8、VP9、AV1 这类主流格式开箱即用，H.265/HEVC 能不能放取决于硬件和编译配置，文末给了实测方法。

WebNativeBrowser是面向 UE 5.1–5.8 的高性能企业级跨平台 Web UI 插件，基于完整 Chromium 内核，天然具备浏览器级别的视频播放和网页浏览能力。

一、为什么用 Web 控件播放视频

UE 原生做视频，通常会走 MediaPlayer / MediaTexture 这条线，但它对编码格式、容器、音轨、直播流、加密视频（DRM）的支持都比较受限，跨平台还要自己适配解码库。

而 Web 控件的思路是：把"播放"这件事交给浏览器内核。浏览器内核已经解决了：

  • 编解码（H.264、VP8、VP9、AV1、AAC、Opus 等）
  • 容器封装（MP4、WebM、TS 流等）
  • 流式播放（HLS、DASH、直播）
  • 硬件解码（GPU 解码管线）
  • 音画同步、倍速、字幕、全屏
  • 受保护内容（EME/Widevine DRM）

你只需要在 UE 里放一个 Web 控件，写一个<video>标签，剩下的都不用管。

WebNativeBrowser 在这之上还做了两件事：

  1. 视频帧率不受控件渲染帧率限制。CEF 的 FPS 是全页面合成频率，视频播放由 GPU 内部解码管线独立处理，不会因为界面帧率低而卡顿。
  2. 视频播放自适应帧率，自动匹配视频帧率，避免无效重复合成。

二、先看最简单的：一个<video>播放本地视频

在YourProject/Content/WebUI/下建一个player.html：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><style>html, body{margin:0;width:100%;height:100%;background:#000;}video{width:100%;height:100%;display:block;}</style></head><body><videocontrolsautoplay><!-- 优先 H.264 MP4，浏览器放不了再回退到 VP9 WebM --><sourcesrc="demo.mp4"type='video/mp4; codecs="avc1.640028, mp4a.40.2"'><sourcesrc="demo.webm"type='video/webm; codecs="vp9, opus"'></video></body></html>

把demo.mp4也放进Content/WebUI/，然后在 UE 里加载这个页面即可。

三、支持的视频/音频格式

WebNativeBrowser 基于 Chromium 144 内核，主流格式能力如下：

格式容器说明
H.264 / AVCMP4、TS兼容性最好，硬解/软解都稳，企业项目首选
VP8WebM标准支持，兼容老设备
VP9WebM标准支持，4K 直播常用
AV1MP4、WebM新一代编码，压缩率高，硬解看显卡
AACMP4主流音频，H.264 标配音轨
OpusWebMWebRTC/WebM 常用音频
H.265 / HEVCMP4、TS特殊项，见下文

关于 H.265/HEVC 的实话：Chromium 官方内核对 HEVC 的支持受硬件解码能力和编译配置双重影响，不同平台表现不一样——Windows 上支持 HEVC 的显卡通常可以硬解，Linux 则往往需要在编译 CEF 时显式启用。所以 H.265 不能一句话拍板，最靠谱的做法是在目标机器上跑一次检测（代码在第六节），实测canPlayType和MediaSource.isTypeSupported的返回值。

此外，插件还支持：

  • 4K 视频，最高 8K 应用场景（实际效果取决于编码、页面、GPU、驱动和输出分辨率）
  • MSE（MediaSource Extensions）：HLS/DASH 流、自定义流式播放
  • WebCodecs：VideoDecoder/VideoEncoder，可做低延迟解码和转码
  • WebRTC：音视频通话、远程桌面、监控推流
  • 受保护内容（EME/Widevine DRM）：allow_protected_media默认开启

四、打开外部网页的几种方式

方式 1：LoadURL直接加载

在 Widget Blueprint 里选中 WebNative Browser 控件，设置Initial URL，或在蓝图里调用LoadURL：

LoadURL("https://www.bilibili.com")

这就是最直接的"打开外部网页"。

方式 2：iframe 嵌入

页面里用 iframe 嵌入外部站点或视频（比如 B 站、YouTube 的嵌入播放器）：

<iframesrc="https://www.bilibili.com/video/BV1R1e4zKEh1"width="100%"height="100%"allow="autoplay; encrypted-media; picture-in-picture"allowfullscreen></iframe>

这是播放平台视频最省事的做法——不用自己处理视频源，直接嵌官方播放器。

方式 3：弹窗（popup）拦截与处理

网页里点target="_blank"的链接、window.open都会触发弹窗。WebNativeBrowser 通过OnBeforePopup事件把目标 URL 交给你，你可以决定：

  • 用同一个控件加载（代替开新窗口）
  • 用系统浏览器打开
  • 完全拦截

这在 UE 应用里很关键——UE 里没有"浏览器标签页"的概念，弹窗必须被显式处理，否则点链接没反应。

五、UE 端加载流程（3 步）

  1. Content Browser 右键 →User Interface → Widget Blueprint，命名WBP_VideoPlayer
  2. 从 Palette 搜索WebNative Browser，拖入 Canvas，铺满
  3. 选中控件，在 Details 面板设置Initial URL为：
file:///E:/YourProject/Content/WebUI/player.html

（路径改成你的实际项目路径）

然后打开 Level Blueprint 或任意 Actor 蓝图，BeginPlay 里：

Event BeginPlay → Create Widget (Class: WBP_VideoPlayer) → Add to Viewport

点 Play，视频就出现在 UE 视口里了。

六、实测你的环境支持哪些格式

把这个检测页存成check.html加载进 UE，它会列出当前 CEF 环境对每种格式的真实支持情况：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"></head><bodystyle="background:#111;color:#eee;font-family:monospace;padding:20px;"><h2>当前 CEF 视频格式支持</h2><preid="result"style="font-size:14px;line-height:1.8;"></pre><script>constv=document.createElement('video');consttests=[['H.264 (MP4)','video/mp4; codecs="avc1.640028"'],['H.264 Main (MP4)','video/mp4; codecs="avc1.4d401e"'],['H.265/HEVC (MP4)','video/mp4; codecs="hev1.1.6.L120.90"'],['VP9 (WebM)','video/webm; codecs="vp9"'],['VP8 (WebM)','video/webm; codecs="vp8"'],['AV1 (MP4)','video/mp4; codecs="av01.0.05M.08"'],['AAC (音频)','audio/mp4; codecs="mp4a.40.2"'],['Opus (音频)','audio/webm; codecs="opus"'],['H.264 TS 流','video/mp2t; codecs="avc1.640028"'],];constrows=tests.map(([name,type])=>{constcanPlay=v.canPlayType(type)||'不支持';constmse=typeofMediaSource!=='undefined'&&MediaSource.isTypeSupported(type)?'MSE可':'MSE不可';returnname.padEnd(18)+' → '+canPlay+' ｜ '+mse;});document.getElementById('result').textContent=rows.join('\n')+'\n\nWebCodecs VideoDecoder: '+(typeofVideoDecoder!=='undefined')+'\nWebRTC: '+(typeofRTCPeerConnection!=='undefined');</script></body></html>

canPlayType返回值含义：

  • probably：大概率可硬解，放心用
  • maybe：可能软解，能放但吃 CPU
  • 空字符串：不支持

七、两个容易踩的坑

1. 国产 Linux 的 Dev 包视频硬解失效

这是 UE 的已知限制：Development 构建会安装信号处理器，被 fork 出的 CEF Helper 子进程继承后，GPU 进程启动异常，导致硬件视频解码失效。Shipping 包不受影响。

构建配置linux_single_process视频/硬件解码
Shippingfalse（默认）✅ 正常（多进程 + GPU 硬件解码）
Devfalse❌ 可能失效
Devtrue⚠️ 单进程软件渲染，可播放但无硬件加速

所以做国产 Linux 项目，验证视频一定要用 Shipping 包，别用 Dev 包下结论。

2. 国产 CPU/GPU 环境建议先开单进程

Chromium 144 把网络栈拆成独立的 NetworkService 子进程，通过 Mojo IPC 通信。在飞腾、鲲鹏 + 砺算等国产硬件组合上，Mojo IPC 的 Unix socket/eventfd 机制可能卡死，导致视频脚本加载失败。国产化环境建议先配置：

[WebNative] linux_single_process=true

跑通视频播放、消息通道和长时间稳定性测试后，再决定是否切回多进程。

八、WebNativeBrowser 让视频播放简单在哪

自己搭视频方案用 WebNativeBrowser
接 FFmpeg、自己封装解码浏览器内核内置解码，一个<video>搞定
编解码格式逐个适配H.264 / VP8 / VP9 / AV1 / AAC / Opus 开箱即用
直播、HLS/DASH 要自己实现MSE + WebRTC 原生支持
视频帧率和界面帧率互相拖累视频走 GPU 独立解码管线，帧率自适应
外部网页、弹窗要单独处理LoadURL / iframe / OnBeforePopup 一条龙
国产 Linux 平台自己踩坑单进程回退、国产 GPU 专项适配已内置

如果这篇帮你搞清了 UE 里的视频播放，欢迎点赞收藏。WebNativeBrowser 支持 UE 5.1–5.8，覆盖 Windows / Linux x86_64 / Linux ARM64，已完成国产 GPU 专项适配。

GitHub：https://github.com/starTechnology1994/uewebbrowser

商务合作 / 授权咨询：startechnology1994@163.com

编程学习 学习日记 实战经验
← 返回列表