Question

我正在使用WebGL将视频纹理渲染到画布上。加载视频后，应渲染第一帧。视频不一定在播放（仅显示第一帧），也不在DOM树中。

video.preload保留为默认设置（是否可能必须将其设置为auto？）

我的第一种方法会导致类似的事情（忽略所有与WebGL相关的内容，因为我认为此处不相关，但总的来说，它与本指南类似：https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL）：

video.addEventListener('loadeddata', () => {
    requestAnimationFrame(() => renderToCanvas());
});

但似乎未加载视频图像数据，并且至少在Firefox和Chrome（台式机和Android）中，WebGL导致以下警告，而不是呈现的纹理：

Chrome浏览器：

WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty

[.WebGL-0x3c74af309800]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?

Firefox：

Error: WebGL warning: drawArraysInstanced: TEXTURE_2D at unit 0 is incomplete: The dimensions of `level_base` are not all positive.

将'loadeddata'与'canplay'交换会导致相同的错误。

我当前相当棘手的解决方法如下：

video.addEventListener('loadeddata', () => {
    if (video.currentTime === 0)
        video.currentTime = 0;
}

video.addEventListener('seeked', () => {
    requestAnimationFrame(() => renderToCanvas());
});

还有更好的方法吗？我是否忽略了恰恰是为此目的的活动？

加载后，通过WebGL纹理将视频的第一帧渲染到Canvas上

0 个答案: