Cocos引擎VideoPlayer组件深度解析：跨平台视频播放解决方案

2026-03-13 05:18:45作者：裘旻烁

Cocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.

项目地址：https://gitcode.com/GitHub_Trending/co/cocos-engine

在游戏开发中，视频播放功能如同游戏叙事的"视觉语言"，无论是沉浸式的开场动画、推动剧情的过场影片，还是引导用户操作的教学视频，都需要稳定可靠的视频播放能力。Cocos引擎提供的VideoPlayer组件（cocos/video/video-player.ts）为开发者提供了一站式跨平台视频播放解决方案，但不同操作系统的底层差异、性能优化挑战和兼容性问题常常成为开发痛点。本文将从问题诊断、架构原理、实战应用到性能调优，全面剖析VideoPlayer组件的技术细节与最佳实践。

一、视频播放的技术痛点与解决方案

游戏场景中的视频播放面临三大核心挑战：不同平台的底层API差异导致的兼容性问题、视频资源加载与游戏主线程的资源竞争、以及视频元素与游戏UI的层级融合难题。这些问题直接影响用户体验，甚至导致功能失效。

1.1 跨平台兼容性挑战

技术痛点：Web平台依赖HTML5 VideoElement，原生平台使用各自的媒体框架（iOS的AVPlayer、Android的MediaPlayer），导致相同代码在不同平台表现差异显著。例如Web端视频默认在DOM层级渲染，无法被游戏内UI覆盖；而移动端则默认全屏播放，破坏游戏沉浸感。

解决方案：Cocos采用"抽象接口+平台实现"的设计模式，通过VideoPlayerImplManager（cocos/video/video-player-impl-manager.ts）动态分发平台适配逻辑。核心实现如下：

// 平台实现注册与获取逻辑
export class VideoPlayerImplManager {
    private static _implMap: Map<string, IVideoPlayerImplConstructor> = new Map();
    
    // 注册平台实现
    static registerImpl(platform: string, ctor: IVideoPlayerImplConstructor) {
        this._implMap.set(platform, ctor);
    }
    
    // 获取适配当前平台的实现
    static getImpl(videoPlayer: VideoPlayer): IVideoPlayerImpl {
        const platform = sys.platform;
        const Ctor = this._implMap.get(platform) || this._implMap.get('default');
        return new Ctor(videoPlayer);
    }
}

// Web平台实现注册示例
VideoPlayerImplManager.registerImpl(sys.Platform.WEB, VideoPlayerImplWeb);

价值呈现：通过这种设计，开发者无需关心底层实现差异，统一调用VideoPlayer组件API即可实现跨平台播放，将平台适配复杂度从业务层剥离。

1.2 资源加载与性能瓶颈

技术痛点：视频文件通常体积较大，同步加载会导致游戏卡顿，异步加载则需要处理复杂的状态管理；同时视频解码会占用大量CPU/GPU资源，可能导致游戏帧率下降。

解决方案：采用分级加载策略与资源释放机制：

// 异步加载远程视频并优化资源使用
async function loadAndPlayRemoteVideo(videoPlayer: VideoPlayer, url: string) {
    // 1. 显示加载动画
    showLoadingUI(true);
    
    try {
        // 2. 设置远程资源并监听加载事件
        videoPlayer.resourceType = VideoPlayer.ResourceType.REMOTE;
        videoPlayer.remoteURL = url;
        
        // 3. 预加载视频元数据
        await new Promise((resolve, reject) => {
            const onLoaded = () => {
                videoPlayer.node.off(VideoPlayer.EventType.READY_TO_PLAY, onLoaded);
                videoPlayer.node.off(VideoPlayer.EventType.ERROR, onError);
                resolve(true);
            };
            
            const onError = (err) => {
                videoPlayer.node.off(VideoPlayer.EventType.READY_TO_PLAY, onLoaded);
                videoPlayer.node.off(VideoPlayer.EventType.ERROR, onError);
                reject(err);
            };
            
            videoPlayer.node.on(VideoPlayer.EventType.READY_TO_PLAY, onLoaded);
            videoPlayer.node.on(VideoPlayer.EventType.ERROR, onError);
        });
        
        // 4. 播放视频
        videoPlayer.play();
        
        // 5. 播放完成后释放资源
        videoPlayer.node.once(VideoPlayer.EventType.COMPLETED, () => {
            videoPlayer.stop();
            videoPlayer.remoteURL = ''; // 释放资源引用
            showLoadingUI(false);
        });
    } catch (e) {
        console.error('视频加载失败:', e);
        showLoadingUI(false);
        showErrorToast('视频播放失败，请检查网络');
    }
}

