前言
H5播放视频,通常可以使用HTML Video实现。但如果考虑HTML Video在移动端的兼容性,或者需要进行视频处理,比如添加滤镜效果,那么WebGL是一种可选的手段。
本文定义playVideoInWebGL方法,包含了三个环节:
- 环境准备:负责初始化webgl上下文、着色器程序。和之前的文章是一致的,本文不再赘述。
- 纹理数据准备:负责初始化纹理对象、视频数据、视频封面数据;
- 动画播放:负责循环播放视频
const playVideoInWebGL = async () => {
/* *** 环境准备 *** */
// 获得webgl上下文
const gl = createContext("container", 300, 300);
if (!gl) return;
gl.clearColor(0, 0, 0, 0);
// 分别创建顶点着色器和片段着色器
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertextSource);
if (!vertexShader) return;
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
if (!fragmentShader) return;
// 创建应用程序
const program = createProgram(gl, [vertexShader, fragmentShader]);
if (!program) return;
/* *** 准备纹理数据 *** */
...
/* *** 播放动画 *** */
...
};