Sign in to follow this  
Nagaraju

Play video in PIXI v5

Recommended Posts

I am using PIXI version 5. In my project, I need to play a video when user hits on preview. I could able to stop auto play but I could not able to start the video on clicking on preview.

I have used below line to off auto play 

 texture.baseTexture.resource.autoPlay = false;

Here is my code

this.appRenderer = new Application({
width: width,
height: height,
});
this.videoTexture = PIXI.Texture.from(video);
this.videoSprite = new PIXI.Sprite(this.videoTexture);
this.addChild(this.videoSprite);
 
there is no play function in texture.baseTexture.resource.source.

Share this post


Link to post
Share on other sites

hi, it should work, but if you can't get suggestion from intellisense !, you can try force the @type.
 

    const texture = PIXI.Texture.from('data2/Video/intro/vidA1.webm');
    const videoSprite = new PIXI.Sprite( texture );
    /**@type {HTMLVideoElement}*/
    const videoControler = videoSprite.texture.baseTexture.source;
    videoControler.play

mXFPHGzG_o.png

Here the full api
https://developer.mozilla.org/fr/docs/Web/API/HTMLMediaElement/play

Edited by jonforum

Share this post


Link to post
Share on other sites

Just in case, here is VideoResource source: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/VideoResource.js

and here's the test function that detects if VideoResource should be spawned: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/VideoResource.js#L357

You can debug it.

Share this post


Link to post
Share on other sites

The best way it to generate one from photoshop.
or you can try this but am not sure if it can work , not tested.
need confirmation

    const texture = PIXI.Texture.from('yourvideo.webm');
    const videoSprite = new PIXI.Sprite( texture );
    const videoControler = videoSprite.texture.baseTexture.source;

    videoControler.pause(); // force pause in case of autoplay
    videoControler.currentTime = 11; // the frame where you want thumbnail.
    const thumbnail = app.renderer.generateTexture(videoSprite); //capture the current frame.

    videoControler.currentTime = 0; // reset video time

 

Edited by jonforum

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.