Pixi’VNVideoSprite
Come mostrare, aggiungere, controllare e gestire risorse video sul canvas utilizzando il componente `VideoSprite` (`play`, `pause`, `loop`, `restart` e helper del ciclo di vita come `showVideo` / `addVideo`).
Il componente VideoSprite estende il componente ImageSprite, così puoi utilizzare tutti i metodi e le proprietà di ImageSprite. Viene utilizzato per visualizzare un singolo video sul canvas.
To initialize this component, you must pass the following parameters:
options(Optional): The options for the component.videoUrl(Opzionale): L'URL o il percorso. 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: Indica se il video deve essere riprodotto in loop dopo il termine.paused: Indica se il video è in pausa.pause(): Metti in pausa il video.play(): Avvia il video.currentTime: L'ora corrente del video.restart(): Riavvia il video.
Show
Il modo più semplice per mostrare un video sul canvas è utilizzare la funzione showVideo. This function combines load and canvas.add.
Questa funzione restituisce un VideoSprite che è possibile utilizzare per manipolare il componente. This function has the following parameters:
alias: The alias to identify the component.videoUrl(Opzionale): L'URL o il percorso. 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", [
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,
},
);
},
]);Aggiungere
Per aggiungere un video al canvas, utilizzare la funzione addVideo. 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.
Questa funzione restituisce un VideoSprite che è possibile utilizzare per manipolare il componente. This function has the following parameters:
alias: The alias to identify the component.videoUrl(Opzionale): L'URL o il percorso. 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", [
() => {
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.
Riproduzione e pausa
Utilizzare i metodi play() e pause() oppure impostare la proprietà paused.
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
Imposta la proprietà loop per ripetere il video.
import { newLabel, showVideo } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
let video = await showVideo("video");
video.loop = true;
},
]);Riavvio
Utilizzare il metodo restart() per riavviare la riproduzione.
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();
}
},
]);