Video

  1. Home
  2. Player
  3. Video

Video

Videoは、動画コンテンツを再生するためのDisplayObjectです。WebM、MP4などの動画フォーマットに対応しています。

継承関係

classDiagram
    DisplayObject <|-- Video

    class Video {
        +src: string
        +videoWidth: number
        +videoHeight: number
        +duration: number
        +currentTime: number
        +volume: number
        +loop: boolean
        +autoPlay: boolean
        +smoothing: boolean
        +paused: boolean
        +muted: boolean
        +loaded: boolean
        +ended: boolean
        +isVideo: boolean
        +play() Promise~void~
        +pause() void
        +seek(offset) void
    }

プロパティ

プロパティ型デフォルト説明
srcstring""ビデオコンテンツへのURLを指定します
videoWidthnumber0ビデオの幅をピクセル単位で指定する整数です
videoHeightnumber0ビデオの高さをピクセル単位で指定する整数です
durationnumber0キーフレーム総数（動画の長さ）
currentTimenumber0現在のキーフレーム（再生位置）
volumenumber1ボリュームです。範囲は 0（無音）～ 1（フルボリューム）です
loopbooleanfalseビデオをループ再生するかどうかを指定します
autoPlaybooleantrueビデオの自動再生の設定
smoothingbooleantrueビデオを拡大/縮小する際にスムージング（補間）するかどうかを指定します
pausedbooleantrueビデオが一時停止しているかどうかを返します
mutedbooleanfalseビデオがミュートされているかどうかを返します
loadedbooleanfalseビデオが読み込まれているかどうかを返します
endedbooleanfalseビデオが終了したかどうかを返します
isVideobooleantrueVideoの機能を所持しているかを返却（読み取り専用）

メソッド

メソッド戻り値説明
play()Promise<void>ビデオファイルを再生します
pause()voidビデオの再生を一時停止します
seek(offset: number)void指定された位置に最も近いキーフレームをシークします

使用例

基本的な動画再生

const { Video } = next2d.media;

// Videoオブジェクトを作成（幅、高さを指定）
const video = new Video(640, 360);

// 動画のURLを設定（設定すると自動的に読み込み開始）
video.src = "video.mp4";

// プロパティ設定
video.autoPlay = true;   // 自動再生
video.loop = false;      // ループしない
video.smoothing = true;  // スムージング有効

// ステージに追加
stage.addChild(video);

再生コントロール

const { Video } = next2d.media;
const { PointerEvent } = next2d.events;

const video = new Video(640, 360);
video.autoPlay = false;  // 自動再生を無効化
video.src = "video.mp4";

stage.addChild(video);

// 再生ボタン
playButton.addEventListener(PointerEvent.POINTER_DOWN, async () => {
    await video.play();
});

// 一時停止ボタン
pauseButton.addEventListener(PointerEvent.POINTER_DOWN, () => {
    video.pause();
});

// 停止ボタン（先頭に戻って停止）
stopButton.addEventListener(PointerEvent.POINTER_DOWN, () => {
    video.pause();
    video.seek(0);
});

// 10秒進む
forwardButton.addEventListener(PointerEvent.POINTER_DOWN, () => {
    video.seek(video.currentTime + 10);
});

// 10秒戻る
backButton.addEventListener(PointerEvent.POINTER_DOWN, () => {
    video.seek(Math.max(0, video.currentTime - 10));
});

イベントリスニング

const { Video } = next2d.media;
const { VideoEvent } = next2d.events;

const video = new Video(640, 360);

// 再生イベント
video.addEventListener(VideoEvent.PLAY, () => {
    console.log("再生リクエスト");
});

// 再生開始イベント
video.addEventListener(VideoEvent.PLAYING, () => {
    console.log("再生開始");
});

// 一時停止イベント
video.addEventListener(VideoEvent.PAUSE, () => {
    console.log("一時停止");
});

// シークイベント
video.addEventListener(VideoEvent.SEEK, () => {
    console.log("シーク:", video.currentTime);
});

video.src = "video.mp4";
stage.addChild(video);

再生進捗の表示

const { Video } = next2d.media;

const video = new Video(640, 360);
video.src = "video.mp4";
stage.addChild(video);

// フレームごとに進捗を更新
stage.addEventListener("enterFrame", () => {
    if (video.duration > 0) {
        const progress = video.currentTime / video.duration;
        progressBar.scaleX = progress;
        timeLabel.text = formatTime(video.currentTime) + " / " + formatTime(video.duration);
    }
});

function formatTime(seconds) {
    const min = Math.floor(seconds / 60);
    const sec = Math.floor(seconds % 60);
    return `${min}:${sec.toString().padStart(2, '0')}`;
}

音量コントロール

const { Video } = next2d.media;

const video = new Video(640, 360);
video.src = "video.mp4";
video.volume = 0.5;  // 50%

stage.addChild(video);

// ミュートトグル
muteButton.addEventListener(PointerEvent.POINTER_DOWN, () => {
    video.muted = !video.muted;
});

ループ再生

const { Video } = next2d.media;

const video = new Video(640, 360);
video.loop = true;  // ループ有効
video.src = "video.mp4";

stage.addChild(video);

VideoEvent

イベント説明
VideoEvent.PLAY再生がリクエストされた時
VideoEvent.PLAYING再生が開始された時
VideoEvent.PAUSE一時停止時
VideoEvent.SEEKシーク時

サポートフォーマット

フォーマット拡張子対応状況
MP4 (H.264).mp4推奨
WebM (VP8/VP9).webm対応
Ogg Theora.ogvブラウザ依存

関連項目