feat: add Cloudflare Stream integration with streaming scripts and configuration

- Introduce scripts for streaming from Mac camera and screen to Cloudflare Stream
- Add configuration files for stream settings and example usage in README
- Implement demo views for Cloudflare Stream, direct URL playback, RTSP streaming, and sample videos
- Enhance layout with new menu items for video testing and streaming options

cloudflare_stream_webcom/README.md

@@ -0,0 +1,120 @@
+# TG Live Game Stream Service
+
+Mac 摄像头/屏幕推流到 Cloudflare Stream 的脚本工具。
+
+## 前置要求
+
+### 安装 FFmpeg
+
+```bash
+brew install ffmpeg
+```
+
+### 获取推流地址
+
+1. 打开 `tg-live-game-web` 前端
+2. 进入 **Cloudflare Stream → 直播管理**
+3. 点击 **创建直播**
+4. 获取 **RTMPS 推流地址** 和 **推流密钥**
+
+## 快速开始
+
+### 1. 配置推流参数
+
+```bash
+# 复制配置文件
+cp config/stream.env.example config/stream.env
+
+# 编辑配置，填入推流密钥
+vim config/stream.env
+```
+
+### 2. 查看可用设备
+
+```bash
+chmod +x scripts/*.sh
+./scripts/list-devices.sh
+```
+
+输出示例：
+```
+[AVFoundation indev @ 0x...] [0] FaceTime HD Camera
+[AVFoundation indev @ 0x...] [1] Capture screen 0
+[AVFoundation indev @ 0x...] [0] MacBook Pro Microphone
+```
+
+### 3. 开始推流
+
+**摄像头推流：**
+```bash
+./scripts/stream-camera.sh
+```
+
+**屏幕推流：**
+```bash
+./scripts/stream-screen.sh
+```
+
+### 4. 停止推流
+
+按 `Ctrl+C` 或运行：
+```bash
+./scripts/stop-stream.sh
+```
+
+## 配置说明
+
+| 参数 | 说明 | 推荐值 |
+|------|------|--------|
+| `RTMP_URL` | 推流地址 | `rtmps://live.cloudflare.com:443/live` |
+| `STREAM_KEY` | 推流密钥 | 从 Cloudflare 获取 |
+| `VIDEO_DEVICE` | 摄像头编号 | `0` |
+| `AUDIO_DEVICE` | 麦克风编号 | `0` |
+| `RESOLUTION` | 分辨率 | `1280x720` |
+| `FPS` | 帧率 | `30` |
+| `BITRATE` | 视频码率 | `2500k` |
+
+## 推荐码率
+
+| 分辨率 | 帧率 | 推荐码率 |
+|--------|------|----------|
+| 720p (1280x720) | 30fps | 2500k |
+| 720p (1280x720) | 60fps | 3500k |
+| 1080p (1920x1080) | 30fps | 4500k |
+| 1080p (1920x1080) | 60fps | 6000k |
+
+## 常见问题
+
+### 权限问题
+
+首次运行时，macOS 会提示授权摄像头和麦克风访问，请点击允许。
+
+如果没有提示，可以在 **系统偏好设置 → 安全性与隐私 → 隐私 → 摄像头/麦克风** 中手动授权终端。
+
+### 推流失败
+
+1. 检查网络连接
+2. 确认推流密钥正确
+3. 确认 Cloudflare Stream 服务已开通
+4. 查看 FFmpeg 错误输出
+
+### 画面卡顿
+
+- 降低分辨率或码率
+- 检查网络上传带宽
+- 关闭其他占用网络的应用
+
+## 文件结构
+
+```
+tg-live-game-stream-service/
+├── scripts/
+│   ├── list-devices.sh       # 列出可用设备
+│   ├── stream-camera.sh      # 摄像头推流
+│   ├── stream-screen.sh      # 屏幕推流
+│   └── stop-stream.sh        # 停止推流
+├── config/
+│   ├── stream.env.example    # 配置模板
+│   └── stream.env            # 实际配置（需创建）
+└── README.md
+```

cloudflare_stream_webcom/config/stream.env

@@ -0,0 +1,28 @@
+# Cloudflare Stream 推流配置
+
+# ============ Cloudflare Stream 配置 ============
+# RTMPS 推流地址
+RTMP_URL=rtmps://live.cloudflare.com:443/live
+
+# 推流密钥
+STREAM_KEY=a6ab89289f20807d84b56bbb899f296ek3c1ae1949e76f200feef94b8f7d093ca
+
+# ============ 设备配置 ============
+# 摄像头设备编号
+VIDEO_DEVICE=0
+
+# 麦克风设备编号（1=MacBook Pro Microphone）
+AUDIO_DEVICE=1
+
+# 屏幕设备编号
+SCREEN_DEVICE=1
+
+# ============ 视频参数 ============
+# 分辨率
+RESOLUTION=640x480
+
+# 帧率
+FPS=30
+
+# 视频码率
+BITRATE=500k

cloudflare_stream_webcom/config/stream.env.example

