有没有办法使用 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

Is there a way to load videos using 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 的固定 URL 更灵活。这将需要在从后端加载视频之前进行功能检查。
视频元素的属性和配置设置可能因用例而异，例如（静音、循环等）。在这种情况下，图像更简单。因此，在视频加载器中执行此操作是有问题的。
项目可能更喜欢 canplay 或 canplaythrough 之类的事件而不是 loadedmetadata。大多数情况下不建议下载完整视频。

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

Is there a way to load videos using Three.js LoadingManager?

javascript

html5-video

three.js