Vanilla 简化演示（TypeScript）

纯 TypeScript 实现，无框架依赖。位于 docs/demo/typescript/components/unified.ts。

核心功能：

• 多源切换 - MP4 / HLS 等格式
• 基础控制 - 播放、暂停、全屏
• 状态监听 - 实时显示
• 事件日志 - 播放器事件

Vanilla TypeScript 演示

createPlayer + 插件系统 + 事件日志

import { createUnifiedDemo } from './unified'

// 挂载到 DOM 容器
const container = document.getElementById('app')!
const destroy = createUnifiedDemo(container)

// 页面卸载时清理
window.addEventListener('beforeunload', destroy)

核心实现要点：

import {
  createPlayer,
  PlaylistPlugin,
  AdPlugin,
  WatermarkPlugin,
  AnalyticsPlugin,
  HlsEngine,
  DashEngine,
  NativeEngine
} from '@iunify/player'
import {
  DEMO_PLAYLIST,
  DEMO_AD_CONFIG,
  DEMO_PLAYLIST_OPTIONS,
  DEMO_WATERMARK_CONFIG,
  DEMO_WATCH_EVENTS
} from '../config/unified'

export function createUnifiedDemo(container: HTMLElement) {
  // 1. 创建播放器
  const player = createPlayer()

  // 2. 注册引擎（按优先级）
  player.registerEngine(new HlsEngine())
  player.registerEngine(new DashEngine())
  player.registerEngine(new NativeEngine())

  // 3. 初始化插件
  const playlist = new PlaylistPlugin({ playlist: DEMO_PLAYLIST, ...DEMO_PLAYLIST_OPTIONS })
  const watermark = new WatermarkPlugin(DEMO_WATERMARK_CONFIG)
  const analytics = new AnalyticsPlugin({
    onPlay: () => log('▶ play'),
    onPause: () => log('⏸ pause')
  })

  player.use(playlist)
  player.use(watermark)
  player.use(analytics)

  // 4. 广告插件（切集时重置）
  let adDispose: (() => void) | null = null
  const attachAd = () => {
    adDispose?.()
    adDispose = player.use(new AdPlugin(DEMO_AD_CONFIG))
  }
  player.on('sourcechange', attachAd)
  attachAd()

  // 5. 设置初始源
  player.setSource(DEMO_PLAYLIST[0])

  // 6. 返回清理函数
  return () => player.destroy()
}

完整实现：docs/demo/typescript/components/unified.ts