@@ -0,0 +1,34 @@
+# Cloudflare Stream 推流配置
+# 复制此文件为 stream.env 并填写配置
+
+# ============ Cloudflare Stream 配置 ============
+# 从 tg-live-game-web 的「直播管理」页面获取
+
+# RTMPS 推流地址（不要修改）
+RTMP_URL=rtmps://live.cloudflare.com:443/live
+
+# 推流密钥（从 Cloudflare 创建直播后获取）
+STREAM_KEY=your_stream_key_here
+
+# ============ 设备配置 ============
+# 运行 ./scripts/list-devices.sh 查看可用设备
+
+# 摄像头设备编号（通常是 0）
+VIDEO_DEVICE=0
+
+# 麦克风设备编号（通常是 0）
+AUDIO_DEVICE=0
+
+# 屏幕设备编号（用于屏幕推流，通常是 1）
+SCREEN_DEVICE=1
+
+# ============ 视频参数 ============
+
+# 分辨率（推荐: 1280x720 或 1920x1080）
+RESOLUTION=1280x720
+
+# 帧率（推荐: 30）
+FPS=30
+
+# 视频码率（推荐: 720p 用 2500k, 1080p 用 4500k）
+BITRATE=2500k

cloudflare_stream_webcom/scripts/list-devices.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+# 列出 Mac 上可用的音视频设备
+# 用于确定 VIDEO_DEVICE 和 AUDIO_DEVICE 的编号
+
+echo "====== 可用的音视频设备 ======"
+echo ""
+
+ffmpeg -f avfoundation -list_devices true -i "" 2>&1 | grep -E "^\[AVFoundation"
+
+echo ""
+echo "====== 使用说明 ======"
+echo "视频设备编号: [AVFoundation ...] [0] 后面的数字"
+echo "音频设备编号: [AVFoundation ...] [0] 后面的数字"
+echo ""
+echo "在 config/stream.env 中配置:"
+echo "  VIDEO_DEVICE=0"
+echo "  AUDIO_DEVICE=0"

cloudflare_stream_webcom/scripts/stop-stream.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+# 停止所有 FFmpeg 推流进程
+
+echo "正在停止所有 FFmpeg 推流进程..."
+
+# 查找并终止 ffmpeg 进程
+pkill -f "ffmpeg.*flv.*cloudflare" 2>/dev/null
+
+if [ $? -eq 0 ]; then
+    echo "已停止推流"
+else
+    echo "没有找到正在运行的推流进程"
+fi

cloudflare_stream_webcom/scripts/stream-camera.sh

@@ -0,0 +1,74 @@
+#!/bin/bash
+# Mac 摄像头推流到 Cloudflare Stream
+# 使用方法: ./scripts/stream-camera.sh
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+CONFIG_FILE="$SCRIPT_DIR/../config/stream.env"
+
+# 检查配置文件
+if [ ! -f "$CONFIG_FILE" ]; then
+    echo "错误: 配置文件不存在"
+    echo "请复制 config/stream.env.example 为 config/stream.env 并填写配置"
+    exit 1
+fi
+
+# 加载配置
+source "$CONFIG_FILE"
+
+# 默认参数
+VIDEO_DEVICE="${VIDEO_DEVICE:-0}"
+AUDIO_DEVICE="${AUDIO_DEVICE:-0}"
+RESOLUTION="${RESOLUTION:-1280x720}"
+FPS="${FPS:-30}"
+BITRATE="${BITRATE:-2500k}"
+
+# 检查必要配置
+if [ -z "$RTMP_URL" ] || [ -z "$STREAM_KEY" ]; then
+    echo "错误: 请在 config/stream.env 中配置 RTMP_URL 和 STREAM_KEY"
+    echo ""
+    echo "获取方式:"
+    echo "1. 打开 tg-live-game-web 前端"
+    echo "2. 进入 Cloudflare Stream -> 直播管理"
+    echo "3. 创建直播，获取推流地址和密钥"
+    exit 1
+fi
+
+# 检查 ffmpeg
+if ! command -v ffmpeg &> /dev/null; then
+    echo "错误: ffmpeg 未安装"
+    echo "请运行: brew install ffmpeg"
+    exit 1
+fi
+
+echo "======================================"
+echo "    Cloudflare Stream 摄像头推流"
+echo "======================================"
+echo ""
+echo "配置信息:"
+echo "  视频设备: $VIDEO_DEVICE"
+echo "  音频设备: $AUDIO_DEVICE"
+echo "  分辨率:   $RESOLUTION"
+echo "  帧率:     $FPS fps"
+echo "  码率:     $BITRATE"
+echo "  推流地址: $RTMP_URL"
+echo ""
+echo "按 Ctrl+C 停止推流"
+echo "======================================"
+echo ""
+
+# 开始推流
+ffmpeg -f avfoundation \
+    -framerate "$FPS" \
+    -video_size "$RESOLUTION" \
+    -i "$VIDEO_DEVICE:$AUDIO_DEVICE" \
+    -c:v libx264 \
+    -preset veryfast \
+    -maxrate "$BITRATE" \
+    -bufsize 5000k \
+    -pix_fmt yuv420p \
+    -g 60 \
+    -c:a aac \
+    -b:a 128k \
+    -ar 44100 \
+    -f flv \
+    "${RTMP_URL}/${STREAM_KEY}"

cloudflare_stream_webcom/scripts/stream-screen.sh

