视频播放器项目实战-音视频播放

🎬 先打个比方：播放就像餐厅上菜！

想象餐厅的厨房：

🍽️ 餐厅上菜 │
├── 🖼️ 视频菜
│ ├── 备菜：解码器准备YUV食材
│ ├── 摆盘：Shader调味上色
│ ├── 上菜：GLVideoView端盘上桌
│ └── 摆桌：EGL布置桌面
├── 🔊 音频菜
│ ├── 备菜：重采样调整口味
│ ├── 装盘：PCM装碗
│ ├── 传菜：缓冲队列传递
│ └── 上菜：SLAudioPlay端盘上桌
└── 🎯 协调员：确保菜同时上桌

记住这个比喻，你就懂了！

🖼️ 一、视频显示模块

IVideoView 接口设计

痛点：没有统一的显示抽象。导致不同网站代码耦合，维护成本高。

class IVideoView {
public的观点是，virtual void display = 0;virtual int init = 0;virtual void close = 0;}，

GLVideoView 实现

痛点：直接在业务层调用 OpenGL/EGL，代码混乱且难以复用。

class GLVideoView : public IVideoView {
private:
XShader *shader = nullptr;其实，XTexture *texture = nullptr;IEGL *egl = nullptr;ANativeWindow *window = nullptr;int width = 0;int height = 0;public:
int init override {
width = w;height = h，window = win;其实，// 1️⃣ EGL 初始化
egl = new XEGL;if，= 0) { printf;return -1，}
// 2️⃣ Shader 初始化
shader = new XShader;if，= 0) { printf;return -1，}
// 3️⃣ Texture 初始化
texture = new XTexture;if，= 0) { printf;按理说，return -1;}
glViewport;printf，说起来，return 0;}
void display override {
if return;texture->update;// 更新纹理数据 → 防止卡顿
shader->draw;// 绘制 → 保证颜色正确
egl->swapBuffer;// 双缓冲交换 → 平滑画面
}
void close override {
delete texture;其实，texture = nullptr;delete shader;shader = nullptr;delete egl，egl = nullptr;}
}，

IEGL 类封装

痛点：在 Android9+ 上直接使用 EGL 会报 “EGL_BAD_DISPLAY”，导致播放器直接崩溃。

class IEGL {
说到public，virtual int init = 0;virtual void close = 0;virtual void draw = 0;virtual void swapBuffer = 0;}，class XEGL : public IEGL {
private:
EGLDisplay display = EGL_NO_DISPLAY;EGLSurface surface = EGL_NO_SURFACE;不过，EGLContext context = EGL_NO_CONTEXT;其实，public:
int init override {
display = eglGetDisplay;其实，if { printf;return -1，}
if ) { printf;return -1，怎么说呢，}
const EGLint configAttrs = {
EGL_RED_SIZE,8,EGL_GREEN_SIZE,8。EGL_BLUE_SIZE,8,EGL_ALPHA_SIZE,8,EGL_SURFACE_TYPE,EGL_WINDOW_BIT,EGL_NONE
};EGLConfig config;EGLint numConfigs;if ) {
printf;按理说，return -1;}
// ★关键★ Android9+ 必须设置 Buffer Geometry，否则会出现黑屏/闪烁
#if __ANDROID_API__>= 26
ANativeWindow_setBuffersGeometry(window。ANativeWindow_getWidth,ANativeWindow_getHeight,AHARDWAREBUFFER_FORMAT_R8G8B8A8_UNORM);#endif
surface = eglCreateWindowSurface;if { printf，return -1;}
const EGLint ctxAttrs = {EGL_CONTEXT_CLIENT_VERSION。2,EGL_NONE}，按理说，context = eglCreateContext;按理说，if { printf;其实，return -1;}
if ) {
printf;return -1，}
printf;return 0，}
void close override {
if {
eglMakeCurrent;eglDestroyContext;eglDestroySurface;eglTerminate;不过，display=EGL_NO_DISPLAY;老实说，}
}
void draw override { glClear;}
void swapBuffer override { eglSwapBuffers;}
}，

