Pixi’VNVidéo (`VideoSprite`)
Comment afficher, ajouter, contrôler et gérer des ressources vidéo sur le canevas à l'aide du composant `VideoSprite` (`play`, `pause`, `loop`, `restart`, et les helpers de cycle de vie `showVideo` / `addVideo`).
Le composant VideoSprite étend le composant ImageSprite, vous pouvez donc utiliser toutes les méthodes et propriétés de ImageSprite. Il est utilisé pour afficher une seule vidéo sur le canevas.
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);Par rapport au composant ImageSprite, VideoSprite ajoute les fonctionnalités suivantes :
loop: Indique si la vidéo doit boucler après sa fin.paused: Indique si la vidéo est en pause.pause: Méthode pour mettre la vidéo en pause.play: Méthode pour lire la vidéo.currentTime: La position de lecture actuelle de la vidéo.restart: Méthode pour redémarrer la vidéo depuis le début.
Afficher
La façon la plus simple d'afficher une vidéo sur le canevas est d'utiliser la fonction showVideo. Cette fonction combine load et 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,
});
},
]);Ajouter
Pour ajouter une vidéo au canevas, utilisez la fonction addVideo. Cette fonction se contente d'ajouter le composant au canvas ; elle ne l'affiche pas et ne charge pas sa texture. Elle utilise canvas.add pour ajouter le composant au 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());
},
]);Supprimer
Comme pour les autres composants du canvas, vous pouvez supprimer ce composant en utilisant la fonction canvas.remove.
Lecture et pause
Utilisez les méthodes play et pause, ou définissez la propriété 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
}
},
]);Boucle
Définissez la propriété loop pour faire répéter la vidéo.
import { newLabel, showVideo } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
let video = await showVideo("video");
video.loop = true;
},
]);Redémarrer
Utilisez la méthode restart pour relancer la lecture depuis le début.
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();
}
},
]);