L oop и автозапуск видео с Pixi. js 5.2.1 - PullRequest
Новая
       21

L oop и автозапуск видео с Pixi. js 5.2.1

0 голосов
/ 27 марта 2020

Я пытаюсь реализовать автозапуск и l oop на видео (см. Код ниже) с Pixi. js@5.2.1 - Мой вопрос: bg.baseTexture.source.l oop = true; - возвращает неперехваченную ошибку TypeError - пока метод autoplay работает, но по какой-то причине метод baseTexture.source.l oop - нет. Спасибо за проверку этой проблемы. Изменилась ли самая последняя версия Pixi. js как - baseTexture.source.l oop называется? Ваши комментарии и помощь приветствуются!

Вот мой код: 

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

1 Ответ

0 голосов
/ 27 марта 2020

baseTexture.resource.source.loop ответ - https://github.com/pixijs/pixi.js/issues/6501 -

Реализовано автозапуск и видео l oop: 

    createBackgrounds() {

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

            // const bg = PIXI.AnimatedSprite.from(`../assets/video/${video}.mp4`);
            // bg.baseTexture.resource.source.loop = true;
            // // Set image anchor to the center of the image
            // bg.anchor.x = 0.5;
            // bg.anchor.y = 0.5; 

            // bg.loop = true;

            // this.imgContainer.addChild(bg);
            // this.bgSpriteArray.push(bg);

            // // IMAGE
            // bg.alpha = this.bgSpriteArray.length === 1 ? 1 : 0;

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

            // https://github.com/pixijs/pixi.js/issues/6501 - SOLVED!!
            bg.baseTexture.resource.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;

        });

    }```
...