🎨 二、Shader 模块

XShader 初始化与多格式支持

痛点：不同手机返回 NV12、NV21 或 YUV420P，若不区分会导致画面偏色或花屏。不过，

class XShader {
private:
GLuint program=0;GLuint vertexShader=0;GLuint fragmentShader=0;const char* vertexCode =
"attribute vec4 aPosition;"
"attribute vec2 aTexCoord;"
"varying vec2 vTexCoord;"
"void main{
"
" gl_Position=aPosition;"
" vTexCoord=aTexCoord;"
"}
"，// 默认 YUV420P → RGB 转换
const char* fragment420P =
"precision mediump float;"
"varying vec2 vTexCoord;"
"uniform sampler2D yTex;"
"uniform sampler2D uTex;"
"uniform sampler2D vTex;"
"void main{
"
" float y=texture2D.r;"
" float u=texture2D.r-0.5;"
" float v=texture2D.r-0.5;"
" float r=y+1.402*v;"
" float g=y-0.344*u-0.714*v;"
" float b=y+1.772*u;"
" gl_FragColor=vec4;"
"}
"，不过，public:
int init{ // format 为 X_DATA_TYPE_*
const char* fragSrc=nullptr;switch{
case X_DATA_TYPE_YUV420P: fragSrc=fragment420P;break，case X_DATA_TYPE_NV12: fragSrc=getNV12Fragment;break，case X_DATA_TYPE_NV21: fragSrc=getNV21Fragment;break，}
if{printf;return -1，}
vertexShader=glCreateShader;glShaderSource;glCompileShader;
fragmentShader=glCreateShader;其实，glShaderSource;glCompileShader;program=glCreateProgram;glAttachShader;老实说，glAttachShader;其实，/* simplified */
glLinkProgram;glUseProgram;printf，return 0;}
void draw{ glDrawArrays;}
}，

🖼️ 三、纹理模块

XTexture 初始化与高效更新

痛点：每帧重新创建纹理会导致 GPU 卡顿；应使用一次创建、多次更新策略。

class XTexture{
private:
GLuint texY=0。texU=0,texV=0;public:
int init{
glGenTextures;configure，不过，glGenTextures;其实，configure;glGenTextures;configure，printf;return 0，}
void update{
// Y plane
glBindTexture;glTexImage2D(GL_TEXTURE_2D,0,GL_LUMINANCE,frame->width。frame->height,0,GL_LUMINANCE,GL_UNSIGNED_BYTE,frame->data);// U plane
glBindTexture;glTexImage2D(GL_TEXTURE_2D,0,GL_LUMINANCE,frame->width/2。frame->height/2,0,GL_LUMINANCE,GL_UNSIGNED_BYTE,frame->data);// V plane
glBindTexture;glTexImage2D(GL_TEXTURE_2D,0,GL_LUMINANCE,frame->width/2。frame->height/2,0,GL_LUMINANCE,GL_UNSIGNED_BYTE,frame->data);}
private:
void configure{
glBindTexture;glTexParameteri;glTexParameteri;glTexParameteri;glTexParameteri;}
}，

🔊 四、音频播放模块

IResample 音频重采样实现

痛点：原始音频采样率不统一，直接喂给 OpenSL ES 会出现噪声或声音过快。

class IResample{
至于public，virtual int init=0;virtual int resample=0;}，class FFResample : public IResample{
private:
SwrContext* swr=nullptr;public:
int initoverride{
swr=swr_alloc;av_opt_set_int;av_opt_set_int;av_opt_set_sample_fmtcodec->format,-1);av_opt_set_int;av_opt_set_int;// 固定为44.1kHz，兼容大多数设备
av_opt_set_sample_fmt;if<0){printf;return -1;}
          printf;
          return  0;}
      int resampleoverride{
         int outSamples=swr_convertsrc->data,src->nb_samples );return outSamples * av_get_bytes_per_sample* _CH_LAYOUT_STEREO /64;/* 返回字节数 */
}
};

