视频组件 video
uni-app 的 video 组件是内置的富媒体组件，开箱即用，支持播放控制、弹幕、全屏等功能。相比音频 API，视频组件的配置更加简单，大多数功能通过属性即可控制，无需额外的 API 调用。
video 组件基本使用
最简示例
<template>
<video
src="https://example.com/video.mp4"
class="w-full"
controls
/>
</template>
vue
常用属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
src | string | - | 视频资源地址 |
controls | boolean | true | 显示播放控件 |
autoplay | boolean | false | 自动播放 |
loop | boolean | false | 循环播放 |
muted | boolean | false | 静音播放 |
objectFit | string | contain | 视频填充模式 |
enable-danmu | boolean | false | 启用弹幕 |
danmu-list | array | 弹幕数据 | |
show-fullscreen-btn | boolean | true | 显示全屏按钮 |
show-play-btn | boolean | true | 显示播放按钮 |
show-center-play-btn | boolean | true | 显示中间播放按钮 |
objectFit 填充模式
| 值 | 效果 |
|---|---|
contain | 保持比例，完整显示（可能有黑边） |
cover | 保持比例，覆盖容器（可能裁切） |
fill | 拉伸填满容器（可能变形） |
建议使用 cover 实现视频撑满效果：
<video src="..." object-fit="cover" class="w-full" />
vue
播放控件控制
controls 属性控制默认播放器控件的显示与隐藏。设置为 true 时，播放器自带以下功能：
- 播放/暂停按钮
- 进度条
- 时间显示
- 全屏按钮
- 音量控制
- 弹幕开关（如启用）
自定义控件
如需自定义播放控件（自定义按钮位置、样式），需要：
- 设置
controls="false"隐藏默认控件 - 使用
uni.createVideoContext(videoId)获取视频上下文 - 通过上下文方法控制播放：
const videoContext = uni.createVideoContext('myVideo')
videoContext.play() // 播放
videoContext.pause() // 暂停
videoContext.seek(30) // 跳转到 30 秒
videoContext.stop() // 停止
videoContext.requestFullScreen() // 全屏
javascript
弹幕功能
启用弹幕
<template>
<video
id="myVideo"
src="..."
:enable-danmu="true"
:danmu-list="danmuList"
controls
class="w-full"
/>
</template>
<script setup>
import { ref } from 'vue'
const danmuList = ref([
{ text: '第一条弹幕', color: '#ff0000', time: 3 },
{ text: '第二条弹幕', color: '#00ff00', time: 5 }
])
</script>
vue
发送弹幕
const videoContext = uni.createVideoContext('myVideo')
function sendDanmu() {
videoContext.sendDanmu({
text: '新的弹幕',
color: '#ffffff'
})
}
javascript
弹幕数据格式：
interface Danmu {
text: string // 弹幕文字
color: string // 弹幕颜色（十六进制）
time: number // 出现时间（秒）
}
typescript
事件回调
| 事件 | 说明 |
|---|---|
@play | 开始播放 |
@pause | 暂停 |
@ended | 播放结束 |
@timeupdate | 播放进度更新 |
@fullscreenchange | 全屏状态变化 |
@error | 播放错误 |
@waiting | 加载中 |
@loadedmetadata | 元数据加载完成 |
<video
src="..."
@play="onPlay"
@pause="onPause"
@ended="onEnded"
@timeupdate="onTimeUpdate"
@error="onError"
/>
vue
video 组件 vs createVideoContext
| 对比项 | video 属性 | createVideoContext |
|---|---|---|
| 使用方式 | 模板属性配置 | JS API 调用 |
| 适用场景 | 使用默认播放器 | 自定义播放器 |
| 学习成本 | 低 | 中 |
| 灵活性 | 一般（属性配置） | 高（完全自定义） |
大多数知识付费场景使用 video 组件的属性配置即可满足需求。只有在需要完全自定义播放器 UI 时才需要使用 createVideoContext。
知识付费中的视频页面
视频课程详情页的典型结构：
视频课程页面
├── 视频播放器（video 组件）
├── 课程信息（标题、作者、购买人数）
├── 章节列表（横向滚动选择）
├── 课程介绍（图文内容）
├── 评论区（复用评论模板）
└── 底部操作栏（收藏、分享、购买）
text
视频组件在知识付费项目中是使用频率最高的富媒体组件，掌握其属性配置和事件处理是前端开发的必备技能。
↑