XPlayer

基于 SOUI5 + SDL3 构建的跨平台高性能视频播放器,采用 SDL3 硬件加速上屏机制,实现 UI 与视频的完美融合,带来超一流的流畅体验。

XPlayer 主界面

功能特性

🎬

高性能视频播放

支持多种视频格式解码,包括 MP4、WebM、HLS 等主流格式,配合硬件加速实现流畅播放体验。

🎨

精美UI设计

采用网易云音乐风格的UI设计,深色主题搭配渐变效果,支持幕布动画过渡效果。

📱

跨平台支持

原生支持 Windows 和 Linux 平台,一次开发,多处运行,保持一致的用户体验。

视频录制

内置视频录制功能,支持将正在播放的视频保存到本地文件。

🔊

音频控制

完整的音量控制、静音/取消静音功能,支持音量滑块精确调节。

🌍

多语言支持

支持中英文切换,界面友好,满足不同地区用户需求。

技术架构

SOUI5

新一代高性能UI框架

SDL3

跨平台多媒体库

IHostPresenter

SOUI窗口渲染接口

Hardware Acceleration

硬件加速渲染

IHostPresenter 技术详解

什么是 IHostPresenter

IHostPresenter 是 SOUI 框架提供的一个核心接口,允许开发者将 UI 渲染委托给自定义的渲染器。传统的 UI 框架通常使用系统原生的 GDI/Direct2D/Cairo 等渲染方式,而 IHostPresenter 接口打破了这种限制,使开发者能够完全控制 UI 的渲染流程。

SOUI UI 渲染
IHostPresenter
自定义渲染器
屏幕显示

SdlPresenter 的实现机制

XPlayer 使用 SdlPresenter 类实现了 IHostPresenter 接口,将 SDL3 的硬件加速能力与 SOUI 的 UI 渲染完美结合。

1. 窗口创建与绑定

OnHostCreate 方法中,SdlPresenter 使用 SDL3 的新 API SDL_CreateWindowWithProperties 创建 SDL 窗口,并将其绑定到 SOUI 的宿主窗口上:

SDL_PropertiesID props = SDL_CreateProperties(); #ifdef _WIN32 SDL_SetPointerProperty(props, SDL_PROP_WINDOW_CREATE_WIN32_HWND_POINTER, m_pHostWnd->GetHwnd()); #elif defined(__linux__) SDL_SetNumberProperty(props, SDL_PROP_WINDOW_CREATE_X11_WINDOW_NUMBER, (Sint64)m_pHostWnd->GetHwnd()); #endif m_sdlWnd = SDL_CreateWindowWithProperties(props);

2. UI 纹理缓存机制

OnHostPresent 方法接收 SOUI 的渲染结果(HDC/RenderTarget),将其转换为 SDL 纹理进行缓存:

void SdlPresenter::_OnHostPresent(HostTextureInfo info) { // 创建或更新纹理 m_wndTexture = SDL_CreateTexture(m_sdlRenderer, SDL_PIXELFORMAT_ARGB8888, SDL_TEXTUREACCESS_STREAMING, info.nWid, info.nHei); // 锁定纹理并复制像素数据 SDL_LockTexture(m_wndTexture, &rcSdl, &pDst, &pitch); memcpy(pDst, info.buf, pitch * rcSdl.h); SDL_UnlockTexture(m_wndTexture); }

3. 视频帧更新

视频帧通过 UpdateVideoCanvas 方法异步更新到 SDL 纹理,支持 YUV420P 格式的硬件加速渲染:

void SdlPresenter::_UpdateVideoCanvas(int canvasId, SComPtr frame) { // 创建 YUV 纹理 it->second.texture = SDL_CreateTexture(m_sdlRenderer, SDL_PIXELFORMAT_IYUV, SDL_TEXTUREACCESS_STREAMING, frame->width(), frame->height()); // 使用 SDL3 YUV 更新 API SDL_UpdateYUVTexture(it->second.texture, NULL, data, lineSize[0], // Y plane data + line1Offset, lineSize[1], // U plane data + line2Offset, lineSize[2]); // V plane }

4. 混合渲染流程

UpdateRender 方法实现了完整的混合渲染流程,先渲染视频层,再渲染 UI 层:

void SdlPresenter::UpdateRender() { SDL_RenderClear(m_sdlRenderer); // 第一步:渲染视频纹理(底层) TextureMap::iterator it = m_videoTextures.begin(); while(it != m_videoTextures.end()){ if(it->second.bVisible && it->second.texture){ SDL_FRect rcDst = {...}; SDL_RenderTexture(m_sdlRenderer, it->second.texture, NULL, &rcDst); } it++; } // 第二步:渲染 UI 纹理(顶层,带透明度) if (m_wndTexture) { SDL_RenderTexture(m_sdlRenderer, m_wndTexture, NULL, NULL); } // 第三步:呈现到屏幕 SDL_RenderPresent(m_sdlRenderer); }

技术优势

🎯 单窗口架构

UI 与视频在同一窗口中渲染,避免了传统方案中多个窗口叠加带来的闪烁、层级问题和性能开销。

⚡ 硬件加速

SDL3 自动选择最佳的渲染后端(Direct3D/OpenGL/Vulkan/Metal),所有渲染操作都在 GPU 中完成。

🎨 完美混合

UI 纹理使用 SDL_BLENDMODE_BLEND 混合模式,支持透明度叠加,实现精美的视觉效果。

🔄 异步更新

视频帧更新通过 STaskHelper::post 异步调度到主线程,避免阻塞视频解码线程。

🌍 跨平台一致性

通过 SDL3 的统一 API,在 Windows 和 Linux 上实现完全一致的渲染效果。

渲染架构图

视频解码线程
UpdateVideoCanvas
SOUI UI 渲染
OnHostPresent
SDL Renderer
GPU 硬件加速
屏幕显示

截图展示

XPlayer 播放界面

播放界面 - 深蓝色幕布效果

XPlayer 控制栏

控制栏 - 播放控制与进度条

性能特点

SDL3 硬件加速上屏

利用 SDL3 内置的硬件加速能力,实现视频帧的快速渲染,降低CPU占用,提升播放流畅度。

🎯

单窗口混合渲染

通过 SOUI 的 IHostPresenter 接口机制,将 UI 内容与视频画面在同一窗口中混合上屏,避免窗口层级问题。

超一流流畅动画

幕布开合动画、控制栏淡入淡出等效果均采用 GPU 加速,60fps 流畅体验。

🔄

智能资源管理

自动管理视频缓冲、纹理资源,及时释放不再使用的内存,保持应用轻量运行。