Issues with loading video textures

[hec_lopz]

Hello there!

I'm having issues with pre-loading videos and I don't really understand why. I'm trying to load all the videos that my app uses at the very beginning so everything goes fluid after waiting a few mins on a loading screen, however the videos won't fully load and there are new requests when the video is used in the stage, causing hiccups and sometimes showing a black frame.

I have a function that returns a promise, this promise creates a PIXI.Loader, uses onProgress to update a progress bar and onComplete returns the resources  object. It's pretty much like this:

function loadAssets(assets = {}) {
  return new Promise(resolve, reject) {
    const loader = new PIXI.Loader()
    for (const asset in assets) {
      loader.add(assetName, assetUrl)
    }

    loader.load()
    loader.onComplete.add((e) => {
      resolve(e.resources)
    })
    
  }
}

async function renderAssets() {
  const assets = {name: url, ... }
  const resources = await loadAssets(assets)
  
  const videoResource = new PIXI.VideoResource(resource.data, {autoPlay:false})
  const baseTexture = new BaseTexture(videoResource);
  const texture = new PIXI.Texture(videoResource)
}

I have a sprite using the full width of the screen and switch the texture of that sprite when changing videos.

I'm not sure if this is the right place to ask, sorry if it's not. I hope to explain myself enough.

I bet that I'm not using the loader properly, I have tried to run renderAssets on loader.load(renderAssets), but the result is the same. I am using webpack, btw, but this issue showed up bf adding webpack.

Can you give me a piece of advice on how to tackle the loading of assets? I'm kind of desperate rn. Would really appreciate it. 

[martiniti]

Hello!

In my project I also have a lot of videos that I using as scenes.

For me it is quite enough to use method below.

Hope this help you.

....

scenes.map((scene, index) => {

  videoBgs[index] = PIXI.Texture.from(`some_url`);
  videoSprites[index] = new PIXI.Sprite(videoBgs[index]);
  videoControllers[index] = videoSprites[index]._texture.baseTexture.resource.source;

  app.stage.addChild(videoSprites[index]);

  ....

});

After this I starting rendering and play one each one video using VideoController parameters (duration and current time of the video):

let currentTime = 0;

app.ticker.add(function () {

	currentTime = videoController[i].currentTime;

	if(currentTime >= videoControllers[i].duration){


		videoBgs[i].baseTexture.resource.source.play();

	}
      
	// render the stage
    renderer.render(stage);

});

 

[Olloverr]

Perhaps these problems arise due to the low performance of the laptop. I have faced similar questions, but at the moment I am busy searching for best laptops for streaming. It is clear that having creative and interesting content is important, but the content must also be filmed and broadcast using high-quality equipment in order for the stream to enthrall fans en masse.