Media slideshow

[Vizions]

Hello all,

Does anybody know if it is possible to detect when a video that is loaded has completed? Or even some basic detection and control (onComplete, onStart, play, stop). I am trying to create a media slideshow that supports images and mp4's. I have built a similar slideshow in the past with Timeline Max but it appears that there is no support for videos in the JS version. This is what I have so far (Just a quick prototype to build on).

 

let renderer;
let stage =  new PIXI.Container();
let button;
const loader = PIXI.loader;

renderer = new PIXI.CanvasRenderer(1024, 768);
document.body.appendChild(renderer.view);

load();


function load()
{
    loader.add('box', 'assets/yellowBox.png')
        .add('movie', 'assets/testVideo.mp4')
            .load((loader, resource) =>
            {
                onAssetsLoaded(resource);

            })


}


function onAssetsLoaded(resource)
{
    console.log('loaded');

    // Video stuff
    let videoData = resource['movie'].data;

    let videoBaseTexture = PIXI.VideoBaseTexture.fromVideo(videoData);

    let videoSprite = PIXI.Sprite.from(videoBaseTexture);
    stage.addChild(videoSprite);
}

 

 

[ivan.popelyshev]

In this case, pixi just uses <video> element inside VideoBaseTexture. Same as HTML5 video. There are no extra features.

[Vizions]

Thanks @ivan.popelyshev. Do you know of any libraries that might make this possible?

[jonforum]

on my side ,if you load a video in loader , you have  in ressource a getter named `

res.isVideo

`

you can use onclomplete from loader

loader.onComplete.add((loader, res) => {

    res.myvideoname; //your video data

});

or use somewhere after in your scene if is a game !.

const videoSprite = new PIXI.Sprite( PIXI.Texture.fromVideo( $yourLoader.yourDataCache.yourvideoObj.data ) );

const videoControler = videoSprite.texture.baseTexture.source;