Pixi’VNVideo (`VideoSprite`)
Wie man Video-Assets auf dem Canvas mit der `VideoSprite`-Komponente anzeigt, hinzufügt, steuert und verwaltet (`play`, `pause`, `loop`, `restart` sowie die Lebenszyklus-Hilfsfunktionen `showVideo` / `addVideo`).
Die VideoSprite-Komponente erweitert die ImageSprite-Komponente, sodass Sie alle Methoden und Eigenschaften von ImageSprite verwenden können. Sie dient dazu, ein einzelnes Video auf dem Canvas anzuzeigen.
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);Im Vergleich zur ImageSprite-Komponente fügt VideoSprite folgende Funktionen hinzu:
loop: Gibt an, ob das Video nach dem Ende wiederholt werden soll.paused: Gibt an, ob das Video pausiert ist.pause: Methode zum Pausieren des Videos.play: Methode zum Abspielen des Videos.currentTime: Die aktuelle Wiedergabeposition des Videos.restart: Methode zum Neustarten des Videos von Anfang an.
Anzeigen
Die einfachste Möglichkeit, ein Video auf dem Canvas anzuzeigen, ist die Verwendung der Funktion showVideo. Diese Funktion kombiniert load und 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,
});
},
]);Hinzufügen
Um ein Video zum Canvas hinzuzufügen, verwenden Sie die Funktion addVideo. Diese Funktion fügt die Komponente lediglich zur Leinwand hinzu; sie zeigt sie nicht an und lädt auch keine Textur. Sie nutzt canvas.add, um die Komponente zur Leinwand hinzuzufügen.
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());
},
]);Entfernen
Wie bei anderen Leinwand-Komponenten kann diese Komponente mit der Funktion canvas.remove entfernt werden.
Abspielen und Pausieren
Verwenden Sie die Methoden play und pause, oder setzen Sie die Eigenschaft 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
}
},
]);Wiederholen
Setzen Sie die Eigenschaft loop, um das Video in einer Schleife abzuspielen.
import { newLabel, showVideo } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
let video = await showVideo("video");
video.loop = true;
},
]);Neustart
Verwenden Sie die Methode restart, um die Wiedergabe von Anfang an neu zu starten.
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();
}
},
]);