LogoPixi’VN

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(); 
        }
    },
]);