@linker-design-plus/mpegtsplayer 1.0.3 → 1.0.5
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/README.md +6 -55
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -56,8 +56,6 @@ import '@linker-design-plus/mpegtsplayer/dist/style.css';
|
|
|
56
56
|
<div style="width: 800px; height: 450px;">
|
|
57
57
|
<MpegtsPlayer
|
|
58
58
|
video-url="http://example.com/stream.flv"
|
|
59
|
-
:is-live="true"
|
|
60
|
-
:controls="true"
|
|
61
59
|
/>
|
|
62
60
|
</div>
|
|
63
61
|
</div>
|
|
@@ -74,22 +72,6 @@ import '@linker-design-plus/mpegtsplayer/dist/style.css';
|
|
|
74
72
|
:auto-reload="true"
|
|
75
73
|
:auto-visibility-change-refresh="true"
|
|
76
74
|
:close-visibility-change-listener="false"
|
|
77
|
-
:controls="true"
|
|
78
|
-
/>
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### 点播视频配置
|
|
84
|
-
|
|
85
|
-
```vue
|
|
86
|
-
<template>
|
|
87
|
-
<div style="width: 800px; height: 450px;">
|
|
88
|
-
<MpegtsPlayer
|
|
89
|
-
video-url="http://example.com/video.flv"
|
|
90
|
-
:is-live="false"
|
|
91
|
-
:controls="true"
|
|
92
|
-
:current-time="0"
|
|
93
75
|
/>
|
|
94
76
|
</div>
|
|
95
77
|
</div>
|
|
@@ -107,7 +89,6 @@ import '@linker-design-plus/mpegtsplayer/dist/style.css';
|
|
|
107
89
|
| autoReload | 错误时自动重载 | boolean | false |
|
|
108
90
|
| isLive | 是否为直播流 | boolean | true |
|
|
109
91
|
| controls | 显示原生控件 | boolean | false |
|
|
110
|
-
| currentTime | 当前播放时间 | number | 0 |
|
|
111
92
|
| stallTimeout | 卡顿检测超时时间（毫秒） | number | 5000 |
|
|
112
93
|
|
|
113
94
|
### Events
|
|
@@ -116,13 +97,14 @@ import '@linker-design-plus/mpegtsplayer/dist/style.css';
|
|
|
116
97
|
|------|------|----------|
|
|
117
98
|
| loadError | 加载错误 | errorInfo: any |
|
|
118
99
|
| playSuccess | 播放成功 | - |
|
|
119
|
-
| loadComplete | 加载完成 | - |
|
|
100
|
+
| loadComplete | 加载完成(针对直播流) | - |
|
|
120
101
|
| visibilitychange | 可见性变化 | visibilityState: string |
|
|
121
|
-
| timeupdate | 时间更新 | time: number |
|
|
122
|
-
| playEnded |
|
|
123
|
-
| playLoading | 播放加载中 | - |
|
|
102
|
+
| timeupdate | 时间更新 | time(s): number |
|
|
103
|
+
| playEnded | 播放结束（针对回放流） | - |
|
|
104
|
+
| playLoading | 播放加载中(如果视频卡顿了，会触发这个事件) | - |
|
|
124
105
|
|
|
125
106
|
### 方法 (通过 ref 暴露)
|
|
107
|
+
目前start()和pause()是无效的，不能直接控制流的播放或者暂停
|
|
126
108
|
|
|
127
109
|
| 方法 | 说明 | 参数 |
|
|
128
110
|
|------|------|------|
|
|
@@ -141,8 +123,6 @@ import '@linker-design-plus/mpegtsplayer/dist/style.css';
|
|
|
141
123
|
video-url="http://example.com/stream.flv"
|
|
142
124
|
:is-live="true"
|
|
143
125
|
/>
|
|
144
|
-
<button @click="play">播放</button>
|
|
145
|
-
<button @click="pause">暂停</button>
|
|
146
126
|
<button @click="reload">重新加载</button>
|
|
147
127
|
</div>
|
|
148
128
|
</template>
|
|
@@ -154,14 +134,6 @@ import '@linker-design-plus/mpegtsplayer/dist/style.css';
|
|
|
154
134
|
|
|
155
135
|
const playerRef = ref(null);
|
|
156
136
|
|
|
157
|
-
const play = () => {
|
|
158
|
-
playerRef.value.start();
|
|
159
|
-
};
|
|
160
|
-
|
|
161
|
-
const pause = () => {
|
|
162
|
-
playerRef.value.pause();
|
|
163
|
-
};
|
|
164
|
-
|
|
165
137
|
const reload = () => {
|
|
166
138
|
playerRef.value.reload();
|
|
167
139
|
};
|
|
@@ -177,7 +149,7 @@ const reload = () => {
|
|
|
177
149
|
当浏览器标签页在隐藏后重新可见时，播放器可以自动重新加载，由 `autoVisibilityChangeRefresh` 属性控制。
|
|
178
150
|
|
|
179
151
|
### 控件自定义
|
|
180
|
-
可以使用 `controls`
|
|
152
|
+
可以使用 `controls` 属性切换原生视频控件的显示/隐藏。
|
|
181
153
|
|
|
182
154
|
### 直播流优化
|
|
183
155
|
针对直播流的优化设置包括：
|
|
@@ -185,27 +157,6 @@ const reload = () => {
|
|
|
185
157
|
- 禁用懒加载以实现连续流媒体播放
|
|
186
158
|
- 启用实时缓冲区延迟追踪以实现流畅播放
|
|
187
159
|
|
|
188
|
-
## 样式自定义
|
|
189
|
-
|
|
190
|
-
组件包含内置样式。您可以通过以下类名覆盖默认样式：
|
|
191
|
-
|
|
192
|
-
```css
|
|
193
|
-
.mainContainer {
|
|
194
|
-
/* 容器样式 */
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.video-container {
|
|
198
|
-
/* 视频元素样式 */
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.meta-data-loading {
|
|
202
|
-
/* 加载旋转图标样式 */
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.no-control {
|
|
206
|
-
/* 控件禁用时应用的类 */
|
|
207
|
-
}
|
|
208
|
-
```
|
|
209
160
|
|
|
210
161
|
## 依赖
|
|
211
162
|
|