【零基础学WebGL】播放视频

前言

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;

  /* *** 准备纹理数据 *** */
  ...

  /* *** 播放动画 *** */
  ...
};