Jump to content

pixiJs using source Media for two videoObject


abbas jafari
 Share

Recommended Posts

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 by abbas jafari
Link to comment
Share on other sites

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 by jonforum
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by jonforum
Link to comment
Share on other sites

yes of course.
this my class:

Quote
import {TextureBaseTexturefrom 'pixi.js-legacy';
import { settings } from '@pixi/settings';
import { getResolutionOfUrl } from '@pixi/utils';
 
export default class VideoTexture extends Texture{
    constructor(){
        super();
    }
 
    static from(sourceoptions = {}, strict = settings.STRICT_TEXTURE_CACHE)
    {
        if (!options.resolution)
        {
            options.resolution = getResolutionOfUrl(source);
        }
 
        let texture = new Texture(new BaseTexture(sourceoptions));
 
        return texture;
    }
}

 

Edited by abbas jafari
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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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