Jump to content

Issues with loading video textures


Recommended Posts

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.onComplete.add((e) => {

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. 

Link to comment
Share on other sites


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;




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){


	// render the stage



Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...