有没有办法使用 Three.js LoadingManager 加载视频？

Question

我使用 THREE.LoadingManager 与多个加载器，在显示我的应用程序之前管理纹理、模型、图像和立方体纹理的加载。
这允许我显示一个显示全局加载进度的加载栏，并且它工作得很好：

const loadingManager = new LoadingManager();
// ...
smaaImageLoader = new SMAAImageLoader(loadingManager);
textureLoader = new TextureLoader(loadingManager);
gltfLoader = new GLTFLoader(loadingManager);
cubeTextureLoader = new CubeTextureLoader(loadingManager);

但我很难以这种方式加载视频。我希望有一个视频加载器，我可以这样使用：

videoLoader = new VideoLoader(loadingManager); // Can't do that

如果加载视频的唯一方法是在 javascript 中“手动”执行，有什么方法可以与 loadingManager 沟通视频正在挂起，然后加载？

谢谢

Answer 1

有没有办法使用 Three.js LoadingManager 加载视频？

不，这是不可能的。但是，您可以这样做：

const video = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'video' );
video.addEventListener( 'loadedmetadata', onVideoLoad, false );

video.src = url;
video.preload = "auto";

video.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );
video.setAttribute( 'playsinline', '' );

manager.itemStart( url ); // notifying about start of loading process

function onVideoLoad() {

    video.removeEventListener( 'loadedmetadata', onVideoLoad, false );
    manager.itemEnd( url ); // notifying about end of loading process

}

由于多种原因，实现加载器是有问题的：

• 与图像相比，某些格式（例如 OGG）并非所有浏览器都支持。通过 HTML 定义多个源比使用具有潜在VideoLoader. 这需要在从后端加载视频之前进行功能检查。
• 视频元素的属性和配置设置可能因用例而异，例如（静音、循环等）。在这种情况下，图像更加简单。因此，在视频加载器中执行此操作是有问题的。
• 项目可能更喜欢类似canplay或canplaythrough的事件loadedmetadata。在大多数情况下，不建议下载完整视频。