@sentinel-lab/video-vue-frame

@sentinel-lab/video-vue-frame

Vue 3 iframe 薄壳(L7 · 消费面)。Sentinel Video Player 的 Vue 接入方式——

只做技术:创建 iframe 播放器、把 props 桥接成命令、把 iframe 事件桥接成 Vue emits。 不含任何团队品牌 UI(团队 UI 在业务封装层 examples/team-video-vue,ADR-021)。 Vue 只做 iframe,不做 inline(ADR-002)。

用法

<script setup lang="ts">
import { ref } from 'vue'
import { VideoPlayerFrame } from '@sentinel-lab/video-vue-frame'
import type { PlayerError } from '@sentinel-lab/video-vue-frame'

const player = ref<InstanceType<typeof VideoPlayerFrame> | null>(null)

function onError(err: PlayerError) {
  console.warn(err.code, err.message)
}
</script>

<template>
  <VideoPlayerFrame
    ref="player"
    :source="'https://cdn.example.com/live.m3u8'"
    preset="homepage-preview"
    @ready="() => console.log('ready')"
    @error="onError"
  />
</template>

命令通过 template ref 下发:await player.value?.play() / pause() / seek(t) / setMuted() / setVolume() / setPlaybackRate() / setQuality() / reconnect() / destroy(),以及同步读数 getCurrentTime() / getDuration() 和逃生舱 getPlayerHandle()。

Props

source 必填,其余可选:autoplay muted loop controls interactive playsinline poster preset locale debug,加 URL 覆盖 origin / version (ADR-023,私有化 / 版本锁定 / 本地 dev 指向 embed-app dev server)。

布尔 prop 不传就是 undefined(不是 false),这样 preset 才能生效——比如 preset="homepage-preview" 会带上 muted: true,只要你没显式传 :muted="false" 覆盖它。

Emits

ready play pause ended timeUpdate volumeChange error autoplayBlocked reconnectStart reconnectSuccess reconnectFailed compatWarning(模板里用 kebab-case:@time-update 等)。

SSR(Nuxt)

组件自带客户端守卫:iframe 只在 onMounted 后创建,SSR 阶段渲染 #ssr-placeholder 插槽(默认黑底占位)。消费方无需再包 <ClientOnly>。

边界

• 不依赖 player-core / player-ui(那些在 iframe 内的 embed-app)
• 不直接 import xgplayer(薄壳不接触播放技术)
• 无团队品牌 UI

相关

• ADR-002(Vue 只做 iframe)· ADR-023(iframe URL 覆盖)
• packages/frame-core(host 侧通信内核,本包的底座)
• examples/team-video-vue(团队封装层,业务代码的真正入口)