价值呈现：通过异步加载、事件监听和及时释放资源，既避免了主线程阻塞，又优化了内存占用，确保游戏在视频播放期间保持流畅。

二、VideoPlayer组件核心架构解析

VideoPlayer组件采用分层设计，从抽象接口到平台实现，形成了清晰的责任边界。理解这一架构有助于开发者深入掌握组件特性，进行定制化开发。

2.1 组件核心类结构

VideoPlayer组件的核心定义位于cocos/video/video-player.ts，其类结构如下：

@ccclass('cc.VideoPlayer')
@requireComponent(UITransform)
export class VideoPlayer extends Component {
    // 资源类型枚举
    static ResourceType = Enum({
        LOCAL: 0,      // 本地视频资源
        REMOTE: 1      // 远程视频URL
    });
    
    // 事件类型枚举
    static EventType = Enum({
        PLAYING: 0,    // 开始播放
        PAUSED: 1,     // 暂停
        STOPPED: 2,    // 停止
        COMPLETED: 3,  // 播放完成
        READY_TO_PLAY: 4, // 准备就绪
        ERROR: 5       // 播放错误
    });
    
    // 核心属性
    @type(ResourceType)
    resourceType: number = VideoPlayer.ResourceType.LOCAL;
    
    @type(VideoClip)
    clip: VideoClip | null = null;
    
    remoteURL: string = '';
    
    playOnAwake: boolean = false;
    loop: boolean = false;
    volume: number = 1;
    
    // 平台特有属性
    stayOnBottom: boolean = false; // Web平台专用，置于底层
    fullScreenOnAwake: boolean = true; // 移动端默认全屏
    
    // 状态属性
    get isPlaying(): boolean {
        return this._impl?.isPlaying || false;
    }
    
    get currentTime(): number {
        return this._impl?.currentTime || 0;
    }
    
    get duration(): number {
        return this._impl?.duration || 0;
    }
    
    // 核心方法
    play(): void {
        this._impl?.play();
    }
    
    pause(): void {
        this._impl?.pause();
    }
    
    stop(): void {
        this._impl?.stop();
    }
    
    // 生命周期
    protected onLoad(): void {
        this._impl = VideoPlayerImplManager.getImpl(this);
        this._impl.init();
    }
    
    protected onDestroy(): void {
        this._impl?.destroy();
    }
}

[!TIP] VideoPlayer组件必须与UITransform组件配合使用，后者负责控制视频显示区域的尺寸和位置。在Web平台，视频实际通过DOM元素渲染，而UITransform决定了该DOM元素的布局属性。

2.2 平台实现机制

不同平台的实现类封装了底层媒体API的差异，以Web平台为例（cocos/video/video-player-impl-web.ts）：

export class VideoPlayerImplWeb implements IVideoPlayerImpl {
    private _videoElement: HTMLVideoElement;
    private _videoPlayer: VideoPlayer;
    private _canvas: HTMLCanvasElement;
    
    constructor(videoPlayer: VideoPlayer) {
        this._videoPlayer = videoPlayer;
        this._createVideoElement();
        this._setupEventListeners();
    }
    
    // 创建视频元素
    private _createVideoElement(): void {
        this._videoElement = document.createElement('video');
        this._videoElement.style.position = 'absolute';
        this._videoElement.style.display = 'none';
        this._videoElement.playsInline = true; // iOS Safari支持内联播放
        document.body.appendChild(this._videoElement);
    }
    
    // 同步视频元素与UITransform
    updateLayout(): void {
        const uiTransform = this._videoPlayer.node.getComponent(UITransform);
        if (!uiTransform) return;
        
        const rect = uiTransform.getBoundingBoxToWorld();
        this._videoElement.style.left = `${rect.x}px`;
        this._videoElement.style.top = `${rect.y}px`;
        this._videoElement.style.width = `${rect.width}px`;
        this._videoElement.style.height = `${rect.height}px`;
        
        // 控制层级
        if (this._videoPlayer.stayOnBottom) {
            this._videoElement.style.zIndex = '1';
        } else {
            this._videoElement.style.zIndex = '1000'; // 默认置于顶层
        }
    }
    
