Play video in PIXI v5

[Nagaraju]

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.

[jonforum]

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

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

Edited December 5, 2019 by jonforum

[ivan.popelyshev]

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.

[Nagaraju]

Thanks. It is working great.

Start Video

this.videoTexture.baseTexture.resource.source.play();

 

Pause Video

this.videoTexture.baseTexture.resource.source.pause();

[Nagaraju]

Is there any possibility to show video thumbnail image?

[jonforum]

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 December 9, 2019 by jonforum

[dazzafact]

For PixiJs Version >=6:

let videoResource = new PIXI.resources.VideoResource('video.mp4',{autoPlay: false,updateFPS:25});

let videoTexture = PIXI.Texture.from(videoResource);

$sl = new PIXI.Sprite(videoTexture);
const videoControler = $sl.texture.baseTexture.resource;
videoControler.source.currentTime=11
videoControler.source.pause()
$app.stage.addChild($sl);