Video

  1. 首页
  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返回视频是否已结束
isVideobooleantrue返回显示对象是否具有 Video 功能（只读）

方法

方法返回值说明
play()Promise<void>播放视频文件
pause()void暂停视频播放
seek(offset: number)void跳转到最接近指定位置的关键帧

使用示例

基本视频播放

const { Video } = next2d.media;

// 创建 Video 对象（指定宽度、高度）
const video = new Video(640, 360);

// 设置视频源（设置后自动开始加载）
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取决于浏览器

相关