Is it possible to use the Three.js LoadingManager to load videos?

I am currently using THREE.LoadingManager in conjunction with various loaders to efficiently handle the loading of textures, models, images, and cubeTextures before my app is displayed. This setup enables me to present a loading bar that shows the overall progress of the loading process, and it functions perfectly:

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

However, I am facing challenges when it comes to loading videos in the same manner. I would like to have a video loader that can be integrated into this system seamlessly:

videoLoader = new VideoLoader(loadingManager); // Unfortunately, this cannot be done

If loading videos manually through JavaScript is the only option, is there a way for me to alert the loadingManager when videos are waiting to be loaded and when they have been successfully loaded?

Thank you

javascriptthree.jshtml5-video

Answer №1

Is it possible to use Three.js LoadingManager to load videos?

No, loading videos directly with Three.js LoadingManager is not possible. However, you can achieve this by creating a video element and handling the loading process manually:

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

}

However, implementing a video loader can present challenges due to various reasons:

  • Some browsers do not support certain video formats like OGG. Using multiple sources in HTML may be more flexible than using fixed URLs with a potential VideoLoader. This may require checking browser capabilities before loading the video.
  • The attributes and settings of video elements can vary depending on the use case (e.g., muted, looped). Compare to images, handling these variations within a video loader can be complex.
  • Projects may prefer events like canplay or canplaythrough over loadedmetadata. Downloading the entire video upfront is usually not recommended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can You Rotate a Sprite in Three.js?

Query: Can a Three.js sprite's texture be flipped or mirrored? Context: Experimenting with the latest DEV version of three.js Current Progress: Initially attempted to adjust its 3D rotation without success. Upon reviewing the sprites code, noticed t ...

three.js

Guide on decrypting a file encrypted with C# using Node JS

I currently have encrypted files in C# using DES and PKCS7 encryption. My objective is to decrypt these files in Node JS. The decryption code in C# that I am using appears like this: public string SSFile_Reader( string fileToDecrypt ) { DESCryptoService ...

javascriptnode.jsencryptioncryptographycryptojs

I'm curious if there is a method in Vue.js that allows for creating a separator while utilizing v-for, much like the way `Array.join()` or FreeMarker's `<#sep>` functions operate

My goal is to create a list of <span> elements separated by commas using vue.js and v-for. Is there an easy way to achieve this in vue.js? In JavaScript, I would typically use users.join(", "). In FreeMarker templates, you can do some very interes ...

javascriptvue.jsfreemarkerv-for

Are you looking for seamless textures that tile perfectly?

Can we define specific rectangular areas of a texture to repeat on individual triangles or quads? If not, I believe I have an idea on how to create the shader from the ground up. However, is it feasible to incorporate the uniforms, attributes, and GLSL co ...

three.js

Implementing fullCalendar's addEventSource function with the color customization feature

One feature of my application involves dynamically adding events to the calendar. function AddEventSourceDetailed(act_id) { $('#calendar').fullCalendar('addEventSource', function (start, end, callback) { var startTime = Mat ...

javascriptjquerycalendarfullcalendar

How can I trigger a mousedown event on mobile devices without using jQuery?

Can I implement a straightforward mousedown/mouseup event in an Angular-based mobile app? While utilizing ngTouch for swiping, I've noticed it lacks support for a 'while-pressed' event. I've found that ngMousedown is ineffective on to ...

javascriptjqueryangularjstouch

The Full Screen Button on Google Maps isn't functioning properly in a third-party mapping application

Below you will see the '+' icon which is also supposed to function as the full screen button. https://i.stack.imgur.com/IMvHa.png However, when clicked on, it does not expand to full screen as intended. I have attempted using some basic jQuery ...

javascriptjquerygoogle-mapsfullscreen

Find the sum of values in an array of objects if they are identical

[{ingName: "milk", quantity: "1.5", unit: "cups"}, {ingName: "sugar", quantity: "0.25", unit: "cups"}, {ingName: "vanilla extract", quantity: "1.0", unit: "tsp&quo ...

javascriptarraysreactjs

The attempt to compress the code in the file from './node_modules/num2persian' using num2persian was unsuccessful

I have been using the num2persian library to convert numbers into Persian characters. However, whenever I run the command npm run build, I encounter the following error: An error occurred while trying to minimize the code in this file: ./node_modules/num ...

javascriptreactjsnpm

Child component in Angular fails to detect input changes

Hey there! I'm currently utilizing parent-child communication in my Angular project. In the parent component, I have an array that represents graph data. If you'd like to check out a demo of what I'm working on, feel free to click here. The ...

javascriptangularhighcharts

What methods can be used to ensure the document in mongoose is not deleted by updating the expires property on the createdAt field?

I have implemented account verification in this app and created a user account that is set to delete itself after 30 seconds if not verified. createdAt: { type: Date, default: Date.now, index: { expires: 30, }, }, However, I am now searching f ...

javascriptnode.jsmongodbexpressmongoose

The styling of MUI components adapts when the Navigate component in React Router is initialized

Incorporating React Router into my application has led to an unexpected side-effect while implementing the <Navigate to="/"> component (which goes to <AthleteHomepage />) upon state change. Currently, I haven't set up dynamic sta ...

javascriptreactjsmaterial-uireact-router

Comparing Two Arrays in AngularJS and Disabling on Identical Cases

I currently have two tables: "Available subject" and "Added subject" which are populated by ng-repeat with two separate lists of objects. My objective is to accomplish three things: 1 - When the user clicks on the plus sign, a row with identical content s ...

javascriptangularjsarrays

Strategies for optimizing progressive enhancement

Designing a website that is accessible to everyone is truly an art form, and Progressive Enhancement is something I hold dear... I am curious to hear about the best techniques you have used to ensure websites work for all users, regardless of their browse ...

javascripthtmlprogressive-enhancement

Display a dialog box in jQuery UI 1.7 autocomplete when an item is selected

After implementing an autocomplete widget, I noticed that a dialog appears when an item is selected. However, I am struggling to get a specific field in the dialog to receive focus upon opening. Here is what I have attempted so far: //HTML <form actio ...

javascriptjqueryhtmljquery-ui

Deactivate Firestore listener in useEffect to cease updates

Looking for a solution with useEffect to stop listening to Firebase Firestore collection changes? Data from Firebase can be retrieved successfully, but encountering issues accessing the unsubscribe function. Any ideas on how to resolve this problem? l ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

Is there a way to access the route name (path) in Express Node.js while making a request using the req object?

Within my Node.js Express server, I have implemented a generic middleware where I am trying to retrieve the route name. Here is an example: app.use(function (req, res, next) { //using a specific npm package that allows me to execute functions after send ...

javascriptnode.jsexpressroutes

notify a designated channel when ready for launch

I'm currently attempting to figure out how to send a message to a channel when the Discord bot is launched. I've experimented with this code: client.on('message', (message) => { client.on('ready', () => { channel = cli ...

javascriptnode.jsdiscorddiscord.js

What is the best way to create a JavaScript "input" field that only accepts vowel letters?

Is there a way to create an "input" field that only accepts vowel letters? Additionally, I want to ensure that copying and dragging text into the input field will also be filtered out. <div class="field"> <input class="fie ...

javascripthtmlinputtext

`CSS animation for vanishing line effect`

I want to create an animated logo that gives the illusion of being pulled up by a rope, represented by a vertical black line, from the bottom of the page to the top. As the logo moves upwards, I would like the rope to disappear behind it, but I'm uns ...

javascriptcss