Pixi’VNVideo (`VideoSprite`)
How to show, add, control and manage video assets on the canvas using the `VideoSprite` component (`play`, `pause`, `loop`, `restart`, and lifecycle helpers like `showVideo` / `addVideo`).
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.
import { canvas, VideoSprite } from "@drincs/pixi-vn";
let video = new VideoSprite(
{
anchor: { x: 0.5, y: 0.5 },
x: 100,
y: 100,
},
"film",
);
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: Method to pause the video.play: Method to play the video.currentTime: The current time of the video.restart: Method to restart the video from the beginning.
Show
The simplest way to show a video on the canvas is to use the showVideo function. This function combines load and canvas.add.
import { newLabel, showVideo } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
// Show the videos on the canvas
let video1 = await showVideo("video");
// Show the video with a different alias and position
let video2 = await showVideo("video2", "video", {
xAlign: 0.5,
});
},
]);Add
To add an video to the canvas, use the addVideo function. This function only adds the component to the canvas; it does not show it or load its texture. It uses canvas.add to add the component to the canvas.
import { addVideo, canvas, VideoSprite, newLabel } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
() => {
// Add the videos to the canvas
let video1 = addVideo("video");
// Add the video with a different alias and position
let video2 = addVideo("video2", "video", {
xAlign: 0.5,
});
},
async () => {
let video1 = canvas.find<VideoSprite>("video");
let video2 = canvas.find<VideoSprite>("video2");
// Load the textures
video1 && (await video1.load());
video2 && (await video2.load());
},
]);Remove
As with other canvas components, you can remove this component using the canvas.remove function.
Play and pause
Use play and pause methods, or set the paused property.
import {
canvas,
narration,
newLabel,
showVideo,
VideoSprite,
} from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
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
Set the loop property to make the video repeat.
import { newLabel, showVideo } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
let video = await showVideo("video");
video.loop = true;
},
]);Restart
Use the restart method to restart playback.
import {
canvas,
narration,
newLabel,
showVideo,
VideoSprite,
} from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
narration.dialogue = "add video";
await showVideo("video");
},
async () => {
narration.dialogue = "restart video";
let video = canvas.find<VideoSprite>("video");
if (video) {
video.restart();
}
},
]);