@@ -0,0 +1,66 @@
+#!/bin/bash
+# Mac 屏幕录制推流到 Cloudflare Stream
+# 使用方法: ./scripts/stream-screen.sh
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+CONFIG_FILE="$SCRIPT_DIR/../config/stream.env"
+
+# 检查配置文件
+if [ ! -f "$CONFIG_FILE" ]; then
+    echo "错误: 配置文件不存在"
+    echo "请复制 config/stream.env.example 为 config/stream.env 并填写配置"
+    exit 1
+fi
+
+# 加载配置
+source "$CONFIG_FILE"
+
+# 屏幕录制参数
+SCREEN_DEVICE="${SCREEN_DEVICE:-1}"  # 屏幕设备号（通常是1）
+AUDIO_DEVICE="${AUDIO_DEVICE:-0}"
+FPS="${FPS:-30}"
+BITRATE="${BITRATE:-3000k}"
+
+# 检查必要配置
+if [ -z "$RTMP_URL" ] || [ -z "$STREAM_KEY" ]; then
+    echo "错误: 请在 config/stream.env 中配置 RTMP_URL 和 STREAM_KEY"
+    exit 1
+fi
+
+# 检查 ffmpeg
+if ! command -v ffmpeg &> /dev/null; then
+    echo "错误: ffmpeg 未安装"
+    echo "请运行: brew install ffmpeg"
+    exit 1
+fi
+
+echo "======================================"
+echo "    Cloudflare Stream 屏幕推流"
+echo "======================================"
+echo ""
+echo "配置信息:"
+echo "  屏幕设备: $SCREEN_DEVICE"
+echo "  音频设备: $AUDIO_DEVICE"
+echo "  帧率:     $FPS fps"
+echo "  码率:     $BITRATE"
+echo ""
+echo "按 Ctrl+C 停止推流"
+echo "======================================"
+echo ""
+
+# 开始屏幕推流
+ffmpeg -f avfoundation \
+    -framerate "$FPS" \
+    -capture_cursor 1 \
+    -i "$SCREEN_DEVICE:$AUDIO_DEVICE" \
+    -c:v libx264 \
+    -preset veryfast \
+    -maxrate "$BITRATE" \
+    -bufsize 6000k \
+    -pix_fmt yuv420p \
+    -g 60 \
+    -c:a aac \
+    -b:a 128k \
+    -ar 44100 \
+    -f flv \
+    "${RTMP_URL}/${STREAM_KEY}"

src/components.d.ts

@@ -40,6 +40,7 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElResult: typeof import('element-plus/es')['ElResult']

src/layout/index.vue

@@ -31,10 +31,28 @@
           <el-icon><UserFilled /></el-icon>
           <template #title>{{ t('用户管理') }}</template>
         </el-menu-item>
-        <el-menu-item index="/video-demo">
-          <el-icon><VideoPlay /></el-icon>
-          <template #title>{{ t('视频测试') }}</template>
-        </el-menu-item>
+        <el-sub-menu index="/demo">
+          <template #title>
+            <el-icon><VideoPlay /></el-icon>
+            <span>{{ t('视频测试') }}</span>
+          </template>
+          <el-menu-item index="/demo/direct-url">
+            <el-icon><Link /></el-icon>
+            <template #title>{{ t('直接 URL') }}</template>
+          </el-menu-item>
+          <el-menu-item index="/demo/cloudflare-stream">
+            <el-icon><VideoCamera /></el-icon>
+            <template #title>{{ t('Cloudflare Stream') }}</template>
+          </el-menu-item>
+          <el-menu-item index="/demo/rtsp-stream">
+            <el-icon><Connection /></el-icon>
+            <template #title>{{ t('RTSP 流') }}</template>
+          </el-menu-item>
+          <el-menu-item index="/demo/sample-videos">
+            <el-icon><Film /></el-icon>
+            <template #title>{{ t('测试视频') }}</template>
+          </el-menu-item>
+        </el-sub-menu>
 
         <el-sub-menu index="/stream">
           <template #title>
@@ -142,7 +160,9 @@ import {
   VideoCameraFilled,
   Setting,
   UserFilled,
-  VideoPlay
+  VideoPlay,
+  Link,
+  Connection
 } from '@element-plus/icons-vue'
 import LangDropdown from '@/components/LangDropdown.vue'
 import { useAppStore } from '@/store/app'

src/router/index.ts

@@ -93,10 +93,28 @@ const routes: RouteRecordRaw[] = [
         meta: { title: '审计日志', icon: 'Document' }
       },
       {
-        path: 'video-demo',
-        name: 'VideoDemo',
-        component: () => import('@/views/demo/video-demo.vue'),
-        meta: { title: '视频测试', icon: 'VideoPlay' }
+        path: 'demo/direct-url',
+        name: 'DirectUrl',
+        component: () => import('@/views/demo/direct-url.vue'),
+        meta: { title: '直接 URL', icon: 'Link' }
+      },
+      {
+        path: 'demo/cloudflare-stream',
+        name: 'CloudflareStream',
+        component: () => import('@/views/demo/cloudflare-stream.vue'),
+        meta: { title: 'Cloudflare Stream', icon: 'VideoCamera' }
+      },
+      {
+        path: 'demo/rtsp-stream',
+        name: 'RtspStream',
+        component: () => import('@/views/demo/rtsp-stream.vue'),
+        meta: { title: 'RTSP 流', icon: 'Connection' }
+      },
+      {
+        path: 'demo/sample-videos',
+        name: 'SampleVideos',
+        component: () => import('@/views/demo/sample-videos.vue'),
+        meta: { title: '测试视频', icon: 'Film' }
       }
     ]
   },

