Pixi’VN视频 (`VideoSprite`)
如何使用 `VideoSprite` 组件在画布上显示、添加、控制和管理视频资源（`play`、`pause`、`loop`、`restart`，以及生命周期辅助函数 `showVideo` / `addVideo`）。
VideoSprite 组件继承自 ImageSprite 组件，因此您可以使用 ImageSprite 的所有方法和属性。 它用于在画布上显示单个视频。
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：从头重新播放视频的方法。
显示
在画布上显示视频最简单的方式是使用 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,
});
},
]);添加
要将视频添加到画布，请使用 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();
}
},
]);