CloudPlayer - iCloud 视频播放器

✨ 主要特性

🎬 HLS 支持

原生支持 HLS (m3u8) 流媒体播放，自动处理多码率切换

📝 字幕同步

支持 WebVTT 字幕，提供精确到 0.1 秒的同步调整功能

⌨️ 键盘快捷键

空格播放/暂停，F 全屏，方向键控制进度和音量

📱 响应式设计

完美适配桌面和移动设备，支持触摸手势

🔗 Service Worker

自动处理 iCloud 分享链接，支持直接播放

🎨 优雅界面

现代化设计，自动隐藏控件，沉浸式观看体验

🚀 快速开始

1. 最简单的使用方式

<!-- 引入 HLS.js -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<!-- 引入 CloudPlayer -->
<script src="cloudplayer.js"></script>

<!-- 添加播放器容器 -->
<div class="cloudplayer"></div>

2. 自定义配置

<div class="cloudplayer" 
     data-config='{"autoplay": false, "showUrlInput": true}'>
</div>

3. JavaScript API（高级用法）

// 创建播放器实例
const player = new CloudPlayer('#my-player', {
    autoplay: true,
    showUrlInput: true,
    showSubtitleSync: true,
    hlsConfig: {
        debug: false,
        renderTextTracksNatively: true
    }
});

// 加载视频
player.load('https://example.com/video.m3u8');

// 播放控制
player.play();
player.pause();
player.togglePlay();

// 进度控制
player.seek(10);        // 快进 10 秒
player.seekTo(120);     // 跳转到 120 秒

// 音量控制
player.setVolume(0.8);  // 设置音量为 80%
player.toggleMute();    // 切换静音

// 全屏
player.toggleFullscreen();

// 获取底层实例（高级用户）
const hls = player.getHLS();
const video = player.getVideo();

// 销毁播放器
player.destroy();

4. 配置选项

{
    serviceWorkerPath: '/cloud-worker.js',  // Service Worker 路径
    autoplay: true,                         // 自动播放
    showUrlInput: true,                     // 显示 URL 输入界面
    showSubtitleSync: true,                 // 显示字幕同步控件
    hlsConfig: {                            // HLS.js 配置
        debug: false,
        renderTextTracksNatively: true
    }
}