Appearance
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>