基础使用

本节覆盖播放器的日常操作：初始化、切源、播放控制与销毁。

初始化 Player

import { createPlayer, type PlayerOptions } from '@iunify/player'

const video = document.querySelector('#video') as HTMLVideoElement

const options: PlayerOptions = {
  autoplay: false,
  muted: true,
  loop: false,
  preload: 'metadata',
  volume: 0.8,
  playbackRate: 1
}

const player = createPlayer(video, options)

要点：

• createPlayer(videoEl, options?) 返回 Player 实例。
• options.src 可在初始化或稍后通过 setSource 赋值。
• 传入的 <video> 必须已在 DOM 中。

切换媒体源

await player.setSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
// 或者显式指定格式 / MIME
await player.setSource({ src: '/movie.mpd', format: 'dash', type: 'application/dash+xml' })

行为：

• 自动识别格式并依次尝试内置引擎，直到成功。
• 切源前会重置播放状态、加载状态、时间轴和错误信息。
• 失败时触发 sourcechange-failed 和可能的错误事件。

播放与暂停

await player.play()   // Promise 形式，便于捕获浏览器自动播放限制
player.pause()
player.toggle()       // 在 play/pause 间切换
player.seek(30)       // 跳转到 30 秒
player.setVolume(0.5)
player.setMuted(true)
player.setPlaybackRate(1.5)
player.setLoop(true)

全屏

await player.enterFullscreen()
await player.exitFullscreen()
await player.toggleFullscreen()

销毁

player.destroy()

destroy 会：

• 解绑所有事件。
• 销毁当前引擎与已注册的引擎。
• 销毁已启用的插件。
• 移除媒体 src 并 load() 以释放资源。

如果需要重新使用同一个 <video>，请重新调用 createPlayer(videoEl)。

生命周期注意事项

• 在 React / Vue 中应在组件挂载后创建，在卸载时调用 destroy()（见 Demo 页）。
• 多次调用 play 会等待前一次的播放请求完成；若中途暂停，会取消挂起的播放 Promise。
• 切源过程中若引擎附加失败，会继续尝试下一引擎；全部失败时产生致命错误。