Question

我正在将THREE.LoadingManager与多个加载程序一起使用，以在显示我的应用程序之前管理纹理，模型，图像和cubeTextures的加载。
这使我可以显示一个显示全局加载进度的加载栏，并且效果很好：

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

有没有一种方法可以使用Three.js LoadingManager加载视频？

1 个答案: