VideoPlayer 视频播放器

VideoPlayer 视频播放器 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { VideoPlayer } from "@/components/page/video-player";

const demoProps = { url: "/media/demo.mp4" };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <VideoPlayer v-bind="demoProps"></VideoPlayer>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import {
  VideoPlayer,
  VideoPlayerViewer,
  createVideoViewer,
} from "@/components/page/video-player";

Props

参数	说明	类型	默认值	必填
url	配置 url。	string	-	是
poster	配置 poster。	string	""	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
playerExpose	暴露 playerExpose 给外部调用。	() => playerRef.value

Module API

名称	说明	类型
VideoPlayer	导出 VideoPlayer 供业务侧复用。	useInstall(index)
createVideoViewer	创建视频播放器预览	(options: { url: string; poster?: string; show?: boolean }) => unknown

Types

PlayerProps

导出 PlayerProps 供业务侧复用。

字段	说明	类型	默认值	必填
url	配置 url。	string	-	是
poster	配置 poster。	string	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。