1
|
1
|
<script setup lang="ts">
|
2
|
|
-import Player, {Events, IError} from 'xgplayer';
|
3
|
|
-import {FlvPlugin} from 'xgplayer-flv';
|
|
2
|
+import Player, { Events, IError } from 'xgplayer';
|
|
3
|
+import { FlvPlugin } from 'xgplayer-flv';
|
4
|
4
|
import Mp4Plugin from 'xgplayer-mp4';
|
5
|
|
-import {HlsPlugin} from 'xgplayer-hls';
|
6
|
|
-import {onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch} from 'vue';
|
|
5
|
+import { HlsPlugin } from 'xgplayer-hls';
|
|
6
|
+import { onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch } from 'vue';
|
7
|
7
|
import PresetPlayer from 'xgplayer';
|
8
|
|
-import {IPlayerOptions} from 'xgplayer/es/player';
|
|
8
|
+import { IPlayerOptions } from 'xgplayer/es/player';
|
9
|
9
|
import 'xgplayer/dist/index.min.css';
|
10
|
|
-import {StreamType, XGPlayerProps} from './types';
|
11
|
|
-import {isShareMode} from "@/views/share/hook";
|
12
|
|
-import {getJwtToken, getShareJwtToken} from "@/utils/external/auth";
|
|
10
|
+import { StreamType, XGPlayerProps } from './types';
|
|
11
|
+import { isShareMode } from "@/views/share/hook";
|
|
12
|
+import { getJwtToken, getShareJwtToken } from "@/utils/external/auth";
|
13
|
13
|
|
14
|
14
|
const props = withDefaults(defineProps<{
|
15
|
15
|
streamType?: StreamType;
|
...
|
...
|
@@ -28,7 +28,16 @@ const emits = defineEmits<{ |
28
|
28
|
(eventName: 'onUnmounted', player: PresetPlayer): void;
|
29
|
29
|
}>();
|
30
|
30
|
|
|
31
|
+function parsePlayUrl(url: string) {
|
|
32
|
+ try {
|
|
33
|
+ return new URL(url).pathname;
|
|
34
|
+ } catch {
|
|
35
|
+ return url;
|
|
36
|
+ }
|
|
37
|
+}
|
|
38
|
+
|
31
|
39
|
function getStreamTypeByUrl(url = ''): StreamType | undefined {
|
|
40
|
+ url = parsePlayUrl(url) || ''
|
32
|
41
|
if (url.endsWith('.m3u8')) return 'hls';
|
33
|
42
|
else if (url.endsWith('.mp4')) return 'mp4';
|
34
|
43
|
else if (url.endsWith('.flv')) {
|
...
|
...
|
@@ -37,8 +46,8 @@ function getStreamTypeByUrl(url = ''): StreamType | undefined { |
37
|
46
|
}
|
38
|
47
|
|
39
|
48
|
const getPluginByStreamType = (): IPlayerOptions => {
|
40
|
|
- let {url, withToken} = props;
|
41
|
|
- let {streamType} = props;
|
|
49
|
+ let { url, withToken } = props;
|
|
50
|
+ let { streamType } = props;
|
42
|
51
|
streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType;
|
43
|
52
|
|
44
|
53
|
const liveConfig = {
|
...
|
...
|
@@ -46,12 +55,12 @@ const getPluginByStreamType = (): IPlayerOptions => { |
46
|
55
|
maxLatency: 20,
|
47
|
56
|
disconnectTime: 0,
|
48
|
57
|
fetchOptions: withToken
|
49
|
|
- ? {
|
50
|
|
- headers: {
|
51
|
|
- 'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
|
52
|
|
- },
|
53
|
|
- }
|
54
|
|
- : {},
|
|
58
|
+ ? {
|
|
59
|
+ headers: {
|
|
60
|
+ 'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
|
|
61
|
+ },
|
|
62
|
+ }
|
|
63
|
+ : {},
|
55
|
64
|
};
|
56
|
65
|
const config: IPlayerOptions = {
|
57
|
66
|
flv: liveConfig,
|
...
|
...
|
@@ -78,7 +87,7 @@ const playerRef = shallowRef<Nullable<PresetPlayer>>(); |
78
|
87
|
const propsRef = ref<XGPlayerProps>({});
|
79
|
88
|
|
80
|
89
|
const getPlayerConfig = computed<IPlayerOptions>(() => {
|
81
|
|
- const {url, autoPlay, config} = props;
|
|
90
|
+ const { url, autoPlay, config } = props;
|
82
|
91
|
|
83
|
92
|
const basicConfig: IPlayerOptions = {
|
84
|
93
|
...config,
|
...
|
...
|
@@ -108,7 +117,7 @@ function initializePlayer() { |
108
|
117
|
|
109
|
118
|
if (!unref(videoElRef)) return;
|
110
|
119
|
|
111
|
|
- const player = (playerRef.value = new Player(Object.assign(config, {el: unref(videoElRef)})));
|
|
120
|
+ const player = (playerRef.value = new Player(Object.assign(config, { el: unref(videoElRef) })));
|
112
|
121
|
|
113
|
122
|
player.on(Events.READY, () => {
|
114
|
123
|
emits('ready', player);
|
...
|
...
|
@@ -117,9 +126,9 @@ function initializePlayer() { |
117
|
126
|
player.setEventsMiddleware({
|
118
|
127
|
error: (event, callback) => {
|
119
|
128
|
const code = (
|
120
|
|
- event as unknown as {
|
121
|
|
- error: MediaError;
|
122
|
|
- }
|
|
129
|
+ event as unknown as {
|
|
130
|
+ error: MediaError;
|
|
131
|
+ }
|
123
|
132
|
).error.code;
|
124
|
133
|
if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
|
125
|
134
|
if (!props.url) {
|
...
|
...
|
@@ -152,10 +161,10 @@ onUnmounted(() => { |
152
|
161
|
});
|
153
|
162
|
|
154
|
163
|
watch(
|
155
|
|
- () => props.url,
|
156
|
|
- () => {
|
157
|
|
- initializePlayer();
|
158
|
|
- }
|
|
164
|
+ () => props.url,
|
|
165
|
+ () => {
|
|
166
|
+ initializePlayer();
|
|
167
|
+ }
|
159
|
168
|
);
|
160
|
169
|
|
161
|
170
|
defineExpose({
|
...
|
...
|
|