pixiJs using source Media for two videoObject

[abbas jafari]

hey.
I'm new in Pixi.js and all Js ?
I want create two Sprite Video from one src video.

its create successfuly but when seek on video1 . changing video2 current time.
for example:

 

Quote

let textureVideo1 = new PIXI.Texture.from("video.mp4");

let textureVideo2 = new PIXI.Texture.from("video.mp4");

let video1 = new PIXI.Sprite(textureVideo1);

let video2 = new PIXI.Sprite(textureVideo2);

video1.texture.baseTexture.resource.source.currentTime = 20;

console.log(video2.texture.baseTexture.resource.source.currentTime) // return 20. 

 

but i not want this happen.
im try with Texture.fromVideo() but have this problem...

sory my english bad ?

 

Edited December 15, 2019 by abbas jafari

[jonforum]

hey friend,, try this, it should work if am not wrong.

    const textures0 = PIXI.Texture.from('.../video.mp4');
    const textures1 = PIXI.Texture.from('.../video.mp4');
    const videoSprite0 = new PIXI.Sprite( textures0 );
    const videoSprite1 = new PIXI.Sprite( textures1 );

    const videoControler0 = videoSprite0.texture.baseTexture.source;
    const videoControler1 = videoSprite1.texture.baseTexture.source;

    videoControler0.currentTime = 2;
    videoControler1.currentTime = 11; 

console.log(videoControler0.currentTime); // should show 2
console.log(videoControler1.currentTime); // should show 11

 

EDIT: oups., hum no,  it maybe because you get same name register in the loader from baseTexture.source.
you will need hack 

 

videoControler are not inside sprite but from baseTexture, and i think it crush same register name, but not tested, you can confirm.

Edited December 15, 2019 by jonforum

[abbas jafari]

thanks for reply @jonforum 

I test your code. but my problem not solved. 
I test this code: 

Quote

const app = new PIXI.Application({
    width: 800, height: 600, backgroundColor: 0x1099bb, resolution: window.devicePixelRatio || 1,
});
document.body.appendChild(app.view);

const textures = PIXI.Texture.from('https://hw18.cdn.asset.aparat.com/aparat-video/72457a8461afbccc119004eb770a057f18217641-144p__92972.mp4');
const videoSprite0 = new PIXI.Sprite( textures );
const videoSprite1 = new PIXI.Sprite( textures );

const videoControler0 = videoSprite0.texture.baseTexture.source;
const videoControler1 = videoSprite1.texture.baseTexture.source;

app.stage.addChild(videoSprite0);
app.stage.addChild(videoSprite1);

videoControler0.currentTime = 20;

//videoSprite0 go to time 20

//videoSprite1 also go to time 20;
 

 

yes Im control my video By:
videoSprite0.texture.baseTexture.source

but in new Version PIXI must use:

videoSprite0.texture.baseTexture.resource.source

[jonforum]

11 minutes ago, abbas jafari said:

thanks for reply @jonforum 

I test your code. but my problem not solved. 
I test this code: 

 

yes Im control my video By:
videoSprite0.texture.baseTexture.source

but in new Version PIXI must use:

videoSprite0.texture.baseTexture.resource.source

yes i think you will need to add a hack from a custom loader with video and duplicate the source.
it maybe related to the web api and not pixi but am not sure.
i understand your target logic.
Wait confirmation but it interesting.

maybe it not will not possible without duplicate the source in loader.

 

Edited December 15, 2019 by jonforum

[abbas jafari]

thanksss @jonforum

I create new Class TextureVideo extends Texture

and overwrite "from" method. and say it un save in cache. 

its workkeedd ?

[jonforum]

if you can show your code for help other people search same thing, you're awesome:

Edited December 15, 2019 by jonforum

[abbas jafari]

yes of course.
this my class:

Quote

import {Texture, BaseTexture} from 'pixi.js-legacy';

import { settings } from '@pixi/settings';

import { getResolutionOfUrl } from '@pixi/utils';

 

export default class VideoTexture extends Texture{

    constructor(){

        super();

    }

 

    static from(source, options = {}, strict = settings.STRICT_TEXTURE_CACHE)

    {

        if (!options.resolution)

        {

            options.resolution = getResolutionOfUrl(source);

        }

 

        let texture = new Texture(new BaseTexture(source, options));

 

        return texture;

    }

}

 

Edited December 15, 2019 by abbas jafari