Video WebGL中的视频纹理不工作

我正在学习本教程中的WebGL：在上一课中，它展示了如何使用视频对象作为纹理。这里有一个活生生的例子：它很好用，我正在使用Firefox。问题是，当我自己尝试这样做时，我遇到了问题。更奇怪的是，我的电脑离线时和主机在线时都有不同的错误信息。脱机错误：

file:///C:/Users/NPS/Desktop/gallery/video.html351: SecurityError:操作不安全

其中第351行是：

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);

Firefox开发者工具栏还显示：

错误：WebGL：禁止从未经CORS验证的跨域元素加载WebGL纹理。看

我读过关于这个错误的文章，但奇怪的是，它不起作用，因为html和视频文件都在同一个地方。此外，当我打开页面时，视频文件中的声音实际上会播放，但仅此而已。另一方面，在线版本的错误是不同的，但我不能把它放在这里，因为它是波兰语的，我不知道确切的英语对应词是什么。但如果你有Firefox，你可以在这里查看：我正在使用Firefox开发者栏。当然，您可以查看页面的源代码以及我在那里使用的所有内容

---

你知道我该怎么做才能让它工作吗？我真的很想在我的项目中加入视频纹理，但现在我被卡住了。

对于Chrome，您可以使用参数Chrome.exe尝试快捷方式-允许文件访问对于Chrome，您可以使用参数Chrome.exe尝试快捷方式-允许文件访问示例的问题是您的视频纹理不是2的幂你还没有设置纹理过滤来处理这个问题

将第353行从

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

到

再加上这两行

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

还可以删除对gl.generateMipmapGL_TEXTURE_2D的调用，因为无法为非二次幂纹理生成mips

你可以阅读有关

MDN站点上的示例已经被破坏了很长一段时间，没有人费心去修复它：-它曾经工作过，因为Firefox中的一个bug早就被修复了

注：Chrome 25 Chrome Canary将打印一些消息，帮助您指出这一点。当我在Chrome 25上运行您的示例时，我收到以下消息

WebGL: INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size video.html:1
WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' 

---

您的示例存在的问题是视频纹理不是2的幂，并且您没有设置纹理过滤来处理该问题

将第353行从

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

到

再加上这两行

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

还可以删除对gl.generateMipmapGL_TEXTURE_2D的调用，因为无法为非二次幂纹理生成mips

你可以阅读有关

MDN站点上的示例已经被破坏了很长一段时间，没有人费心去修复它：-它曾经工作过，因为Firefox中的一个bug早就被修复了

注：Chrome 25 Chrome Canary将打印一些消息，帮助您指出这一点。当我在Chrome 25上运行您的示例时，我收到以下消息

WebGL: INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size video.html:1
WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' 

---

在Chrome上，无论有没有你建议的，我都能看到一个几乎一切正常的场景。。。除了模型盒是黑色的。但我能听到视频中的声音。@你的视频编码是否受chrome支持？同时添加此参数-禁用web安全性它将禁用同源策略，以防万一：我的chrome说它甚至不知道该参数：P另外，伙计们，我正在寻找一个通用的解决方案，顺便说一句，我认为我的问题不在于浏览器连接。在Chrome上，无论有没有你建议的，我都能看到一个几乎所有东西都正常工作的场景。。。除了模型盒是黑色的。但我能听到视频中的声音。@你的视频编码是否受chrome支持？同时添加此参数-禁用web安全性它将禁用同源策略，以防万一：我的chrome说它甚至不知道该参数：另外，伙计们，我正在寻找一个通用的解决方案，顺便说一句，我认为我的问题不在于浏览器连接。Thx很多，这很有效！我还有两个后续问题：1为什么MDN示例即使没有您提出的修复方案也能工作？2在我的电脑上，我仍然会收到安全问题消息，通过不断地将代码上传到服务器来测试代码是令人厌烦的-有没有办法在我的电脑上运行它？它在FF中工作，因为他们的视频解码器中有一个bug。直接播放视频请注意，在FF中，它只是一个2次方，缺少视频的左侧和右侧。在Chrome中播放，它会显示整个视频，而不是2次幂。至于在本地运行它，对于视频，我使用node.js。安装node.js nodejs.org，然后实际安装http服务器，而不是bug，它应该说是不同的。FF只解码视频的一部分显然不是一个bug。但是WebGL示例仍然很糟糕，因为它只适用于power-of-2视频。我修复了mdn wiki。希望有人能修复真正的示例代码。上面的示例中有更多的NPOT问题。将：gl.texParameterigl.TEXTURE\u 2D、gl.TEXTURE\u MIN\u过滤器、gl.LINEAR更改为：gl.texParameterigl.TEXTURE\u 2D、gl.TEXTURE\u MIN\u过滤器、gl.NEARES

---

T和：gl.texParameterigl.TEXTURE_2D，gl.TEXTURE_MIN_FILTER，gl.LINEAR to gl.texParameterigl.TEXTURE_2D，gl.TEXTURE_MIN_FILTER，gl.NEARESTThx很多，这很有效！我还有两个后续问题：1为什么MDN示例即使没有您提出的修复方案也能工作？2在我的电脑上，我仍然会收到安全问题消息，通过不断地将代码上传到服务器来测试代码是令人厌烦的-有没有办法在我的电脑上运行它？它在FF中工作，因为他们的视频解码器中有一个bug。直接播放视频请注意，在FF中，它只是一个2次方，缺少视频的左侧和右侧。在Chrome中播放，它会显示整个视频，而不是2次幂。至于在本地运行它，对于视频，我使用node.js。安装node.js nodejs.org，然后实际安装http服务器，而不是bug，它应该说是不同的。FF只解码视频的一部分显然不是一个bug。但是WebGL示例仍然很糟糕，因为它只适用于power-of-2视频。我修复了mdn wiki。希望有人能修复真正的示例代码。上面的示例中有更多的NPOT问题。更改：gl.texParameterigl.TEXTURE\u 2D、gl.TEXTURE\u MIN\u过滤器、gl.LINEAR到：gl.texParameterigl.TEXTURE\u 2D、gl.TEXTURE\u MIN\u过滤器、gl.NEAREST和：gl.texParameterigl.TEXTURE\u 2D、gl.TEXTURE\u MIN\u过滤器、gl.LINEAR到gl.texParameterig.TEXTURE\u 2D、gl.TEXTURE\u MIN\u过滤器、gl.NEAREST