IAudioPlay 与 SLAudioPlay 实现

痛点：OpenSL ES 缓冲区管理不当会导致“声卡占用”或“音频断裂”。本实现采用环形缓冲 + 自动回调方式保证连续播放。

class IAudioPlay{
public这方面，virtual int init=0;virtual void update=void;virtual void start=void;virtual void stop=void;virtual void close=void;}，class SLAudioPlay : public IAudioPlay{
private:
SLObjectItf engineObj=nullptr;SLInterfaceID ids={SL_IID_BUFFERQUEUE};SLEngineItf engineEng=nullptr;SLObjectItf mixObj=nullptr;SLObjectItf playerObj=nullptr;SLPlayItf playIf=nullptr;SLBufferQueueItf bufQueue=nullptr;怎么说呢，uint8_t* buffer=nullptr;int bufSize=4096;老实说，public:
int initoverride{
buffer=malloc;slCreateEngine;->Realize，->GetInterface;->CreateOutputMix;不过，->Realize;SLDataFormat_PCM pcm={SL_DATAFORMAT_PCM,channels==2?SL_SPEAKER_FRONT_LEFT|SL_SPEAKER_FRONT_RIGHT:SL_SPEAKER_FRONT_CENTER,SL_SAMPLINGRATE_44_10000/*44.1k*/。SL_PCMSAMPLEFORMAT_FIXED_16,SL_PCMSAMPLEFORMAT_FIXED_16,SL_BYTEORDER_LITTLEENDIAN };SLDataLocator_BufferQueue loc={SL_DATALOCATOR_ANDROIDSIMPLEBUFFERQUEUE,sizeof};SLDataSource src={&loc,&pcm};SLDataLocator_OutputMix outLoc={SL_DATALOCATOR_OUTPUTMIX,mixObj};SLDataSink sink={&outLoc,NULL};->CreateAudioPlayer/sizeof。ids,{SL_BOOLEAN_TRUE});->Realize，说起来，->GetInterface;->GetInterface;->RegisterCallback;// callback 在后文略
printf;return    ​ ​ ​ ​ ​ ​              ‑ ‑ ‑‑ ‑ –    –
​​
——— –———
}
void updateoverride{ ->Enqueue;}
void startoverride{->SetPlayState;}
void stopoverride{->SetPlayState;老实说，}
void closeoverride{
if{->Destroy;} playerObj=nullptr;}
if{->Destroy;不过，} mixImg=nullpt…/*省略其余释放*/
}

🎯 五、整体播放控制流程图

┌─────────────────────────────────────┐
│ 完整播放流程 │
├─────────────────────────────────────┤
│ 文件 → 解封装 → Packet │
│ ├─ 视频包 → 解码 → YUV → Render │
│ │ │
│ └─ 音频包 → 解码 → PCM → Resample→ OpenSLES 播放 │
│ │
│ 同步控制器 ⟶ 时间戳对齐 │
└─────────────────────────────────────┘

🔧 六、常见使用者痛点与对应方法汇总表

📋 七、快速上手口诀

• 🖥️ 视频卡顿 👉 检查 Texture 是否重复创建；确认是否开启双缓冲，
• 🔊 音画不同步 👉 查看 pts 是否对齐；不过，检查 Resample 输出采样率是否统一。
• ⚙️ 安卓兼容 👉 Android9+ 必须调用 ANativeWindow_setBuffersGeometry。
• 🎨 花屏偏色 👉 根据手机返回的 YUV 格式切换对应 Shader。说起来，
• SLAudioPlay 崩溃 👉 确认 BufferQueue 已注册回调并循环写入数据。