视频播放组件
# 视频播放组件
video
组件是 Uniapp 中用于播放视频的核心组件,支持多种平台,能够展示本地视频、网络视频,并提供多种控制属性和事件。通过该组件,开发者可以轻松实现视频播放、控制等功能,适用于多种视频播放场景,如在线视频、直播、视频广告等。
# 1. 什么是 video
组件?
video
组件用于在页面中播放视频资源,支持本地视频和网络视频文件,并提供丰富的播放控制属性。开发者可以通过该组件实现自动播放、静音播放、循环播放等功能,还可以控制视频的进度、全屏模式及其他高级交互功能。
使用场景
- 在线视频播放:用于在应用中嵌入在线视频播放功能。
- 视频广告展示:播放广告视频或插入前贴广告。
- 教育视频课程:提供完整的教学视频播放功能,支持弹幕、播放进度控制等。
- 直播功能:结合流媒体协议,实现实时视频直播。
# 2. video
组件的常用属性
video
组件提供了多种属性,用于控制视频的播放行为、界面显示以及交互体验。以下是常用属性的详细说明及使用示例。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
src | String | 无 | 要播放的视频资源地址,支持本地和网络路径 |
autoplay | Boolean | false | 是否自动播放视频 |
loop | Boolean | false | 是否循环播放视频 |
muted | Boolean | false | 是否静音播放视频 |
controls | Boolean | true | 是否显示默认的播放控件,包括播放、暂停按钮及进度条 |
poster | String | 无 | 视频封面的图片地址 |
object-fit | String | contain | 视频大小与容器不一致时的显示方式,支持 contain 、fill 、cover |
show-fullscreen-btn | Boolean | true | 是否显示全屏按钮 |
show-play-btn | Boolean | true | 是否显示视频底部控制栏的播放按钮 |
show-center-play-btn | Boolean | true | 是否显示视频中间的播放按钮 |
enable-progress-gesture | Boolean | true | 是否开启手势控制进度 |
title | String | 无 | 视频标题,支持全屏时显示 |
is-live | Boolean | false | 是否是直播源 |
# 2.1 视频源 src
- 说明:指定视频资源的路径,支持本地视频或网络视频。
- 类型:
String
- 默认值:无
<template>
<view>
<video :src="videoSrc" controls style="width: 100%; height: 300px;"></video>
</view>
</template>
<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
</script>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 2.2 自动播放 autoplay
- 说明:是否在页面加载时自动播放视频。
- 类型:
Boolean
- 默认值:
false
<template>
<view>
<!-- 自动播放视频 -->
<video :src="videoSrc" :autoplay="true" controls style="width: 100%; height: 300px;"></video>
</view>
</template>
<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.3 循环播放 loop
- 说明:是否开启循环播放模式,播放结束后自动重新开始。
- 类型:
Boolean
- 默认值:
false
<template>
<view>
<!-- 循环播放视频 -->
<video :src="videoSrc" :loop="true" controls style="width: 100%; height: 300px;"></video>
</view>
</template>
<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.4 视频封面 poster
- 说明:指定视频的封面图片,视频加载前显示封面图,支持网络图片地址。
- 类型:
String
- 默认值:无
<template>
<view>
<!-- 显示封面图 -->
<video :src="videoSrc" :poster="posterImg" controls style="width: 100%; height: 300px;"></video>
</view>
</template>
<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
const posterImg = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/poster.png';
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 2.5 视频控制按钮 controls
- 说明:是否显示默认的视频播放控制按钮,包括播放/暂停、进度条等控件。
- 类型:
Boolean
- 默认值:
true
<template>
<view>
<!-- 隐藏默认控制按钮 -->
<video :src="videoSrc" :controls="false" style="width: 100%; height: 300px;"></video>
</view>
</template>
<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.6 视频事件监听 @play
, @pause
, @ended
- 说明:监听视频的播放、暂停和结束事件,获取视频播放状态并做相应处理。
- 类型:
EventHandle
<template>
<view>
<!-- 监听视频事件 -->
<video :src="videoSrc" controls @play="onPlay" @pause="onPause" @ended="onEnded" style="width: 100%; height: 300px;"></video>
</view>
</template>
<script setup>
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
const onPlay = () => {
console.log('视频开始播放');
};
const onPause = () => {
console.log('视频暂停');
};
const onEnded = () => {
console.log('视频播放结束');
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 3. 视频播放与弹幕功能
以下示案例展示了如何使用 video
组件,并结合弹幕功能,实现视频播放与互动弹幕展示。
<template>
<view>
<!-- 视频播放 -->
<video id="myVideo" :src="videoSrc" controls :danmu-list="danmuList" enable-danmu danmu-btn @error="onVideoError" style="width: 100%; height: 300px;"></video>
<!-- 弹幕输入 -->
<view class="danmu-input">
<input v-model="danmuValue" type="text" placeholder="输入弹幕内容" />
<button @click="sendDanmu">发送弹幕</button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const videoSrc = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
const danmuList = ref([
{ text: '第一秒弹幕', color: '#ff0000', time: 1 },
{ text: '第三秒弹幕', color: '#00ff00', time: 3 },
]);
const danmuValue = ref('');
// 发送弹幕
const sendDanmu = () => {
const videoContext = uni.createVideoContext('myVideo');
videoContext.sendDanmu({
text: danmuValue.value,
color: getRandomColor(),
});
danmuValue.value = '';
};
// 生成随机颜色
const getRandomColor = () => {
const rgb = [];
for (let i = 0; i < 3; i++) {
let color = Math.floor(Math.random() * 256).toString(16);
color = color.length === 1 ? '0' + color : color;
rgb.push(color);
}
return '#' + rgb.join('');
};
// 处理视频播放错误
const onVideoError = (e) => {
console.log('视频播放错误', e);
};
</script>
<style scoped>
.danmu-input {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
input {
flex: 1;
padding: 8px;
margin-right: 10px;
}
button {
padding: 8px 16px;
background-color: #007aff;
color: #fff;
border: none;
border-radius: 4px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
编辑此页 (opens new window)
上次更新: 2025/02/01, 02:18:15