Skip to content

VideoPlayerFrame(iframe)

VideoPlayerFrame 在 Vue 页面中使用 iframe 隔离播放器。预览只会在部署方提供合法的官方 HTTPS origin 后启用; 未配置时,SFC 代码仍可复制,页面不会假装存在可访问的线上播放器。

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

import { getPortalLinks } from '../portal-links'

const source = 'https://media.w3.org/2010/05/sintel/trailer.mp4'
const { embedOrigin } = getPortalLinks({
  VITE_SENTINEL_EMBED_ORIGIN: import.meta.env.VITE_SENTINEL_EMBED_ORIGIN,
})
</script>

<template>
  <p v-if="!embedOrigin" role="status">需要部署者提供官方 iframe origin,才能在这里预览。</p>
  <VideoPlayerFrame
    v-else
    :origin="embedOrigin"
    :source="source"
    controls
    muted
    playsinline
    style="aspect-ratio: 16 / 9; max-width: 720px"
  />
</template>