直播播放器组件
# 直播播放器组件
live-player 组件用于播放实时音视频流，通常用于直播拉流场景。支持多种音视频格式，包括 flv 和 rtmp 等。不同平台对 live-player 组件的支持有所不同，在使用时需要确保相应的权限及审核通过。
# 1. 什么是 live-player 组件？
live-player 组件用于播放实时音视频流，支持直播和实时通话模式。开发者可以通过该组件轻松集成视频直播功能，并结合相关事件和属性来实现直播的播放控制、状态监听和网络监控等。
使用场景
- 视频直播：通过拉取直播流，展示实时音视频内容。
- 视频通话：在 RTC 模式下实现低延迟的实时音视频通话。
- 互动直播：结合弹幕和互动功能，实现互动视频直播。
# 2. live-player 组件的常用属性
live-player 组件提供了多种属性，帮助开发者控制直播拉流的播放行为、显示效果以及交互体验。以下是常用属性的详细说明及使用示例。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
src | String | 无 | 实时音视频流地址，支持 flv、rtmp 等格式 |
mode | String | live | 播放模式，支持 live（直播）和 RTC（实时通话，时延更低） |
autoplay | Boolean | false | 是否自动播放视频流 |
muted | Boolean | false | 是否静音播放 |
orientation | String | vertical | 视频画面方向，支持 vertical（竖直）和 horizontal（水平） |
object-fit | String | contain | 视频填充模式，支持 contain（包含）、fillCrop（填充裁剪） |
background-mute | Boolean | false | 是否在进入后台时静音 |
sound-mode | String | speaker | 声音输出方式，支持 speaker（扬声器）和 ear（听筒） |
min-cache | Number | 1 | 最小缓冲区，单位为秒 |
max-cache | Number | 3 | 最大缓冲区，单位为秒 |
picture-in-picture-mode | String/Array | [] | 设置小窗模式，支持 push、pop |
@statechange | EventHandle | 无 | 播放状态变化事件，返回 code |
@netstatus | EventHandle | 无 | 网络状态通知事件，返回 info |
@fullscreenchange | EventHandle | 无 | 全屏状态变化事件，返回 fullScreen 和 direction |
@audiovolumenotify | EventHandle | 无 | 音量大小通知事件 |
@enterpictureinpicture | EventHandle | 无 | 播放器进入小窗模式 |
@leavepictureinpicture | EventHandle | 无 | 播放器退出小窗模式 |
# 2.1 视频流地址 src
- 说明：指定播放的视频流地址，支持
flv、rtmp等常见格式。 - 类型：
String - 默认值：无
<template>
<view>
<!-- 播放直播视频流 -->
<live-player :src="liveSrc" autoplay style="width: 100%; height: 300px;" />
</view>
</template>
<script setup>
const liveSrc = 'https://example.com/live-stream.flv';
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.2 播放模式 mode
- 说明：设置直播模式或实时通话模式。
live为直播模式，RTC为实时通话模式，延迟较低。 - 类型：
String - 默认值：
live
<template>
<view>
<!-- 设置为实时通话模式 -->
<live-player :src="liveSrc" mode="RTC" autoplay style="width: 100%; height: 300px;" />
</view>
</template>
<script setup>
const liveSrc = 'https://example.com/live-stream.flv';
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.3 自动播放 autoplay
- 说明：是否在页面加载时自动播放视频流。
- 类型：
Boolean - 默认值：
false
<template>
<view>
<!-- 自动播放直播视频 -->
<live-player :src="liveSrc" autoplay style="width: 100%; height: 300px;" />
</view>
</template>
<script setup>
const liveSrc = 'https://example.com/live-stream.flv';
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.4 静音播放 muted
- 说明：是否静音播放视频流。
- 类型：
Boolean - 默认值：
false
<template>
<view>
<!-- 静音播放直播视频 -->
<live-player :src="liveSrc" :muted="true" autoplay style="width: 100%; height: 300px;" />
</view>
</template>
<script setup>
const liveSrc = 'https://example.com/live-stream.flv';
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.5 视频方向 orientation
- 说明：设置视频画面方向，支持
vertical（竖直）和horizontal（水平）。 - 类型：
String - 默认值：
vertical
<template>
<view>
<!-- 水平播放直播视频 -->
<live-player :src="liveSrc" orientation="horizontal" autoplay style="width: 100%; height: 300px;" />
</view>
</template>
<script setup>
const liveSrc = 'https://example.com/live-stream.flv';
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3. 直播播放与事件监听
以下案例展示了如何使用 live-player 组件进行直播播放，并通过事件监听实现播放状态监控和错误处理。
<template>
<view>
<!-- 播放直播视频，并监听播放状态变化 -->
<live-player id="livePlayer" :src="liveSrc" autoplay @statechange="handleStateChange" @error="handleError" style="width: 100%; height: 300px;" />
</view>
</template>
<script setup>
const liveSrc = 'https://example.com/live-stream.flv';
// 处理播放状态变化
const handleStateChange = (e) => {
console.log('直播状态变化:', e.detail.code);
};
// 处理播放错误
const handleError = (e) => {
console.error('直播播放错误:', e.detail.errMsg);
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
编辑此页 (opens new window)