src/views/demo/cloudflare-stream.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="page-container">
+    <div class="page-header">
+      <span class="title">Cloudflare Stream 播放</span>
+    </div>
+
+    <!-- 配置区域 -->
+    <div class="config-section">
+      <el-form label-width="120px">
+        <el-form-item label="Video ID">
+          <el-input v-model="cfConfig.videoId" placeholder="Cloudflare Stream Video ID" style="width: 400px" />
+        </el-form-item>
+        <el-form-item label="自定义域名">
+          <el-input
+            v-model="cfConfig.customerDomain"
+            placeholder="customer-xxx.cloudflarestream.com"
+            style="width: 400px"
+          />
+        </el-form-item>
+        <el-form-item label="播放方式">
+          <el-select v-model="cfConfig.playMode" style="width: 200px">
+            <el-option label="iframe 嵌入" value="iframe" />
+            <el-option label="HLS 播放" value="hls" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="playCloudflare">播放</el-button>
+          <el-button @click="generateCfUrl">生成地址</el-button>
+        </el-form-item>
+        <el-form-item v-if="cfGeneratedUrl" label="生成的地址">
+          <el-input :value="cfGeneratedUrl" readonly style="width: 600px">
+            <template #append>
+              <el-button @click="copyUrl(cfGeneratedUrl)">复制</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 播放器区域 -->
+    <div class="player-section">
+      <div v-if="!currentSrc && !currentVideoId" class="player-placeholder">
+        <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+        <p>请输入 Video ID 并点击播放</p>
+      </div>
+      <VideoPlayer
+        v-else
+        ref="playerRef"
+        :player-type="currentPlayerType"
+        :video-id="currentVideoId"
+        :customer-domain="cfConfig.customerDomain"
+        :src="currentSrc"
+        :use-iframe="useIframe"
+        :autoplay="playConfig.autoplay"
+        :muted="playConfig.muted"
+        :controls="true"
+        @play="onPlay"
+        @pause="onPause"
+        @error="onError"
+        @loadedmetadata="onLoaded"
+      />
+    </div>
+
+    <!-- 播放控制 -->
+    <div class="control-section">
+      <el-space wrap>
+        <el-button type="primary" @click="handlePlay">播放</el-button>
+        <el-button @click="handlePause">暂停</el-button>
+        <el-button type="danger" @click="handleStop">停止</el-button>
+        <el-button @click="handleScreenshot">截图</el-button>
+        <el-button @click="handleFullscreen">全屏</el-button>
+
+        <el-divider direction="vertical" />
+
+        <el-switch v-model="playConfig.muted" active-text="静音" inactive-text="有声" />
+        <el-switch v-model="playConfig.autoplay" active-text="自动播放" inactive-text="手动" />
+      </el-space>
+    </div>
+
+    <!-- 当前状态 -->
+    <div class="status-section">
+      <el-descriptions title="当前状态" :column="3" border>
+        <el-descriptions-item label="播放器类型">{{ currentPlayerType }}</el-descriptions-item>
+        <el-descriptions-item label="iframe 模式">{{ useIframe ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="Video ID">{{ currentVideoId || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="视频地址" :span="3">
+          <el-text truncated style="max-width: 800px">{{ currentSrc || '-' }}</el-text>
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+
+    <!-- 日志区域 -->
+    <div class="log-section">
+      <div class="log-header">
+        <h4>事件日志</h4>
+        <el-button size="small" @click="logs = []">清空</el-button>
+      </div>
+      <div class="log-content">
+        <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
+          <span class="time">{{ log.time }}</span>
+          <span class="message">{{ log.message }}</span>
+        </div>
+        <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { VideoPlay } from '@element-plus/icons-vue'
+import VideoPlayer from '@/components/VideoPlayer.vue'
+
+const playerRef = ref<InstanceType<typeof VideoPlayer>>()
+
+// Cloudflare Stream 配置
+const cfConfig = reactive({
+  videoId: '3c1ae1949e76f200feef94b8f7d093ca',
+  customerDomain: 'customer-pj89kn2ke2tcuh19.cloudflarestream.com',
+  playMode: 'iframe' as 'iframe' | 'hls'
+})
+const cfGeneratedUrl = ref('')
+
+// 播放配置
+const playConfig = reactive({
+  autoplay: false,
+  muted: true
+})
+
+// 当前播放状态
+const currentSrc = ref('')
+const currentVideoId = ref('')
+const currentPlayerType = ref<'hls' | 'native' | 'cloudflare'>('hls')
+const useIframe = ref(false)
+
+// 日志
+interface LogItem {
+  time: string
+  type: 'info' | 'success' | 'error'
+  message: string
+}
+const logs = ref<LogItem[]>([])
+
+function addLog(message: string, type: LogItem['type'] = 'info') {
+  const time = new Date().toLocaleTimeString()
+  logs.value.unshift({ time, type, message })
+  if (logs.value.length > 100) {
+    logs.value.pop()
+  }
+}
+
+// 播放 Cloudflare Stream
+function playCloudflare() {
+  if (!cfConfig.videoId) {
+    ElMessage.warning('请输入 Video ID')
+    return
+  }
+
+  currentVideoId.value = cfConfig.videoId
+  useIframe.value = cfConfig.playMode === 'iframe'
+
+  if (cfConfig.playMode === 'hls') {
+    const domain = cfConfig.customerDomain || 'customer-xxx.cloudflarestream.com'
+    currentSrc.value = `https://${domain}/${cfConfig.videoId}/manifest/video.m3u8`
+    currentPlayerType.value = 'hls'
+  } else {
+    currentSrc.value = ''
+    currentPlayerType.value = 'cloudflare'
+  }
+
+  addLog(`播放 Cloudflare Stream: ${cfConfig.videoId} (${cfConfig.playMode})`, 'success')
+}
+
+// 生成 Cloudflare URL
+function generateCfUrl() {
+  if (!cfConfig.videoId) {
+    ElMessage.warning('请输入 Video ID')
+    return
+  }
+  const domain = cfConfig.customerDomain || 'customer-xxx.cloudflarestream.com'
+  if (cfConfig.playMode === 'iframe') {
+    cfGeneratedUrl.value = `https://${domain}/${cfConfig.videoId}/iframe`
+  } else {
+    cfGeneratedUrl.value = `https://${domain}/${cfConfig.videoId}/manifest/video.m3u8`
+  }
+}
+
+// 复制 URL
+function copyUrl(url: string) {
+  navigator.clipboard.writeText(url)
+  ElMessage.success('已复制到剪贴板')
+}
+
+// 播放控制
+function handlePlay() {
+  playerRef.value?.play()
+  addLog('播放', 'info')
+}
+
+function handlePause() {
+  playerRef.value?.pause()
+  addLog('暂停', 'info')
+}
+
+function handleStop() {
+  playerRef.value?.stop()
+  addLog('停止', 'info')
+}
+
+function handleScreenshot() {
+  playerRef.value?.screenshot()
+  addLog('截图', 'info')
+}
+
+function handleFullscreen() {
+  playerRef.value?.fullscreen()
+  addLog('全屏', 'info')
+}
+
+// 事件处理
+function onPlay() {
+  addLog('视频开始播放', 'success')
+}
+
+function onPause() {
+  addLog('视频已暂停', 'info')
+}
+
+function onLoaded() {
+  addLog('视频加载完成', 'success')
+}
+
+function onError(error: any) {
+  addLog(`播放错误: ${JSON.stringify(error)}`, 'error')
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+.config-section {
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.player-section {
+  height: 500px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: #000;
+
+  .player-placeholder {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+
+    p {
+      margin-top: 15px;
+      font-size: 14px;
+    }
+  }
+}
+
+.control-section {
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.status-section {
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.log-section {
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  .log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+
+    h4 {
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+
+  .log-content {
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: #fafafa;
+    border-radius: 4px;
+    padding: 10px;
+  }
+
+  .log-item {
+    font-size: 12px;
+    padding: 4px 0;
+    border-bottom: 1px solid #eee;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .time {
+      color: #999;
+      margin-right: 10px;
+    }
+
+    &.success .message {
+      color: #67c23a;
+    }
+
+    &.error .message {
+      color: #f56c6c;
+    }
+  }
+
+  .log-empty {
+    text-align: center;
+    color: #999;
+    font-size: 12px;
+    padding: 20px 0;
+  }
+}
+</style>

src/views/demo/direct-url.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="page-container">
+    <div class="page-header">
+      <span class="title">直接 URL 播放</span>
+    </div>
+
+    <!-- 配置区域 -->
+    <div class="config-section">
+      <el-form label-width="120px">
+        <el-form-item label="视频地址">
+          <el-input v-model="urlConfig.url" placeholder="输入 HLS/MP4/WebM 等视频地址" style="width: 600px" />
+        </el-form-item>
+        <el-form-item label="播放器类型">
+          <el-select v-model="urlConfig.playerType" style="width: 200px">
+            <el-option label="HLS.js (推荐)" value="hls" />
+            <el-option label="原生 Video" value="native" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="playUrl">播放</el-button>
+          <el-button @click="urlConfig.url = ''">清空</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 播放器区域 -->
+    <div class="player-section">
+      <div v-if="!currentSrc" class="player-placeholder">
+        <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+        <p>请输入视频地址并点击播放</p>
+      </div>
+      <VideoPlayer
+        v-else
+        ref="playerRef"
+        :player-type="currentPlayerType"
+        :src="currentSrc"
+        :autoplay="playConfig.autoplay"
+        :muted="playConfig.muted"
+        :controls="true"
+        @play="onPlay"
+        @pause="onPause"
+        @error="onError"
+        @loadedmetadata="onLoaded"
+      />
+    </div>
+
+    <!-- 播放控制 -->
+    <div class="control-section">
+      <el-space wrap>
+        <el-button type="primary" @click="handlePlay">播放</el-button>
+        <el-button @click="handlePause">暂停</el-button>
+        <el-button type="danger" @click="handleStop">停止</el-button>
+        <el-button @click="handleScreenshot">截图</el-button>
+        <el-button @click="handleFullscreen">全屏</el-button>
+
+        <el-divider direction="vertical" />
+
+        <el-switch v-model="playConfig.muted" active-text="静音" inactive-text="有声" />
+        <el-switch v-model="playConfig.autoplay" active-text="自动播放" inactive-text="手动" />
+      </el-space>
+    </div>
+
+    <!-- 当前状态 -->
+    <div class="status-section">
+      <el-descriptions title="当前状态" :column="3" border>
+        <el-descriptions-item label="播放器类型">{{ currentPlayerType }}</el-descriptions-item>
+        <el-descriptions-item label="视频地址" :span="2">
+          <el-text truncated style="max-width: 600px">{{ currentSrc || '-' }}</el-text>
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+
+    <!-- 日志区域 -->
+    <div class="log-section">
+      <div class="log-header">
+        <h4>事件日志</h4>
+        <el-button size="small" @click="logs = []">清空</el-button>
+      </div>
+      <div class="log-content">
+        <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
+          <span class="time">{{ log.time }}</span>
+          <span class="message">{{ log.message }}</span>
+        </div>
+        <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { VideoPlay } from '@element-plus/icons-vue'
+import VideoPlayer from '@/components/VideoPlayer.vue'
+
+const playerRef = ref<InstanceType<typeof VideoPlayer>>()
+
+// URL 配置
+const urlConfig = reactive({
+  url: '',
+  playerType: 'hls' as 'hls' | 'native'
+})
+
+// 播放配置
+const playConfig = reactive({
+  autoplay: false,
+  muted: true
+})
+
+// 当前播放状态
+const currentSrc = ref('')
+const currentPlayerType = ref<'hls' | 'native'>('hls')
+
+// 日志
+interface LogItem {
+  time: string
+  type: 'info' | 'success' | 'error'
+  message: string
+}
+const logs = ref<LogItem[]>([])
+
+function addLog(message: string, type: LogItem['type'] = 'info') {
+  const time = new Date().toLocaleTimeString()
+  logs.value.unshift({ time, type, message })
+  if (logs.value.length > 100) {
+    logs.value.pop()
+  }
+}
+
+// 播放 URL
+function playUrl() {
+  if (!urlConfig.url) {
+    ElMessage.warning('请输入视频地址')
+    return
+  }
+  currentSrc.value = urlConfig.url
+  currentPlayerType.value = urlConfig.playerType
+  addLog(`播放 URL: ${urlConfig.url}`, 'success')
+}
+
+// 播放控制
+function handlePlay() {
+  playerRef.value?.play()
+  addLog('播放', 'info')
+}
+
+function handlePause() {
+  playerRef.value?.pause()
+  addLog('暂停', 'info')
+}
+
+function handleStop() {
+  playerRef.value?.stop()
+  addLog('停止', 'info')
+}
+
+function handleScreenshot() {
+  playerRef.value?.screenshot()
+  addLog('截图', 'info')
+}
+
+function handleFullscreen() {
+  playerRef.value?.fullscreen()
+  addLog('全屏', 'info')
+}
+
+// 事件处理
+function onPlay() {
+  addLog('视频开始播放', 'success')
+}
+
+function onPause() {
+  addLog('视频已暂停', 'info')
+}
+
+function onLoaded() {
+  addLog('视频加载完成', 'success')
+}
+
+function onError(error: any) {
+  addLog(`播放错误: ${JSON.stringify(error)}`, 'error')
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+.config-section {
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.player-section {
+  height: 500px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: #000;
+
+  .player-placeholder {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+
+    p {
+      margin-top: 15px;
+      font-size: 14px;
+    }
+  }
+}
+
+.control-section {
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.status-section {
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.log-section {
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  .log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+
+    h4 {
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+
+  .log-content {
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: #fafafa;
+    border-radius: 4px;
+    padding: 10px;
+  }
+
+  .log-item {
+    font-size: 12px;
+    padding: 4px 0;
+    border-bottom: 1px solid #eee;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .time {
+      color: #999;
+      margin-right: 10px;
+    }
+
+    &.success .message {
+      color: #67c23a;
+    }
+
+    &.error .message {
+      color: #f56c6c;
+    }
+  }
+
+  .log-empty {
+    text-align: center;
+    color: #999;
+    font-size: 12px;
+    padding: 20px 0;
+  }
+}
+</style>

src/views/demo/rtsp-stream.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="page-container">
+    <div class="page-header">
+      <span class="title">RTSP 流播放</span>
+    </div>
+
+    <!-- 配置区域 -->
+    <div class="config-section">
+      <el-form label-width="120px">
+        <el-form-item label="RTSP 地址">
+          <el-input
+            v-model="rtspConfig.rtspUrl"
+            placeholder="rtsp://username:password@ip:port/stream"
+            style="width: 600px"
+          />
+        </el-form-item>
+        <el-form-item label="转换服务地址">
+          <el-input v-model="rtspConfig.proxyUrl" placeholder="http://localhost:8080/stream" style="width: 400px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="playRtsp">播放</el-button>
+        </el-form-item>
+        <el-alert type="info" :closable="false" style="margin-top: 10px">
+          RTSP 流需要通过服务端转换为 HLS/WebRTC 后才能在浏览器播放
+        </el-alert>
+      </el-form>
+    </div>
+
+    <!-- 播放器区域 -->
+    <div class="player-section">
+      <div v-if="!currentSrc" class="player-placeholder">
+        <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+        <p>请输入 RTSP 转换服务地址并点击播放</p>
+      </div>
+      <VideoPlayer
+        v-else
+        ref="playerRef"
+        player-type="hls"
+        :src="currentSrc"
+        :autoplay="playConfig.autoplay"
+        :muted="playConfig.muted"
+        :controls="true"
+        @play="onPlay"
+        @pause="onPause"
+        @error="onError"
+        @loadedmetadata="onLoaded"
+      />
+    </div>
+
+    <!-- 播放控制 -->
+    <div class="control-section">
+      <el-space wrap>
+        <el-button type="primary" @click="handlePlay">播放</el-button>
+        <el-button @click="handlePause">暂停</el-button>
+        <el-button type="danger" @click="handleStop">停止</el-button>
+        <el-button @click="handleScreenshot">截图</el-button>
+        <el-button @click="handleFullscreen">全屏</el-button>
+
+        <el-divider direction="vertical" />
+
+        <el-switch v-model="playConfig.muted" active-text="静音" inactive-text="有声" />
+        <el-switch v-model="playConfig.autoplay" active-text="自动播放" inactive-text="手动" />
+      </el-space>
+    </div>
+
+    <!-- 当前状态 -->
+    <div class="status-section">
+      <el-descriptions title="当前状态" :column="2" border>
+        <el-descriptions-item label="RTSP 地址">
+          <el-text truncated style="max-width: 400px">{{ rtspConfig.rtspUrl || '-' }}</el-text>
+        </el-descriptions-item>
+        <el-descriptions-item label="转换服务地址">
+          <el-text truncated style="max-width: 400px">{{ currentSrc || '-' }}</el-text>
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+
+    <!-- 日志区域 -->
+    <div class="log-section">
+      <div class="log-header">
+        <h4>事件日志</h4>
+        <el-button size="small" @click="logs = []">清空</el-button>
+      </div>
+      <div class="log-content">
+        <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
+          <span class="time">{{ log.time }}</span>
+          <span class="message">{{ log.message }}</span>
+        </div>
+        <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { VideoPlay } from '@element-plus/icons-vue'
+import VideoPlayer from '@/components/VideoPlayer.vue'
+
+const playerRef = ref<InstanceType<typeof VideoPlayer>>()
+
+// RTSP 配置
+const rtspConfig = reactive({
+  rtspUrl: '',
+  proxyUrl: ''
+})
+
+// 播放配置
+const playConfig = reactive({
+  autoplay: false,
+  muted: true
+})
+
+// 当前播放状态
+const currentSrc = ref('')
+
+// 日志
+interface LogItem {
+  time: string
+  type: 'info' | 'success' | 'error'
+  message: string
+}
+const logs = ref<LogItem[]>([])
+
+function addLog(message: string, type: LogItem['type'] = 'info') {
+  const time = new Date().toLocaleTimeString()
+  logs.value.unshift({ time, type, message })
+  if (logs.value.length > 100) {
+    logs.value.pop()
+  }
+}
+
+// 播放 RTSP
+function playRtsp() {
+  if (!rtspConfig.proxyUrl) {
+    ElMessage.warning('请输入转换服务地址')
+    return
+  }
+  currentSrc.value = rtspConfig.proxyUrl
+  addLog(`播放 RTSP (via proxy): ${rtspConfig.proxyUrl}`, 'success')
+}
+
+// 播放控制
+function handlePlay() {
+  playerRef.value?.play()
+  addLog('播放', 'info')
+}
+
+function handlePause() {
+  playerRef.value?.pause()
+  addLog('暂停', 'info')
+}
+
+function handleStop() {
+  playerRef.value?.stop()
+  addLog('停止', 'info')
+}
+
+function handleScreenshot() {
+  playerRef.value?.screenshot()
+  addLog('截图', 'info')
+}
+
+function handleFullscreen() {
+  playerRef.value?.fullscreen()
+  addLog('全屏', 'info')
+}
+
+// 事件处理
+function onPlay() {
+  addLog('视频开始播放', 'success')
+}
+
+function onPause() {
+  addLog('视频已暂停', 'info')
+}
+
+function onLoaded() {
+  addLog('视频加载完成', 'success')
+}
+
+function onError(error: any) {
+  addLog(`播放错误: ${JSON.stringify(error)}`, 'error')
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+.config-section {
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.player-section {
+  height: 500px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: #000;
+
+  .player-placeholder {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+
+    p {
+      margin-top: 15px;
+      font-size: 14px;
+    }
+  }
+}
+
+.control-section {
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.status-section {
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.log-section {
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  .log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+
+    h4 {
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+
+  .log-content {
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: #fafafa;
+    border-radius: 4px;
+    padding: 10px;
+  }
+
+  .log-item {
+    font-size: 12px;
+    padding: 4px 0;
+    border-bottom: 1px solid #eee;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .time {
+      color: #999;
+      margin-right: 10px;
+    }
+
+    &.success .message {
+      color: #67c23a;
+    }
+
+    &.error .message {
+      color: #f56c6c;
+    }
+  }
+
+  .log-empty {
+    text-align: center;
+    color: #999;
+    font-size: 12px;
+    padding: 20px 0;
+  }
+}
+</style>

src/views/demo/sample-videos.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="page-container">
+    <div class="page-header">
+      <span class="title">测试视频</span>
+    </div>
+
+    <!-- 配置区域 -->
+    <div class="config-section">
+      <el-form label-width="120px">
+        <el-form-item label="选择测试源">
+          <el-select v-model="sampleConfig.selected" style="width: 500px" placeholder="请选择测试视频">
+            <el-option-group v-for="group in sampleVideoGroups" :key="group.label" :label="group.label">
+              <el-option v-for="item in group.options" :key="item.url" :label="item.name" :value="item.url" />
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="playSample">播放测试视频</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 播放器区域 -->
+    <div class="player-section">
+      <div v-if="!currentSrc" class="player-placeholder">
+        <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
+        <p>请选择测试视频并点击播放</p>
+      </div>
+      <VideoPlayer
+        v-else
+        ref="playerRef"
+        player-type="hls"
+        :src="currentSrc"
+        :autoplay="playConfig.autoplay"
+        :muted="playConfig.muted"
+        :controls="true"
+        @play="onPlay"
+        @pause="onPause"
+        @error="onError"
+        @loadedmetadata="onLoaded"
+      />
+    </div>
+
+    <!-- 播放控制 -->
+    <div class="control-section">
+      <el-space wrap>
+        <el-button type="primary" @click="handlePlay">播放</el-button>
+        <el-button @click="handlePause">暂停</el-button>
+        <el-button type="danger" @click="handleStop">停止</el-button>
+        <el-button @click="handleScreenshot">截图</el-button>
+        <el-button @click="handleFullscreen">全屏</el-button>
+
+        <el-divider direction="vertical" />
+
+        <el-switch v-model="playConfig.muted" active-text="静音" inactive-text="有声" />
+        <el-switch v-model="playConfig.autoplay" active-text="自动播放" inactive-text="手动" />
+      </el-space>
+    </div>
+
+    <!-- 当前状态 -->
+    <div class="status-section">
+      <el-descriptions title="当前状态" :column="2" border>
+        <el-descriptions-item label="当前视频">{{ currentVideoName || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="视频地址">
+          <el-text truncated style="max-width: 600px">{{ currentSrc || '-' }}</el-text>
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+
+    <!-- 日志区域 -->
+    <div class="log-section">
+      <div class="log-header">
+        <h4>事件日志</h4>
+        <el-button size="small" @click="logs = []">清空</el-button>
+      </div>
+      <div class="log-content">
+        <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
+          <span class="time">{{ log.time }}</span>
+          <span class="message">{{ log.message }}</span>
+        </div>
+        <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { VideoPlay } from '@element-plus/icons-vue'
+import VideoPlayer from '@/components/VideoPlayer.vue'
+
+const playerRef = ref<InstanceType<typeof VideoPlayer>>()
+
+// 测试视频配置
+const sampleConfig = reactive({
+  selected: ''
+})
+
+// 播放配置
+const playConfig = reactive({
+  autoplay: false,
+  muted: true
+})
+
+// 当前播放状态
+const currentSrc = ref('')
+
+// 测试视频列表（分组）
+const sampleVideoGroups = [
+  {
+    label: '我的直播流 (Cloudflare Stream)',
+    options: [
+      {
+        name: '我的摄像头直播',
+        url: 'https://customer-pj89kn2ke2tcuh19.cloudflarestream.com/3c1ae1949e76f200feef94b8f7d093ca/manifest/video.m3u8'
+      }
+    ]
+  },
+  {
+    label: '公共测试源',
+    options: [
+      { name: 'Big Buck Bunny (HLS)', url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' },
+      { name: 'Sintel (HLS)', url: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8' },
+      {
+        name: 'Tears of Steel (HLS)',
+        url: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8'
+      },
+      {
+        name: 'Apple HLS 测试流',
+        url: 'https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8'
+      }
+    ]
+  }
+]
+
+// 所有视频列表（用于查找名称）
+const allVideos = sampleVideoGroups.flatMap((group) => group.options)
+
+// 当前视频名称
+const currentVideoName = computed(() => {
+  const video = allVideos.find((v) => v.url === currentSrc.value)
+  return video?.name || ''
+})
+
+// 日志
+interface LogItem {
+  time: string
+  type: 'info' | 'success' | 'error'
+  message: string
+}
+const logs = ref<LogItem[]>([])
+
+function addLog(message: string, type: LogItem['type'] = 'info') {
+  const time = new Date().toLocaleTimeString()
+  logs.value.unshift({ time, type, message })
+  if (logs.value.length > 100) {
+    logs.value.pop()
+  }
+}
+
+// 播放测试视频
+function playSample() {
+  if (!sampleConfig.selected) {
+    ElMessage.warning('请选择测试视频')
+    return
+  }
+  currentSrc.value = sampleConfig.selected
+  const video = allVideos.find((v) => v.url === sampleConfig.selected)
+  addLog(`播放测试视频: ${video?.name}`, 'success')
+}
+
+// 播放控制
+function handlePlay() {
+  playerRef.value?.play()
+  addLog('播放', 'info')
+}
+
+function handlePause() {
+  playerRef.value?.pause()
+  addLog('暂停', 'info')
+}
+
+function handleStop() {
+  playerRef.value?.stop()
+  addLog('停止', 'info')
+}
+
+function handleScreenshot() {
+  playerRef.value?.screenshot()
+  addLog('截图', 'info')
+}
+
+function handleFullscreen() {
+  playerRef.value?.fullscreen()
+  addLog('全屏', 'info')
+}
+
+// 事件处理
+function onPlay() {
+  addLog('视频开始播放', 'success')
+}
+
+function onPause() {
+  addLog('视频已暂停', 'info')
+}
+
+function onLoaded() {
+  addLog('视频加载完成', 'success')
+}
+
+function onError(error: any) {
+  addLog(`播放错误: ${JSON.stringify(error)}`, 'error')
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+
+.config-section {
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.player-section {
+  height: 500px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: #000;
+
+  .player-placeholder {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+
+    p {
+      margin-top: 15px;
+      font-size: 14px;
+    }
+  }
+}
+
+.control-section {
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.status-section {
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.log-section {
+  padding: 15px 20px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  .log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+
+    h4 {
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+
+  .log-content {
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: #fafafa;
+    border-radius: 4px;
+    padding: 10px;
+  }
+
+  .log-item {
+    font-size: 12px;
+    padding: 4px 0;
+    border-bottom: 1px solid #eee;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .time {
+      color: #999;
+      margin-right: 10px;
+    }
+
+    &.success .message {
+      color: #67c23a;
+    }
+
+    &.error .message {
+      color: #f56c6c;
+    }
+  }
+
+  .log-empty {
+    text-align: center;
+    color: #999;
+    font-size: 12px;
+    padding: 20px 0;
+  }
+}
+</style>