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

user_9006591 0
Viewed 331

I'm using THREE.LoadingManager with multiple loaders, to manage the loading of textures, models, images and cubeTextures before displaying my app.
This allows me to display a loading bar showing the global loading progress, and it works just fine:

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

But I'm struggling to load videos this way. I wish there was a video loader that I could use this way:

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

If the only way to load videos is to do it "manually" in javascript, is there any way I could communicate to the loadingManager that videos are pending, then loaded?

Thanks

three.js html5-video javascript
1 Answers

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

No, this is not possible. However, you can do this:

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

}

Implementing a loader is problematic for multiple reasons:

  • Compared to images, certain formats like OGG are not supported by all browsers. Defining multiple sources via HTML is more flexible than using fixed URLs with a potential VideoLoader. That would require a capabilities check before you load the video from the backend.
  • Attributes and config settings of video elements might vary from use case to use case e.g. (muted, looped etc.). Images are more simple in this context. Hence, it's problematic to do this inside a video loader.
  • Projects might prefer events like canplay or canplaythrough over loadedmetadata. Downloading the complete video is not recommended in most cases.
user_52508470
Related