@sentinel-lab/video-vue

Sentinel Video Player 的 Vue 3 inline 接入方式:直连播放内核,不走 iframe,首帧最快。

什么时候用它

| 你的场景 | 用哪个包 | |---|---| | Vue 项目,要最快首帧 / 最低开销 | 本包(inline) | | Vue 项目,要沙箱隔离、或宿主是 SSR 框架 | @sentinel-lab/video-vue-frame(iframe) | | React 项目 | @sentinel-lab/video-react / @sentinel-lab/video-react-frame | | CMS / Markdown 里嵌一段 | 静态 iframe URL(见 USER-GUIDE) |

inline 把播放内核打进你的产物(约 300KB gz,含 xgplayer + hls.js + flv.js); iframe 薄壳只有约 22KB,内核在 iframe 里。这是两者唯一的实质取舍。

安装

pnpm add @sentinel-lab/video-vue

peer:vue >= 3.5。

用法

<script setup lang="ts">
import { ref } from 'vue'
import { VideoPlayer, type PlayerError, type VideoPlayerExpose } from '@sentinel-lab/video-vue'
// ⚠️ 必须引一次:xgplayer 的控件/布局样式。少了它播放器能播,但控件是散的
import '@sentinel-lab/video-vue/style.css'

const player = ref<VideoPlayerExpose>()

function onReady(payload: { duration: number }) {
  console.log('时长', payload.duration)
}

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

<template>
  <div style="width: 100%; aspect-ratio: 16 / 9">
    <VideoPlayer
      ref="player"
      source="https://cdn.example.com/a.m3u8"
      muted
      playsinline
      @ready="onReady"
      @error="onError"
    />
  </div>
</template>

命令走 template ref:

await player.value?.play()
player.value?.seek(30)
player.value?.setPlaybackRate(1.5)

不需要在 vite.config.ts 里配 isCustomElement —— 覆盖层是运行时渲染的, Vue 编译器不参与。

边界

• 只做技术:播放、事件、命令、容错。团队品牌 UI 归业务封装层(ADR-021)
• 不发业务 HTTP 请求;认证只接受签名 URL(ADR-022)
• 不做 DASH / PlayReady(ADR-014)

相关

• 使用手册:docs/USER-GUIDE.md
• 为什么现在有 Vue inline:docs/adr/ADR-052-vue-inline-open-the-door.md