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