    // 实现播放控制接口
    play(): void {
        this._videoElement.play().catch(e => {
            this._videoPlayer.node.emit(VideoPlayer.EventType.ERROR, e);
        });
    }
    
    // 其他接口实现...
}

技术原理：Web平台通过HTML5 VideoElement实现播放，通过CSS定位与游戏Canvas元素叠加；原生平台则通过平台特定的视图组件实现，这种差异通过IVideoPlayerImpl接口统一封装，对上层透明。

2.3 视频资源管理

视频资源通过VideoClip类（cocos/video/assets/video-clip.ts）管理，支持本地资源和远程资源两种模式：

@ccclass('cc.VideoClip')
export class VideoClip extends Asset {
    // 视频数据
    private _data: ArrayBuffer | null = null;
    
    // 视频元数据
    duration: number = 0;
    width: number = 0;
    height: number = 0;
    
    // 加载本地视频
    loadVideoData(data: ArrayBuffer): Promise<void> {
        return new Promise((resolve) => {
            const blob = new Blob([data], { type: 'video/mp4' });
            const url = URL.createObjectURL(blob);
            
            const video = document.createElement('video');
            video.onloadedmetadata = () => {
                this.duration = video.duration;
                this.width = video.videoWidth;
                this.height = video.videoHeight;
                URL.revokeObjectURL(url);
                resolve();
            };
            video.src = url;
        });
    }
}

[!TIP] 本地视频资源在构建时会被打包，而远程视频则需要在运行时下载。对于超过10MB的视频文件，建议使用远程加载方式，避免增加安装包体积。

三、跨平台适配与兼容性测试

VideoPlayer组件的跨平台适配需要考虑不同操作系统的特性差异和兼容性问题，建立系统化的测试策略。

3.1 平台特性对比

不同平台的视频播放能力存在显著差异，开发者需要针对性设计适配方案：

功能特性	Web平台	iOS平台	Android平台
渲染方式	DOM元素	UIView	SurfaceView
支持格式	MP4/WebM	MP4/MOV	MP4/3GP
透明背景	支持（需Canvas透明）	不支持	不支持
内联播放	支持	iOS 10+支持	Android 8.0+支持
自动播放	需用户交互触发	需用户交互触发	需用户交互触发
画中画模式	支持（Chrome）	iOS 14+支持	Android 8.0+支持
硬件加速	依赖浏览器支持	支持	支持

3.2 兼容性测试方法

建立完善的兼容性测试体系，确保视频功能在目标平台正常工作：

1. 自动化测试用例

// 视频播放核心功能测试用例
describe('VideoPlayer', () => {
    let videoPlayer: VideoPlayer;
    
    beforeEach(() => {
        // 创建测试节点和组件
        const node = new Node();
        videoPlayer = node.addComponent(VideoPlayer);
    });
    
    test('should play local video clip', async () => {
        // 加载测试视频资源
        const clip = await loader.loadRes('test-videos/local-test.mp4', VideoClip);
        videoPlayer.resourceType = VideoPlayer.ResourceType.LOCAL;
        videoPlayer.clip = clip;
        
        // 监听播放事件
        const played = new Promise(resolve => {
            videoPlayer.node.once(VideoPlayer.EventType.PLAYING, resolve);
        });
        
        // 执行播放
        videoPlayer.play();
        
        // 验证播放状态
        await played;
        expect(videoPlayer.isPlaying).toBe(true);
        expect(videoPlayer.currentTime).toBeGreaterThan(0);
    });
    
    // 更多测试用例...
});

2. 手动测试清单

针对各平台特性，制定详细的手动测试清单：

Web平台：
- 测试不同浏览器（Chrome/Firefox/Safari/Edge）
- 验证视频层级（stayOnBottom属性）
- 测试Canvas透明背景下的显示效果
iOS平台：
- 测试不同iOS版本（iOS 12+）
- 验证内联播放与全屏切换
- 测试静音模式下的播放行为
Android平台：
- 测试不同厂商设备（华为/小米/OPPO等）
- 验证后台播放限制
- 测试低配置设备的性能表现

3. 性能测试指标

测试指标	建议阈值	测量工具
加载时间	<3秒	自定义计时器
首帧显示时间	<1秒	自定义计时器
播放过程帧率	>30fps	Cocos Profiler
内存占用	<100MB	系统监控工具
CPU占用	<30%	系统监控工具

