Pixi’VNВидео (`VideoSprite`)
Как отображать, добавлять, управлять и работать с видеоресурсами на canvas с помощью компонента `VideoSprite` (`play`, `pause`, `loop`, `restart`, а также вспомогательных функций жизненного цикла `showVideo` / `addVideo`).
Компонент VideoSprite расширяет компонент ImageSprite, поэтому вы можете использовать все методы и свойства ImageSprite. Он предназначен для отображения одного видео на 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);По сравнению с компонентом ImageSprite, VideoSprite добавляет следующие возможности:
loop: Указывает, должно ли видео повторяться после завершения.paused: Указывает, поставлено ли видео на паузу.pause: Метод для постановки видео на паузу.play: Метод для воспроизведения видео.currentTime: Текущая позиция воспроизведения видео.restart: Метод для перезапуска видео с начала.
Отображение
Самый простой способ показать видео на canvas — использовать функцию showVideo. Эта функция объединяет load и 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,
});
},
]);Добавление
Чтобы добавить видео на canvas, используйте функцию addVideo. Эта функция только добавляет компонент на холст; она не отображает его и не загружает его текстуру. Для добавления компонента на холст она использует canvas.add.
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());
},
]);Удалить
Как и другие компоненты холста, данный компонент можно удалить с помощью функции canvas.remove.
Воспроизведение и пауза
Используйте методы play и pause или задайте свойство 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, чтобы видео повторялось.
import { newLabel, showVideo } from "@drincs/pixi-vn";
export const startLabel = newLabel("start", [
async () => {
let video = await showVideo("video");
video.loop = true;
},
]);Перезапуск
Используйте метод restart, чтобы перезапустить воспроизведение с начала.
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();
}
},
]);