Loop and Autoplay Video with Pixi.js 5.2.1

[Plunky33]

Hello! I am trying to implement autoplay and loop on a video (see code below) with Pixi.js@5.2.1 - My question is: bg.baseTexture.source.loop = true; - returns an uncaught TypeError - while the autoplay method works but for some reason the baseTexture.source.loop method does not. Thank you for checking this issue out. Has the most recent version of Pixi.js changed how - baseTexture.source.loop is called? Your comments and help are appreciated!

Here's my code:

createBackgrounds() {

    this.bgArray.map((video) => {

        // create a video texture from a path
        const bg = PIXI.Texture.from(`../assets/video/${video}.mp4`);

        //assigning the texture to baseTexture.source.loop to loop video - and returns uncaught TypeError??
        bg.baseTexture.source.loop = true;

        const videoSprite = new PIXI.Sprite(bg);

        videoSprite.anchor.x = 0.5;
        videoSprite.anchor.y = 0.5;  

        // preload and autoplay video
        videoSprite.preload = 'auto';
        this.autoPlay = videoSprite.autoplay;

        this.imgContainer.addChild(videoSprite);
        this.bgSpriteArray.push(videoSprite);


        // IMAGE
        videoSprite.alpha = this.bgSpriteArray.length === 1 ? 1 : 0;
    });
}```

Uncaught TypeError: Cannot set property 'loop' of undefined
    at jello.js:199
    at Array.map (<anonymous>)
    at Jello.createBackgrounds (jello.js:194) 

Reference: does the fact that source was deprecated have anything to do with the TypeError?
<img width="1407" alt="Screen Shot 2020-03-26 at 7 47 42 PM" src="https://user-images.githubusercontent.com/57849114/77716141-b2955800-6f9a-11ea-9d4a-f920511bd86e.png">

[eXponenta]

from is async, there are not guarantee that source was assigned after call.
Then there are not source field in Pixi v5, in v5 this is resource of class:
https://pixijs.download/dev/docs/PIXI.resources.VideoResource.html

[ivanpopelyshev]

baseTexture.resource.source.loop.

from detects resource that can process videos - VideoResource, https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/VideoResource.ts

and creates BaseTexture based on it.

VideoResource creates html5 video element , it starts playing video asynchonously.

Tip: next time you see a null pointer (Type Error) - just look in object in debug, it might have something like that field but under different name ;)

[ivanpopelyshev]

Thank you, added it here: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide#basetexturesource

[bigtimebuddy]

@Plunky33 does that fix your issue?

[Plunky33]

Good stuff!! Great information! Thank you for your answers. Issue has been fixed and I have implemented autoplay and video loop. Thanks guys!

[bigtimebuddy]

Awesome, closing.