四、实战场景应用指南

基于VideoPlayer组件，我们可以实现多种复杂的视频播放场景，从简单的开场动画到高级的交互视频。

4.1 开场动画播放

开场动画是游戏给用户的第一印象，需要确保流畅播放和无缝过渡：

// 开场动画管理器
export class OpeningAnimationManager extends Component {
    @property(VideoPlayer)
    videoPlayer: VideoPlayer = null!;
    
    @property(SceneAsset)
    nextScene: SceneAsset = null!;
    
    async start() {
        // 配置视频播放器
        this.videoPlayer.resourceType = VideoPlayer.ResourceType.LOCAL;
        this.videoPlayer.loop = false;
        this.videoPlayer.fullScreenOnAwake = true;
        this.videoPlayer.playOnAwake = false;
        
        try {
            // 加载视频资源
            const clip = await loader.loadRes('videos/opening', VideoClip);
            this.videoPlayer.clip = clip;
            
            // 播放视频
            this.videoPlayer.play();
            
            // 监听播放完成事件
            this.videoPlayer.node.once(VideoPlayer.EventType.COMPLETED, this.onVideoCompleted, this);
        } catch (e) {
            console.error('开场视频加载失败:', e);
            // 失败时直接进入游戏
            this.loadNextScene();
        }
    }
    
    private onVideoCompleted() {
        // 视频播放完成后切换场景
        this.videoPlayer.stop();
        director.loadScene(this.nextScene.sceneName);
    }
    
    private loadNextScene() {
        director.loadScene(this.nextScene.sceneName);
    }
}

[!TIP] 对于较长的开场视频（>30秒），建议采用分段加载或预加载策略，避免用户等待过长。同时提供跳过按钮，提升用户体验。

4.2 游戏内交互视频（多结局剧情）

实现游戏内交互视频，根据用户选择展示不同剧情片段：

// 交互视频管理器
export class InteractiveVideoManager extends Component {
    @property(VideoPlayer)
    videoPlayer: VideoPlayer = null!;
    
    // 剧情节点定义
    private storyNodes: {
        id: string;
        videoUrl: string;
        choices: Array<{
            text: string;
            nextNodeId: string;
        }>;
    }[] = [];
    
    private currentNodeId: string = 'start';
    
    async start() {
        // 加载剧情配置
        await this.loadStoryConfig();
        // 播放起始节点
        this.playNode('start');
    }
    
    private async loadStoryConfig() {
        const config = await loader.loadRes('configs/story', JsonAsset);
        this.storyNodes = config.json;
    }
    
    private async playNode(nodeId: string) {
        // 查找节点配置
        const node = this.storyNodes.find(n => n.id === nodeId);
        if (!node) {
            console.error('剧情节点不存在:', nodeId);
            return;
        }
        
        // 显示加载中
        this.showLoading(true);
        
        try {
            // 设置远程视频
            this.videoPlayer.resourceType = VideoPlayer.ResourceType.REMOTE;
            this.videoPlayer.remoteURL = node.videoUrl;
            this.videoPlayer.loop = false;
            
            // 等待视频准备就绪
            await new Promise(resolve => {
                this.videoPlayer.node.once(VideoPlayer.EventType.READY_TO_PLAY, resolve);
            });
            
            // 隐藏加载中
            this.showLoading(false);
            
            // 播放视频
            this.videoPlayer.play();
            
            // 监听播放完成
            this.videoPlayer.node.once(VideoPlayer.EventType.COMPLETED, () => {
                this.showChoices(node.choices);
            });
        } catch (e) {
            console.error('视频加载失败:', e);
            this.showLoading(false);
            this.showError('视频加载失败，请重试');
        }
    }
    
    private showChoices(choices: Array<{text: string; nextNodeId: string}>) {
        // 显示选择按钮
        const choicePanel = this.node.getChildByName('ChoicePanel');
        choicePanel.active = true;
        
        // 清空现有按钮
        const content = choicePanel.getChildByName('Content');
        content.removeAllChildren();
        
        // 创建选择按钮
        choices.forEach(choice => {
            const btn = instantiate(this.choiceButtonPrefab);
            btn.getComponent(Label).string = choice.text;
            btn.on(Input.EventType.TOUCH_END, () => {
                choicePanel.active = false;
                this.playNode(choice.nextNodeId);
            });
            content.addChild(btn);
        });
    }
    
