VideoPlayer（inline）

VideoPlayer 直接在 Vue 页面中创建播放器，适合与宿主状态和布局紧密协作的场景。需要 iframe 隔离时，请使用 VideoPlayerFrame；静态 iframe URL 的接入规则仍在主文档。

<script setup lang="ts">
import { VideoPlayer, type VideoPlayerExpose } from '@sentinel-lab/video-vue'
import '@sentinel-lab/video-vue/style.css'
import { ref } from 'vue'

const source = 'https://media.w3.org/2010/05/sintel/trailer.mp4'
const player = ref<VideoPlayerExpose>()
const events = ref<string[]>([])
const mounted = ref(true)
const muted = ref(true)
const volume = ref(1)

function appendEvent(event: { event: string }) {
  events.value = [event.event, ...events.value].slice(0, 6)
}

function toggleMuted() {
  muted.value = !muted.value
  player.value?.setMuted(muted.value)
}

function setVolume(event: Event) {
  const target = event.currentTarget as HTMLInputElement
  volume.value = Number(target.value)
  player.value?.setVolume(volume.value)
}

function destroy() {
  player.value?.destroy()
  mounted.value = false
}
</script>

<template>
  <section aria-label="播放器演示控制台">
    <VideoPlayer
      v-if="mounted"
      ref="player"
      :muted="muted"
      :source="source"
      :volume="volume"
      controls
      playsinline
      style="aspect-ratio: 16 / 9; max-width: 720px"
      @player-event="appendEvent"
    />
    <p>
      <button type="button" @click="player?.play()">播放</button>
      <button type="button" @click="player?.pause()">暂停</button>
      <button type="button" @click="player?.enterFullscreen()">全屏</button>
      <button type="button" @click="toggleMuted">{{ muted ? '取消静音' : '静音' }}</button>
      <label>
        音量
        <input :value="volume" type="range" min="0" max="1" step="0.1" @input="setVolume" />
      </label>
      <button type="button" @click="destroy">销毁</button>
      <button type="button" @click="mounted = true">重建</button>
    </p>
    <output aria-live="polite">{{ events.length ? events.join(' · ') : '等待公开事件回调' }}</output>
  </section>
</template>

预览、可复制代码和显示代码来自同一个 SFC。示例使用公开 MP4 样片；生产中请替换为自己的签名媒体 URL。清晰度和字幕菜单应由 ready 回调返回的实际轨道生成；这个单码率、无字幕样片不会伪造它们。

VideoPlayer（inline） ​

VideoPlayer（inline）