VideoSprite
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.
Per inizializzare questo componente, è necessario passare i seguenti parametri:
options
(Opzionale): Le opzioni per il componente.videoUrl
(Opzionale): L'URL o il percorso. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della 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)
Rispetto al componente Sprite
, ImageSprite
aggiunge le seguenti funzionalità:
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.
Visualizza
Il modo più semplice per mostrare un video sul canvas è utilizzare la funzione showVideo
. Questa funzione combina load
e canvas.add
.
Questa funzione restituisce un VideoSprite
che è possibile utilizzare per manipolare il componente. Questa funzione ha i seguenti parametri:
alias
: L'alias per identificare il componente.videoUrl
(Opzionale): L'URL o il percorso. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della texture. Se non si specifica l'URL, verrà utilizzato l'alias come URL.options
(Opzionale): Le opzioni per il componente.
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,
});
},
]);
Aggiungi
Per aggiungere un video al canvas, utilizzare la funzione addVideo
. Questa funzione aggiunge solo il componente al canvas; non lo mostra né ne carica la texture. Utilizza canvas.add
per aggiungere il componente al canvas.
Questa funzione restituisce un VideoSprite
che è possibile utilizzare per manipolare il componente. Questa funzione ha i seguenti parametri:
alias
: L'alias per identificare il componente.videoUrl
(Opzionale): L'URL o il percorso. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della texture. Se non si specifica l'URL, verrà utilizzato l'alias come URL.options
(Opzionale): Le opzioni per il componente.
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());
},
]);
Rimuovi
Come con altri componenti canvas, puoi rimuovere questo componente utilizzando la funzione canvas.remove
.
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_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
Imposta la proprietà loop
per ripetere il video.
import { newLabel, showVideo } from "@drincs/pixi-vn";
export const startLabel = newLabel("start_label", [
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_label", [
async () => {
narration.dialogue = "add video";
await showVideo("video");
},
async () => {
narration.dialogue = "restart video";
let video = canvas.find<VideoSprite>("video");
if (video) {
video.restart();
}
},
]);