    // 辅助方法...
}

4.3 画中画模式实现

在游戏过程中显示小窗口视频，如新闻播报、监控画面等：

// 画中画视频控制器
export class PictureInPictureController extends Component {
    @property(VideoPlayer)
    pipVideoPlayer: VideoPlayer = null!;
    
    start() {
        // 配置画中画模式
        this.pipVideoPlayer.fullScreenOnAwake = false;
        this.pipVideoPlayer.loop = true;
        this.pipVideoPlayer.stayOnBottom = false; // 保持在UI上层
        
        // 调整视频尺寸和位置
        const uiTransform = this.pipVideoPlayer.node.getComponent(UITransform);
        uiTransform.setContentSize(480, 270); // 16:9比例
        
        // 定位到屏幕右下角
        const visibleSize = director.getVisibleSize();
        this.pipVideoPlayer.node.setPosition(
            visibleSize.width / 2 - 250,
            -visibleSize.height / 2 + 150
        );
        
        // 加载并播放视频
        this.loadAndPlayPipVideo();
    }
    
    private async loadAndPlayPipVideo() {
        try {
            this.pipVideoPlayer.resourceType = VideoPlayer.ResourceType.REMOTE;
            this.pipVideoPlayer.remoteURL = 'https://game-news.example.com/latest.mp4';
            
            // 等待准备就绪
            await new Promise(resolve => {
                this.pipVideoPlayer.node.once(VideoPlayer.EventType.READY_TO_PLAY, resolve);
            });
            
            // 开始播放
            this.pipVideoPlayer.play();
        } catch (e) {
            console.error('画中画视频加载失败:', e);
        }
    }
    
    // 提供显示/隐藏控制
    show() {
        this.pipVideoPlayer.node.active = true;
        if (!this.pipVideoPlayer.isPlaying) {
            this.pipVideoPlayer.play();
        }
    }
    
    hide() {
        this.pipVideoPlayer.node.active = false;
        this.pipVideoPlayer.pause();
    }
}

五、常见故障诊断与性能优化

视频播放问题的诊断需要系统方法，而性能优化则需要结合具体场景采取针对性措施。

5.1 常见故障诊断流程图

视频无法播放
├── 检查资源类型
│   ├── 本地资源
│   │   ├── 检查视频文件是否存在
│   │   ├── 检查视频格式是否支持
│   │   └── 检查资源加载是否成功
│   └── 远程资源
│       ├── 检查URL是否可访问
│       ├── 检查网络连接
│       └── 检查跨域设置
├── 检查平台特性
│   ├── Web平台
│   │   ├── 检查浏览器控制台错误
│   │   ├── 确认是否有用户交互触发
│   │   └── 检查视频元素是否被遮挡
│   └── 移动平台
│       ├── 检查权限配置
│       ├── 检查系统版本
│       └── 检查是否在后台运行
└── 检查组件配置
    ├── 确认UITransform组件存在
    ├── 检查播放参数设置
    └── 查看错误事件详细信息

5.2 性能优化策略

1. 视频编码优化

选择合适的视频编码参数，平衡画质和性能：

参数	建议值	说明
分辨率	720p (1280x720)	移动端建议不超过720p，降低解码压力
比特率	1500-2500 kbps	根据内容复杂度调整，动画类可降低
帧率	30fps	游戏内视频30fps足够，降低CPU占用
编码格式	H.264/AVC	跨平台兼容性最佳

2. 播放性能优化

// 视频播放性能优化示例
export class OptimizedVideoPlayer extends Component {
    @property(VideoPlayer)
    videoPlayer: VideoPlayer = null!;
    
    private _originalQuality: {width: number, height: number} = {width: 0, height: 0};
    
    onLoad() {
        // 监听游戏帧率变化
        director.on(Director.EVENT_AFTER_UPDATE, this._adjustVideoQuality, this);
    }
    
    onDestroy() {
        director.off(Director.EVENT_AFTER_UPDATE, this._adjustVideoQuality, this);
    }
    
