Pixi’VNVideoSprite
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.
To initialize this component, you must pass the following parameters:
options(Optional): The options for the component.videoUrl(Optional): The URL or path. 자산 매트릭스를 초기화한 경우, 텍스처의 별칭을 사용할 수 있습니다.
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 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 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();
}
},
]);