@linker-design-plus/mpegtsplayer 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.en-US.md +227 -227
- package/README.md +226 -226
- package/dist/index.js +1 -1
- package/dist/index.mjs +253 -0
- package/package.json +49 -47
- package/src/MpegtsPlayer.less +22 -22
package/README.md
CHANGED
|
@@ -1,227 +1,227 @@
|
|
|
1
|
-
# @linker-design-plus/mpegtsplayer
|
|
2
|
-
|
|
3
|
-
一个基于 mpegts.js 的 Vue 3 视频播放器组件，用于播放 FLV 流媒体，具有增强的功能和控件。
|
|
4
|
-
|
|
5
|
-
## 功能特性
|
|
6
|
-
|
|
7
|
-
- 🎥 **FLV 流媒体支持**：使用 mpegts.js 播放 FLV 视频流
|
|
8
|
-
- 🔄 **自动重载**：连接丢失时自动重新加载视频流
|
|
9
|
-
- 👁️ **可见性处理**：处理标签页可见性变化并自动刷新
|
|
10
|
-
- ⚙️ **自定义控件**：切换原生视频控件的显示/隐藏
|
|
11
|
-
- 📡 **直播流优化**：针对直播流进行了低延迟优化
|
|
12
|
-
- 🎯 **错误处理**：全面的错误处理和事件报告
|
|
13
|
-
- 📱 **响应式设计**：适应容器尺寸变化
|
|
14
|
-
- 🎨 **样式化组件**：内置加载指示器和简洁的界面
|
|
15
|
-
|
|
16
|
-
## 安装
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
# 推荐使用 pnpm
|
|
20
|
-
pnpm add @linker-design-plus/mpegtsplayer
|
|
21
|
-
|
|
22
|
-
# 使用 npm
|
|
23
|
-
npm install @linker-design-plus/mpegtsplayer
|
|
24
|
-
|
|
25
|
-
# 使用 yarn
|
|
26
|
-
yarn add @linker-design-plus/mpegtsplayer
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## 使用方法
|
|
30
|
-
|
|
31
|
-
### 引入组件
|
|
32
|
-
|
|
33
|
-
```js
|
|
34
|
-
// 在 main.js 或入口文件中
|
|
35
|
-
import { createApp } from 'vue';
|
|
36
|
-
import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
|
|
37
|
-
|
|
38
|
-
const app = createApp(App);
|
|
39
|
-
app.component('MpegtsPlayer', MpegtsPlayer);
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
或者在组件中局部使用：
|
|
43
|
-
|
|
44
|
-
```vue
|
|
45
|
-
<script setup>
|
|
46
|
-
import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
|
|
47
|
-
</script>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### 基础用法
|
|
51
|
-
|
|
52
|
-
```vue
|
|
53
|
-
<template>
|
|
54
|
-
<div style="width: 800px; height: 450px;">
|
|
55
|
-
<MpegtsPlayer
|
|
56
|
-
video-url="http://example.com/stream.flv"
|
|
57
|
-
:is-live="true"
|
|
58
|
-
:controls="true"
|
|
59
|
-
/>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
### 直播流配置
|
|
65
|
-
|
|
66
|
-
```vue
|
|
67
|
-
<template>
|
|
68
|
-
<div style="width: 100%; height: 100%;">
|
|
69
|
-
<MpegtsPlayer
|
|
70
|
-
video-url="http://example.com/live-stream.flv"
|
|
71
|
-
:is-live="true"
|
|
72
|
-
:auto-reload="true"
|
|
73
|
-
:auto-visibility-change-refresh="true"
|
|
74
|
-
:close-visibility-change-listener="false"
|
|
75
|
-
:controls="true"
|
|
76
|
-
/>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
### 点播视频配置
|
|
82
|
-
|
|
83
|
-
```vue
|
|
84
|
-
<template>
|
|
85
|
-
<div style="width: 800px; height: 450px;">
|
|
86
|
-
<MpegtsPlayer
|
|
87
|
-
video-url="http://example.com/video.flv"
|
|
88
|
-
:is-live="false"
|
|
89
|
-
:controls="true"
|
|
90
|
-
:current-time="0"
|
|
91
|
-
/>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
## API
|
|
97
|
-
|
|
98
|
-
### Props
|
|
99
|
-
|
|
100
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
101
|
-
|------|------|------|--------|
|
|
102
|
-
| videoUrl | 视频流 URL | string | "" |
|
|
103
|
-
| closeVisibilityChangeListener | 关闭可见性变化监听器 | boolean | false |
|
|
104
|
-
| autoVisibilityChangeRefresh | 可见性变化时自动刷新 | boolean | false |
|
|
105
|
-
| autoReload | 错误时自动重载 | boolean | false |
|
|
106
|
-
| isLive | 是否为直播流 | boolean | true |
|
|
107
|
-
| controls | 显示原生控件 | boolean | false |
|
|
108
|
-
| currentTime | 当前播放时间 | number | 0 |
|
|
109
|
-
| stallTimeout | 卡顿检测超时时间（毫秒） | number | 5000 |
|
|
110
|
-
|
|
111
|
-
### Events
|
|
112
|
-
|
|
113
|
-
| 事件 | 说明 | 回调参数 |
|
|
114
|
-
|------|------|----------|
|
|
115
|
-
| loadError | 加载错误 | errorInfo: any |
|
|
116
|
-
| playSuccess | 播放成功 | - |
|
|
117
|
-
| loadComplete | 加载完成 | - |
|
|
118
|
-
| visibilitychange | 可见性变化 | visibilityState: string |
|
|
119
|
-
| timeupdate | 时间更新 | time: number |
|
|
120
|
-
| playEnded | 播放结束 | - |
|
|
121
|
-
| playLoading | 播放加载中 | - |
|
|
122
|
-
|
|
123
|
-
### 方法 (通过 ref 暴露)
|
|
124
|
-
|
|
125
|
-
| 方法 | 说明 | 参数 |
|
|
126
|
-
|------|------|------|
|
|
127
|
-
| start() | 开始播放 | - |
|
|
128
|
-
| pause() | 暂停播放 | - |
|
|
129
|
-
| destroy() | 销毁播放器 | - |
|
|
130
|
-
| reload() | 重新加载播放器 | - |
|
|
131
|
-
|
|
132
|
-
### 访问方法示例
|
|
133
|
-
|
|
134
|
-
```vue
|
|
135
|
-
<template>
|
|
136
|
-
<div>
|
|
137
|
-
<MpegtsPlayer
|
|
138
|
-
ref="playerRef"
|
|
139
|
-
video-url="http://example.com/stream.flv"
|
|
140
|
-
:is-live="true"
|
|
141
|
-
/>
|
|
142
|
-
<button @click="play">播放</button>
|
|
143
|
-
<button @click="pause">暂停</button>
|
|
144
|
-
<button @click="reload">重新加载</button>
|
|
145
|
-
</div>
|
|
146
|
-
</template>
|
|
147
|
-
|
|
148
|
-
<script setup>
|
|
149
|
-
import { ref } from 'vue';
|
|
150
|
-
import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
|
|
151
|
-
|
|
152
|
-
const playerRef = ref(null);
|
|
153
|
-
|
|
154
|
-
const play = () => {
|
|
155
|
-
playerRef.value.start();
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
const pause = () => {
|
|
159
|
-
playerRef.value.pause();
|
|
160
|
-
};
|
|
161
|
-
|
|
162
|
-
const reload = () => {
|
|
163
|
-
playerRef.value.reload();
|
|
164
|
-
};
|
|
165
|
-
</script>
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
## 功能描述
|
|
169
|
-
|
|
170
|
-
### 自动重连
|
|
171
|
-
当启用 `autoReload` 时，如果连接丢失，播放器将自动尝试重新连接到流媒体，最多尝试 2 次后发出错误事件。
|
|
172
|
-
|
|
173
|
-
### 可见性处理
|
|
174
|
-
当浏览器标签页在隐藏后重新可见时，播放器可以自动重新加载，由 `autoVisibilityChangeRefresh` 属性控制。
|
|
175
|
-
|
|
176
|
-
### 控件自定义
|
|
177
|
-
可以使用 `controls` 属性切换原生视频控件的显示/隐藏。禁用时，可以使用暴露的方法实现自定义控件。
|
|
178
|
-
|
|
179
|
-
### 直播流优化
|
|
180
|
-
针对直播流的优化设置包括：
|
|
181
|
-
- 禁用 stash 缓冲区以降低延迟
|
|
182
|
-
- 禁用懒加载以实现连续流媒体播放
|
|
183
|
-
- 启用实时缓冲区延迟追踪以实现流畅播放
|
|
184
|
-
|
|
185
|
-
## 样式自定义
|
|
186
|
-
|
|
187
|
-
组件包含内置样式。您可以通过以下类名覆盖默认样式：
|
|
188
|
-
|
|
189
|
-
```css
|
|
190
|
-
.mainContainer {
|
|
191
|
-
/* 容器样式 */
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.video-container {
|
|
195
|
-
/* 视频元素样式 */
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.meta-data-loading {
|
|
199
|
-
/* 加载旋转图标样式 */
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.no-control {
|
|
203
|
-
/* 控件禁用时应用的类 */
|
|
204
|
-
}
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
## 依赖
|
|
208
|
-
|
|
209
|
-
- Vue 3.1.0+
|
|
210
|
-
- mpegts.js 1.7.3
|
|
211
|
-
- @arco-design/web-vue 2.56.3
|
|
212
|
-
|
|
213
|
-
## 浏览器兼容性
|
|
214
|
-
|
|
215
|
-
- 支持 ES2015+ 的现代浏览器
|
|
216
|
-
- FLV 播放需要支持媒体源扩展 (MSE)
|
|
217
|
-
|
|
218
|
-
## 注意事项
|
|
219
|
-
|
|
220
|
-
1. 生产环境中，请确保您的视频流 URL 支持 CORS
|
|
221
|
-
2. 播放器针对 FLV 流进行了优化；其他格式可能无法正常工作
|
|
222
|
-
3. 对于直播流，默认启用了延迟优化
|
|
223
|
-
4. 通过适当的销毁生命周期自动管理内存
|
|
224
|
-
|
|
225
|
-
## 许可证
|
|
226
|
-
|
|
1
|
+
# @linker-design-plus/mpegtsplayer
|
|
2
|
+
|
|
3
|
+
一个基于 mpegts.js 的 Vue 3 视频播放器组件，用于播放 FLV 流媒体，具有增强的功能和控件。
|
|
4
|
+
|
|
5
|
+
## 功能特性
|
|
6
|
+
|
|
7
|
+
- 🎥 **FLV 流媒体支持**：使用 mpegts.js 播放 FLV 视频流
|
|
8
|
+
- 🔄 **自动重载**：连接丢失时自动重新加载视频流
|
|
9
|
+
- 👁️ **可见性处理**：处理标签页可见性变化并自动刷新
|
|
10
|
+
- ⚙️ **自定义控件**：切换原生视频控件的显示/隐藏
|
|
11
|
+
- 📡 **直播流优化**：针对直播流进行了低延迟优化
|
|
12
|
+
- 🎯 **错误处理**：全面的错误处理和事件报告
|
|
13
|
+
- 📱 **响应式设计**：适应容器尺寸变化
|
|
14
|
+
- 🎨 **样式化组件**：内置加载指示器和简洁的界面
|
|
15
|
+
|
|
16
|
+
## 安装
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
# 推荐使用 pnpm
|
|
20
|
+
pnpm add @linker-design-plus/mpegtsplayer
|
|
21
|
+
|
|
22
|
+
# 使用 npm
|
|
23
|
+
npm install @linker-design-plus/mpegtsplayer
|
|
24
|
+
|
|
25
|
+
# 使用 yarn
|
|
26
|
+
yarn add @linker-design-plus/mpegtsplayer
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## 使用方法
|
|
30
|
+
|
|
31
|
+
### 引入组件
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
// 在 main.js 或入口文件中
|
|
35
|
+
import { createApp } from 'vue';
|
|
36
|
+
import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
|
|
37
|
+
|
|
38
|
+
const app = createApp(App);
|
|
39
|
+
app.component('MpegtsPlayer', MpegtsPlayer);
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
或者在组件中局部使用：
|
|
43
|
+
|
|
44
|
+
```vue
|
|
45
|
+
<script setup>
|
|
46
|
+
import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
|
|
47
|
+
</script>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### 基础用法
|
|
51
|
+
|
|
52
|
+
```vue
|
|
53
|
+
<template>
|
|
54
|
+
<div style="width: 800px; height: 450px;">
|
|
55
|
+
<MpegtsPlayer
|
|
56
|
+
video-url="http://example.com/stream.flv"
|
|
57
|
+
:is-live="true"
|
|
58
|
+
:controls="true"
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### 直播流配置
|
|
65
|
+
|
|
66
|
+
```vue
|
|
67
|
+
<template>
|
|
68
|
+
<div style="width: 100%; height: 100%;">
|
|
69
|
+
<MpegtsPlayer
|
|
70
|
+
video-url="http://example.com/live-stream.flv"
|
|
71
|
+
:is-live="true"
|
|
72
|
+
:auto-reload="true"
|
|
73
|
+
:auto-visibility-change-refresh="true"
|
|
74
|
+
:close-visibility-change-listener="false"
|
|
75
|
+
:controls="true"
|
|
76
|
+
/>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### 点播视频配置
|
|
82
|
+
|
|
83
|
+
```vue
|
|
84
|
+
<template>
|
|
85
|
+
<div style="width: 800px; height: 450px;">
|
|
86
|
+
<MpegtsPlayer
|
|
87
|
+
video-url="http://example.com/video.flv"
|
|
88
|
+
:is-live="false"
|
|
89
|
+
:controls="true"
|
|
90
|
+
:current-time="0"
|
|
91
|
+
/>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## API
|
|
97
|
+
|
|
98
|
+
### Props
|
|
99
|
+
|
|
100
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
101
|
+
|------|------|------|--------|
|
|
102
|
+
| videoUrl | 视频流 URL | string | "" |
|
|
103
|
+
| closeVisibilityChangeListener | 关闭可见性变化监听器 | boolean | false |
|
|
104
|
+
| autoVisibilityChangeRefresh | 可见性变化时自动刷新 | boolean | false |
|
|
105
|
+
| autoReload | 错误时自动重载 | boolean | false |
|
|
106
|
+
| isLive | 是否为直播流 | boolean | true |
|
|
107
|
+
| controls | 显示原生控件 | boolean | false |
|
|
108
|
+
| currentTime | 当前播放时间 | number | 0 |
|
|
109
|
+
| stallTimeout | 卡顿检测超时时间（毫秒） | number | 5000 |
|
|
110
|
+
|
|
111
|
+
### Events
|
|
112
|
+
|
|
113
|
+
| 事件 | 说明 | 回调参数 |
|
|
114
|
+
|------|------|----------|
|
|
115
|
+
| loadError | 加载错误 | errorInfo: any |
|
|
116
|
+
| playSuccess | 播放成功 | - |
|
|
117
|
+
| loadComplete | 加载完成 | - |
|
|
118
|
+
| visibilitychange | 可见性变化 | visibilityState: string |
|
|
119
|
+
| timeupdate | 时间更新 | time: number |
|
|
120
|
+
| playEnded | 播放结束 | - |
|
|
121
|
+
| playLoading | 播放加载中 | - |
|
|
122
|
+
|
|
123
|
+
### 方法 (通过 ref 暴露)
|
|
124
|
+
|
|
125
|
+
| 方法 | 说明 | 参数 |
|
|
126
|
+
|------|------|------|
|
|
127
|
+
| start() | 开始播放 | - |
|
|
128
|
+
| pause() | 暂停播放 | - |
|
|
129
|
+
| destroy() | 销毁播放器 | - |
|
|
130
|
+
| reload() | 重新加载播放器 | - |
|
|
131
|
+
|
|
132
|
+
### 访问方法示例
|
|
133
|
+
|
|
134
|
+
```vue
|
|
135
|
+
<template>
|
|
136
|
+
<div>
|
|
137
|
+
<MpegtsPlayer
|
|
138
|
+
ref="playerRef"
|
|
139
|
+
video-url="http://example.com/stream.flv"
|
|
140
|
+
:is-live="true"
|
|
141
|
+
/>
|
|
142
|
+
<button @click="play">播放</button>
|
|
143
|
+
<button @click="pause">暂停</button>
|
|
144
|
+
<button @click="reload">重新加载</button>
|
|
145
|
+
</div>
|
|
146
|
+
</template>
|
|
147
|
+
|
|
148
|
+
<script setup>
|
|
149
|
+
import { ref } from 'vue';
|
|
150
|
+
import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
|
|
151
|
+
|
|
152
|
+
const playerRef = ref(null);
|
|
153
|
+
|
|
154
|
+
const play = () => {
|
|
155
|
+
playerRef.value.start();
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
const pause = () => {
|
|
159
|
+
playerRef.value.pause();
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
const reload = () => {
|
|
163
|
+
playerRef.value.reload();
|
|
164
|
+
};
|
|
165
|
+
</script>
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## 功能描述
|
|
169
|
+
|
|
170
|
+
### 自动重连
|
|
171
|
+
当启用 `autoReload` 时，如果连接丢失，播放器将自动尝试重新连接到流媒体，最多尝试 2 次后发出错误事件。
|
|
172
|
+
|
|
173
|
+
### 可见性处理
|
|
174
|
+
当浏览器标签页在隐藏后重新可见时，播放器可以自动重新加载，由 `autoVisibilityChangeRefresh` 属性控制。
|
|
175
|
+
|
|
176
|
+
### 控件自定义
|
|
177
|
+
可以使用 `controls` 属性切换原生视频控件的显示/隐藏。禁用时，可以使用暴露的方法实现自定义控件。
|
|
178
|
+
|
|
179
|
+
### 直播流优化
|
|
180
|
+
针对直播流的优化设置包括：
|
|
181
|
+
- 禁用 stash 缓冲区以降低延迟
|
|
182
|
+
- 禁用懒加载以实现连续流媒体播放
|
|
183
|
+
- 启用实时缓冲区延迟追踪以实现流畅播放
|
|
184
|
+
|
|
185
|
+
## 样式自定义
|
|
186
|
+
|
|
187
|
+
组件包含内置样式。您可以通过以下类名覆盖默认样式：
|
|
188
|
+
|
|
189
|
+
```css
|
|
190
|
+
.mainContainer {
|
|
191
|
+
/* 容器样式 */
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.video-container {
|
|
195
|
+
/* 视频元素样式 */
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.meta-data-loading {
|
|
199
|
+
/* 加载旋转图标样式 */
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.no-control {
|
|
203
|
+
/* 控件禁用时应用的类 */
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## 依赖
|
|
208
|
+
|
|
209
|
+
- Vue 3.1.0+
|
|
210
|
+
- mpegts.js 1.7.3
|
|
211
|
+
- @arco-design/web-vue 2.56.3
|
|
212
|
+
|
|
213
|
+
## 浏览器兼容性
|
|
214
|
+
|
|
215
|
+
- 支持 ES2015+ 的现代浏览器
|
|
216
|
+
- FLV 播放需要支持媒体源扩展 (MSE)
|
|
217
|
+
|
|
218
|
+
## 注意事项
|
|
219
|
+
|
|
220
|
+
1. 生产环境中，请确保您的视频流 URL 支持 CORS
|
|
221
|
+
2. 播放器针对 FLV 流进行了优化；其他格式可能无法正常工作
|
|
222
|
+
3. 对于直播流，默认启用了延迟优化
|
|
223
|
+
4. 通过适当的销毁生命周期自动管理内存
|
|
224
|
+
|
|
225
|
+
## 许可证
|
|
226
|
+
|
|
227
227
|
MIT
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const n=require("vue"),u=require("mpegts.js"),O=Symbol("ArcoConfigProvider"),R="arco",I="$arco",x=e=>{var a,t,s;const c=n.getCurrentInstance(),d=n.inject(O,void 0),i=(s=(t=d==null?void 0:d.prefixCls)!=null?t:(a=c==null?void 0:c.appContext.config.globalProperties[I])==null?void 0:a.classPrefix)!=null?s:R;return e?`${i}-${e}`:i},z=Object.prototype.toString;function D(e){return z.call(e)==="[object Number]"&&e===e}var V=(e,a)=>{for(const[t,s]of a)e[t]=s;return e};const F=n.defineComponent({name:"IconLoading",props:{size:{type:[Number,String]},strokeWidth:{type:Number,default:4},strokeLinecap:{type:String,default:"butt",validator:e=>["butt","round","square"].includes(e)},strokeLinejoin:{type:String,default:"miter",validator:e=>["arcs","bevel","miter","miter-clip","round"].includes(e)},rotate:Number,spin:Boolean},emits:{click:e=>!0},setup(e,{emit:a}){const t=x("icon"),s=n.computed(()=>[t,`${t}-loading`,{[`${t}-spin`]:e.spin}]),c=n.computed(()=>{const i={};return e.size&&(i.fontSize=D(e.size)?`${e.size}px`:e.size),e.rotate&&(i.transform=`rotate(${e.rotate}deg)`),i});return{cls:s,innerStyle:c,onClick:i=>{a("click",i)}}}}),j=["stroke-width","stroke-linecap","stroke-linejoin"],A=n.createElementVNode("path",{d:"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6"},null,-1),U=[A];function G(e,a,t,s,c,d){return n.openBlock(),n.createElementBlock("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor",class:n.normalizeClass(e.cls),style:n.normalizeStyle(e.innerStyle),"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,onClick:a[0]||(a[0]=(...i)=>e.onClick&&e.onClick(...i))},U,14,j)}var y=V(F,[["render",G]]);const W=Object.assign(y,{install:(e,a)=>{var t;const s=(t=a==null?void 0:a.iconPrefix)!=null?t:"";e.component(s+y.name,y)}});const g=n.defineComponent({name:"MpegtsPlayer",props:{videoUrl:{type:String,default:""},closeVisibilityChangeListener:{type:Boolean,default:!1},autoVisibilityChangeRefresh:{type:Boolean,default:!1},autoReload:{type:Boolean,default:!1},isLive:{type:Boolean,default:!0},controls:{type:Boolean,default:!1},currentTime:{type:Number,default:0},stallTimeout:{type:Number,default:5e3}},emits:["loadError","playSuccess","loadComplete","visibilitychange","timeupdate","playEnded","playLoading"],setup(e,{emit:a}){const t=n.ref(null),s=n.ref(null),c=n.ref(!0),d=n.ref(!1),i=n.ref(0);let p=0,m=Date.now();const h=()=>{const o=s.value;t.value=u.createPlayer({type:"flv",isLive:e.isLive,hasAudio:!1,cors:!0,url:e.videoUrl},{enableWorker:!1,enableWorkerForMSE:!1,enableStashBuffer:!e.isLive,stashInitialSize:128,lazyLoad:!1,lazyLoadMaxDuration:.2,deferLoadAfterSourceOpen:!1,liveBufferLatencyChasing:!!e.isLive,liveBufferLatencyMaxLatency:1,liveBufferLatencyMinRemain:.5,autoCleanupSourceBuffer:!0,autoCleanupMinBackwardDuration:30,autoCleanupMaxBackwardDuration:60}),t.value.attachMediaElement(o),c.value=!0,E(),S()},E=async()=>{try{t.value.load()}catch(o){console.log(o),a("loadError",o)}},S=()=>{t.value.on(u.Events.ERROR,C),t.value.on(u.Events.LOADING_COMPLETE,L),t.value.on(u.Events.STATISTICS_INFO,P)},C=(o,l,r)=>{console.log(`类型:${JSON.stringify(o)}`,`报错内容${l}`,"报错信息",r),a("loadError",l)},L=(o,l,r)=>{console.log(`类型:${JSON.stringify(o)}`,`报错内容${l}`,"报错信息",r),console.log("直播已结束"),a("loadComplete"),e.autoReload&&M()},P=o=>{const l=o.decodedFrames,r=Date.now();l===p&&l!==0?r-m>e.stallTimeout&&(console.log(`解码帧数超过 ${e.stallTimeout/1e3} 秒没有更新，可能卡顿了`),a("playLoading")):(p=l,m=r)},M=()=>{console.log("自动加载",i.value),i.value++,i.value<=2?v():i.value=0},v=()=>{t.value!=null&&f(),h()},$=()=>t.value.play(),N=()=>t.value.pause(),f=()=>{var o,l,r,k;t.value&&(t.value.off(u.Events.ERROR,C),t.value.off(u.Events.LOADING_COMPLETE,L),(o=t.value)==null||o.pause(),(l=t.value)==null||l.unload(),(r=t.value)==null||r.detachMediaElement(),(k=t.value)==null||k.destroy(),t.value=null)},T=async o=>{var l;if(!(!((l=o.target)!=null&&l.paused)||!c.value)){c.value=!1,console.log("handleCanplay",o.target.paused),i.value=0,d.value=!1;try{await t.value.play(),console.log(t.value),a("playSuccess")}catch(r){console.log("play error",r),a("loadError",r)}}},B=()=>{d.value=!0},_=o=>{var l;a("timeupdate",((l=o==null?void 0:o.target)==null?void 0:l.currentTime)??0)},w=()=>{a("playEnded")},b=()=>{document.visibilityState==="visible"?(a("visibilitychange",document.visibilityState),e.autoVisibilityChangeRefresh&&v()):f()};return n.watch(()=>e.videoUrl,o=>{o&&n.nextTick(()=>{t.value!=null&&f(),console.log(`isSupported: ${u.isSupported()}`),console.log(`是否支持点播视频：${u.getFeatureList().msePlayback}`),console.log(`是否支持httpflv直播流：${u.getFeatureList().mseLivePlayback}`),h()})},{immediate:!0}),n.onMounted(()=>{e.closeVisibilityChangeListener||document.addEventListener("visibilitychange",b)}),n.onUnmounted(()=>{f(),e.closeVisibilityChangeListener||document.removeEventListener("visibilitychange",b)}),{flvPlayer:t,videoContainerRef:s,loadMetaData:d,start:$,pause:N,destroy:f,reload:v,handleCanplay:T,handleLoadedmetadata:B,handleTimeupdate:_,handlePlayEnded:w}},render(){return n.createVNode("div",{class:"mainContainer"},[n.createVNode("video",{class:"video-container",ref:"videoContainerRef",muted:!0,controls:this.controls,onClick:e=>e.preventDefault(),onCanplay:this.handleCanplay,onLoadedmetadata:this.handleLoadedmetadata,onTimeupdate:this.handleTimeupdate,onEnded:this.handlePlayEnded},[n.createTextVNode("Your browser is too old which doesn't support HTML5 video.")]),this.loadMetaData&&n.createVNode(W,{class:"meta-data-loading"},null)])}}),q=Object.assign(g,{install:e=>{e.component(g.name,g)}});module.exports=q;
|