    private _adjustVideoQuality() {
        const fps = director.getFrameRate();
        
        // 当帧率低于25时降低视频质量
        if (fps < 25 && !this._isLowQuality) {
            this._originalQuality = {
                width: this.videoPlayer.node.getComponent(UITransform).width,
                height: this.videoPlayer.node.getComponent(UITransform).height
            };
            // 降低50%尺寸
            this.videoPlayer.node.getComponent(UITransform).setContentSize(
                this._originalQuality.width * 0.5,
                this._originalQuality.height * 0.5
            );
            this._isLowQuality = true;
        }
        // 当帧率恢复时恢复质量
        else if (fps > 28 && this._isLowQuality) {
            this.videoPlayer.node.getComponent(UITransform).setContentSize(
                this._originalQuality.width,
                this._originalQuality.height
            );
            this._isLowQuality = false;
        }
    }
}

3. 资源管理优化

预加载：在场景切换前预加载视频资源
延迟卸载：在视频播放完成后延迟几秒卸载，避免频繁加载
资源复用：对重复使用的视频资源进行缓存

5.3 高级功能扩展

1. 视频截图功能

利用Canvas API实现视频当前帧截图：

// 视频截图功能
async function captureVideoFrame(videoPlayer: VideoPlayer): Promise<Texture2D> {
    if (!videoPlayer.isPlaying) {
        throw new Error('视频未在播放中');
    }
    
    // Web平台实现
    if (sys.platform === sys.Platform.WEB) {
        const impl = videoPlayer['_impl'] as VideoPlayerImplWeb;
        const video = impl['_videoElement'] as HTMLVideoElement;
        
        const canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        
        const ctx = canvas.getContext('2d');
        ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
        
        return new Promise((resolve) => {
            canvas.toBlob(blob => {
                const reader = new FileReader();
                reader.onload = () => {
                    const arrayBuffer = reader.result as ArrayBuffer;
                    const texture = new Texture2D();
                    texture.loadImage(new Uint8Array(arrayBuffer));
                    resolve(texture);
                };
                reader.readAsArrayBuffer(blob!);
            }, 'image/png');
        });
    } else {
        // 原生平台实现...
        throw new Error('截图功能暂不支持当前平台');
    }
}

2. 自定义控制界面

实现自定义视频控制界面，替代默认控件：

// 自定义视频控制器
export class CustomVideoController extends Component {
    @property(VideoPlayer)
    videoPlayer: VideoPlayer = null!;
    
    @property(Slider)
    progressSlider: Slider = null!;
    
    @property(Button)
    playPauseButton: Button = null!;
    
    @property(Label)
    timeLabel: Label = null!;
    
    private _updateInterval: number = 0;
    
    onLoad() {
        // 注册事件监听
        this.playPauseButton.node.on(Input.EventType.TOUCH_END, this.togglePlayPause, this);
        this.progressSlider.node.on('slide', this.onProgressSlide, this);
        
        // 监听视频事件
        this.videoPlayer.node.on(VideoPlayer.EventType.PLAYING, this.updatePlayState, this);
        this.videoPlayer.node.on(VideoPlayer.EventType.PAUSED, this.updatePlayState, this);
        this.videoPlayer.node.on(VideoPlayer.EventType.COMPLETED, this.onPlayCompleted, this);
    }
    
    start() {
        // 启动进度更新定时器
        this._updateInterval = this.schedule(this.updateProgress, 0.5);
    }
    
    onDestroy() {
        this.unschedule(this._updateInterval);
    }
    
    private togglePlayPause() {
        if (this.videoPlayer.isPlaying) {
            this.videoPlayer.pause();
        } else {
            this.videoPlayer.play();
        }
    }
    
    private updatePlayState() {
        const icon = this.playPauseButton.getComponentInChildren<Sprite>(Sprite);
        icon.spriteFrame = this.videoPlayer.isPlaying ? this.pauseSprite : this.playSprite;
    }
    
    private updateProgress() {
        if (!this.videoPlayer.isPlaying) return;
        
        // 更新进度条
        const progress = this.videoPlayer.currentTime / this.videoPlayer.duration;
        this.progressSlider.progress = progress;
        
        // 更新时间显示
        const currentTime = formatTime(this.videoPlayer.currentTime);
        const duration = formatTime(this.videoPlayer.duration);
        this.timeLabel.string = `${currentTime}/${duration}`;
    }
    
    private onProgressSlide(slider: Slider) {
        const seekTime = slider.progress * this.videoPlayer.duration;
        this.videoPlayer.currentTime = seekTime;
    }
    
    private onPlayCompleted() {
        this.progressSlider.progress = 0;
        this.updatePlayState();
    }
}

// 辅助函数：格式化时间
function formatTime(seconds: number): string {
    const minutes = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}