Three.js技术求助：VideoTexture无法播放的原因及解决方案

我需要一个可运行的简易Three.js VideoTexture示例，优先使用HTTP开头的视频链接，但现有示例基本都不满足，想知道这是什么原因。

我基于Three.js纹理示例修改了代码并发布在Codepen上，修改后预期能看到视频播放，但实际无任何反应，也没有报错。

代码展示 #

HTML代码 #

<canvas id="c"></canvas>
<script src="https://r105.threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>
<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
    <source src="https://www.shadertoy.com/media/a/c3a071ecf273428bc72fc72b2dd972671de8da420a2d4f917b75d20e1c24b34c.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

JavaScript代码 #

// Three.js - Textured Cube
// from https://r105.threejsfundamentals.org/threejs/threejs-textured-cube.html

"use strict";

/* global THREE */

function main() 
{
    const canvas = document.querySelector("#c");
    const renderer = new THREE.WebGLRenderer({ canvas });

    const fov = 75; 
    const aspect = 2; // the canvas default
    const near = 0.1;
    const far = 5;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 2;

    const scene = new THREE.Scene();
    const geometry = new THREE.BoxGeometry(1, 1, 1);

    const cubes = []; // just an array we can use to rotate the cubes
    const loader = new THREE.TextureLoader();
    
    var material = null;

    if (false)
    {   
        material = new THREE.MeshBasicMaterial({ 
                map: loader.load("https://r105.threejsfundamentals.org/threejs/resources/images/wall.jpg")}
        );
    }
    
    else // video
    {
        let video = document.getElementById( 'video' );
        console.log(video);
        
        video.load();
        video.play();
        
        var videotex = new THREE.VideoTexture( video );
        videotex.minFilter = THREE.LinearFilter;
        videotex.magFilter = THREE.LinearFilter;
        videotex.format = THREE.RGBFormat;
        
        material = new THREE.MeshBasicMaterial({ map: videotex } );
    }   
    
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    cubes.push(cube); // add to our list of cubes to rotate

    function resizeRendererToDisplaySize(renderer) {
        const canvas = renderer.domElement;
        const width = canvas.clientWidth;
        const height = canvas.clientHeight;
        const needResize = canvas.width !== width || canvas.height !== height;
        if (needResize) {
            renderer.setSize(width, height, false);
        }
        return needResize;
    }

    function render(time) {
        time *= 0.001;

        if (resizeRendererToDisplaySize(renderer)) {
            const canvas = renderer.domElement;
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
        }

        cubes.forEach((cube, ndx) => {
            const speed = 0.2 + ndx * 0.1;
            const rot = time * speed;
            cube.rotation.x = rot;
            cube.rotation.y = rot;
        });

        renderer.render(scene, camera);

        requestAnimationFrame(render);
    }

    requestAnimationFrame(render);
}

main();

控制台打印内容 #

<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
    <source src="https://www.shadertoy.com/media/a/c3a071ecf273428bc72fc72b2dd972671de8da420a2d4f917b75d20e1c24b34c.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;">

后续排查发现 #

• VideoTexture在Codepen中无法工作，以下代码在本地可运行但在Codepen中失效：

  video = document.createElement('video');                    
  
  video.crossOrigin = "anonymous";
  video.playsinline = "true";
  video.loop = 'true';
  
  let source = document.createElement('source');      
  source.src = "https://vjs.zencdn.net/v/oceans.mp4";                     
  source.type = 'video/mp4';                      
  video.appendChild(source);      
  

• 目前找到的唯一可在本地正常播放（音视频均加载）的HTTP开头视频链接如上，但该示例未使用VideoTexture；
• 移除video.crossOrigin = "anonymous";后，HTTP开头的视频可播放（能听到声音），怀疑问题与跨域设置有关。

恳请帮忙分析原因并提供解决方案。

内容的提问来源于stack exchange，提问作者21k