Pixi’VNVideoSprite
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 this component, you must pass the following parameters:
options(Optional): The options for the component.videoUrl(Optional): The URL or path. 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 Sprite component, ImageSprite 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
The simplest way to show a video on the canvas is to use the showVideo function. This function combines load and canvas.add.
This function returns a VideoSprite that you can use to manipulate the component. This function has the following parameters:
alias: The alias to identify the component.videoUrl(Optional): The URL or path. 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): The options for the component.
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
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.
This function returns a VideoSprite that you can use to manipulate the component. This function has the following parameters:
alias: The alias to identify the component.videoUrl(Optional): The URL or path. 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): The options for the component.
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
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_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
Set the loop property to make the video repeat.
import { newLabel, showVideo } from "@drincs/pixi-vn";
export const startLabel = newLabel("start_label", [
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_label", [
async () => {
narration.dialogue = "add video";
await showVideo("video");
},
async () => {
narration.dialogue = "restart video";
let video = canvas.find<VideoSprite>("video");
if (video) {
video.restart();
}
},
]);