VideoSprite

The VideoSprite component extends the ImageSprite component, so you can use all the methods and properties of ImageSprite. It is used to display a single video on the canvas.

To initialize the VideoSprite component, you must pass the following parameters:

• options (Optional): It corresponds to the VideoSpriteOptions interface.
• videoUrl (Optional): The URL or path of the video. If you have initialized the asset matrix, you can use the alias of the texture.

import { canvas, VideoSprite } from "@drincs/pixi-vn"

let video = new VideoSprite({
    anchor: { x: 0.5, y: 0.5 },
    x: 100,
    y: 100,
}, 'https://pixijs.com/assets/video.mp4')

await video.load()
canvas.add("my_video", video)

Compared to the ImageSprite component, VideoSprite adds the following features:

• loop: Indicates if the video should loop after it finishes.
• paused: Indicates if the video is paused.
• pause(): Pause the video.
• play(): Play the video.
• currentTime: The current time of the video.
• restart(): Restart the video.

Show a video

The simplest and fastest method to show an video on the canvas is to use the showVideo function. This function is a combination of the load and canvas.add functions.

This function will return a VideoSprite, that you can use to manipulate the video, and it has the following parameters:

• alias: Is a alias for the video.
• videoUrl (Optional): The URL or path of the video. If you have initialized the asset matrix, you can use the alias of the texture. If you don't provide the url, then the alias is used as the url.
• options (Optional): It corresponds to the VideoSpriteOptions interface.

import { newLabel, showVideo } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        let video1 = await showVideo("video"); 
        let video2 = await showVideo("video2", "video", { 
            xAlign: 0.5, 
        }); 
        let video3 = await showVideo("video3", "https://pixijs.com/assets/video.mp4", { 
            xAlign: 1, 
        }); 
    },
]);

Add a video

To add an video to the canvas, you can use the addVideo function. It is important to take into account that this function only adds the component to the canvas but does not show it and does not load its texture. This function use canvas.add to add the video to the canvas.

This function will return a VideoSprite, that you can use to manipulate the video, and it has the following parameters:

• alias: Is a alias for the video.
• videoUrl (Optional): The URL or path of the video. If you have initialized the asset matrix, you can use the alias of the texture. If you don't provide the url, then the alias is used as the url.
• options (Optional): It corresponds to the VideoSpriteOptions interface.

import { addVideo, canvas, VideoSprite, newLabel } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    () => {
        let video1 = addVideo("video"); 
        let video2 = addVideo("video2", "video", { 
            xAlign: 0.5, 
        }); 
        let video3 = addVideo("video3", "https://pixijs.com/assets/video.mp4", { 
            xAlign: 1, 
        }); 
    },
    async () => {
        let video1 = canvas.find<VideoSprite>("video");
        let video2 = canvas.find<VideoSprite>("video2");
        let video3 = canvas.find<VideoSprite>("video3");
        // Load the textures
        video1 && (await video1.load());
        video2 && (await video2.load());
        video3 && (await video3.load());
    },
]);

Remove a video

As for the rest of the canvas components, you can remove an video from the canvas using the canvas.remove function.

Play and pause a video

You can use the play() and pause() methods to play and pause the video, or set the paused property to true or false.

import { canvas, narration, newLabel, showVideo, VideoSprite } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        narration.dialogue = "add video";
        await showVideo("video");
    },
    async () => {
        narration.dialogue = "pause video";
        let video = canvas.find<VideoSprite>("video");
        if (video) {
            video.pause(); 
            // or video.paused = true
        }
    },
    async () => {
        narration.dialogue = "resume video";
        let video = canvas.find<VideoSprite>("video");
        if (video) {
            video.play(); 
            // or video.paused = false
        }
    },
]);

Looping video

You can use the loop property to set the video to loop.

import { newLabel, showVideo } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        let video = await showVideo("video");
        video.loop = true; 
    },
]);

Restart a video

You can use the restart method to restart the video.

import { canvas, narration, newLabel, showVideo, VideoSprite } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        narration.dialogue = "add video";
        await showVideo("video");
    },
    async () => {
        narration.dialogue = "restart video";
        let video = canvas.find<VideoSprite>("video");
        if (video) {
            video.restart(); 
        }
    },
]);