Pixi’VNVideo (`VideoSprite`)
Come mostrare, aggiungere, controllare e gestire risorse video sul canvas usando il componente `VideoSprite` (`play`, `pause`, `loop`, `restart` e i helper del ciclo di vita `showVideo` / `addVideo`).
Il componente VideoSprite estende il componente ImageSprite, quindi è possibile utilizzare tutti i metodi e le proprietà di ImageSprite. Viene utilizzato per visualizzare un singolo video sul 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);Rispetto al componente ImageSprite, VideoSprite aggiunge le seguenti funzionalità:
loop: Indica se il video deve ripetersi al termine.paused: Indica se il video è in pausa.pause: Metodo per mettere in pausa il video.play: Metodo per riprodurre il video.currentTime: La posizione di riproduzione corrente del video.restart: Metodo per riavviare il video dall'inizio.
Mostrare
Il modo più semplice per mostrare un video sul canvas è usare la funzione showVideo. Questa funzione combina load e 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,
});
},
]);Aggiungere
Per aggiungere un video al canvas, usare la funzione addVideo. Questa funzione aggiunge soltanto il componente al canvas; non lo visualizza né carica la sua texture. Utilizza canvas.add per aggiungere il componente al 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());
},
]);Rimuovere
Come per gli altri componenti del canvas, puoi rimuovere questo componente usando la funzione canvas.remove.
Riproduzione e pausa
Usare 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
}
},
]);Loop
Impostare la proprietà loop per far ripetere il video.
import { newLabel, showVideo } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
let video = await showVideo("video");
video.loop = true;
},
]);Riavviare
Usare il metodo restart per riavviare la riproduzione dall'inizio.
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();
}
},
]);