@yimou6/common-ui 1.9.6 → 1.10.0
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/cdn/index.cdn.js +12 -12
- package/cdn/index.cdn.js.map +1 -1
- package/cdn/index.cdn.mjs +9 -9
- package/cdn/index.cdn.mjs.map +1 -1
- package/cdn/index.css +1 -1
- package/es/components/index.d.ts +1 -1
- package/es/components/index.mjs +1 -1
- package/es/components/live-player/index.d.ts +1 -1
- package/es/components/live-player/src/live-player.vue.d.ts +1 -1
- package/es/components/live-player/src/preset.mjs +2 -1
- package/es/components/live-player/src/preset.mjs.map +1 -1
- package/es/components/live-player/src/xgPlayer.vue.d.ts +2877 -2
- package/es/components/live-player/src/xgPlayer.vue2.mjs +29 -27
- package/es/components/live-player/src/xgPlayer.vue2.mjs.map +1 -1
- package/es/components/live-player/src/ysPlayer.vue.d.ts +1 -11
- package/es/components/live-player/src/ysPlayer.vue2.mjs +3 -17
- package/es/components/live-player/src/ysPlayer.vue2.mjs.map +1 -1
- package/es/components/select/index.d.ts +1 -1
- package/es/components/select/src/select.vue.d.ts +1 -1
- package/es/components/tzj-player/index.d.ts +36 -0
- package/es/components/tzj-player/index.mjs +9 -0
- package/es/components/tzj-player/index.mjs.map +1 -0
- package/es/components/tzj-player/src/easyPlayer.vue.d.ts +21 -0
- package/es/components/tzj-player/src/easyPlayer.vue.mjs +6 -0
- package/es/components/tzj-player/src/easyPlayer.vue.mjs.map +1 -0
- package/es/components/tzj-player/src/easyPlayer.vue2.mjs +120 -0
- package/es/components/tzj-player/src/easyPlayer.vue2.mjs.map +1 -0
- package/es/components/tzj-player/src/tzj-player.d.ts +15 -0
- package/es/components/tzj-player/src/tzj-player.mjs +23 -0
- package/es/components/tzj-player/src/tzj-player.mjs.map +1 -0
- package/es/components/tzj-player/src/tzj-player.vue.d.ts +36 -0
- package/es/components/tzj-player/src/tzj-player.vue.mjs +6 -0
- package/es/components/tzj-player/src/tzj-player.vue.mjs.map +1 -0
- package/es/components/tzj-player/src/tzj-player.vue2.mjs +50 -0
- package/es/components/tzj-player/src/tzj-player.vue2.mjs.map +1 -0
- package/es/components/tzj-player/src/ysPlayer.vue.d.ts +72 -0
- package/es/components/tzj-player/src/ysPlayer.vue.mjs +6 -0
- package/es/components/tzj-player/src/ysPlayer.vue.mjs.map +1 -0
- package/es/components/tzj-player/src/ysPlayer.vue2.mjs +183 -0
- package/es/components/tzj-player/src/ysPlayer.vue2.mjs.map +1 -0
- package/es/index.mjs +1 -1
- package/es/installer.mjs +2 -2
- package/es/installer.mjs.map +1 -1
- package/es/types.d.ts +1 -1
- package/global.d.ts +1 -1
- package/lib/components/index.d.ts +1 -1
- package/lib/components/index.js +31 -31
- package/lib/components/live-player/index.d.ts +1 -1
- package/lib/components/live-player/src/live-player.vue.d.ts +1 -1
- package/lib/components/live-player/src/preset.js +2 -1
- package/lib/components/live-player/src/preset.js.map +1 -1
- package/lib/components/live-player/src/xgPlayer.vue.d.ts +2877 -2
- package/lib/components/live-player/src/xgPlayer.vue2.js +28 -26
- package/lib/components/live-player/src/xgPlayer.vue2.js.map +1 -1
- package/lib/components/live-player/src/ysPlayer.vue.d.ts +1 -11
- package/lib/components/live-player/src/ysPlayer.vue2.js +3 -17
- package/lib/components/live-player/src/ysPlayer.vue2.js.map +1 -1
- package/lib/components/select/index.d.ts +1 -1
- package/lib/components/select/src/select.vue.d.ts +1 -1
- package/lib/components/tzj-player/index.d.ts +36 -0
- package/lib/components/tzj-player/index.js +14 -0
- package/lib/components/tzj-player/index.js.map +1 -0
- package/lib/components/tzj-player/src/easyPlayer.vue.d.ts +21 -0
- package/lib/components/tzj-player/src/easyPlayer.vue.js +10 -0
- package/lib/components/tzj-player/src/easyPlayer.vue.js.map +1 -0
- package/lib/components/tzj-player/src/easyPlayer.vue2.js +124 -0
- package/lib/components/tzj-player/src/easyPlayer.vue2.js.map +1 -0
- package/lib/components/tzj-player/src/tzj-player.d.ts +15 -0
- package/lib/components/tzj-player/src/tzj-player.js +26 -0
- package/lib/components/tzj-player/src/tzj-player.js.map +1 -0
- package/lib/components/tzj-player/src/tzj-player.vue.d.ts +36 -0
- package/lib/components/tzj-player/src/tzj-player.vue.js +10 -0
- package/lib/components/tzj-player/src/tzj-player.vue.js.map +1 -0
- package/lib/components/tzj-player/src/tzj-player.vue2.js +54 -0
- package/lib/components/tzj-player/src/tzj-player.vue2.js.map +1 -0
- package/lib/components/tzj-player/src/ysPlayer.vue.d.ts +72 -0
- package/lib/components/tzj-player/src/ysPlayer.vue.js +10 -0
- package/lib/components/tzj-player/src/ysPlayer.vue.js.map +1 -0
- package/lib/components/tzj-player/src/ysPlayer.vue2.js +187 -0
- package/lib/components/tzj-player/src/ysPlayer.vue2.js.map +1 -0
- package/lib/index.js +31 -31
- package/lib/installer.js +2 -2
- package/lib/installer.js.map +1 -1
- package/lib/types.d.ts +1 -1
- package/package.json +1 -1
- package/theme-default/i-tzj-player.css +1 -0
- package/theme-default/index.css +1 -1
- package/es/components/flv-player/index.d.ts +0 -78
- package/es/components/flv-player/index.mjs +0 -8
- package/es/components/flv-player/index.mjs.map +0 -1
- package/es/components/flv-player/src/flv-player.d.ts +0 -22
- package/es/components/flv-player/src/flv-player.mjs +0 -27
- package/es/components/flv-player/src/flv-player.mjs.map +0 -1
- package/es/components/flv-player/src/flv-player.vue.d.ts +0 -78
- package/es/components/flv-player/src/flv-player.vue.mjs +0 -6
- package/es/components/flv-player/src/flv-player.vue.mjs.map +0 -1
- package/es/components/flv-player/src/flv-player.vue2.mjs +0 -257
- package/es/components/flv-player/src/flv-player.vue2.mjs.map +0 -1
- package/lib/components/flv-player/index.d.ts +0 -78
- package/lib/components/flv-player/index.js +0 -13
- package/lib/components/flv-player/index.js.map +0 -1
- package/lib/components/flv-player/src/flv-player.d.ts +0 -22
- package/lib/components/flv-player/src/flv-player.js +0 -29
- package/lib/components/flv-player/src/flv-player.js.map +0 -1
- package/lib/components/flv-player/src/flv-player.vue.d.ts +0 -78
- package/lib/components/flv-player/src/flv-player.vue.js +0 -10
- package/lib/components/flv-player/src/flv-player.vue.js.map +0 -1
- package/lib/components/flv-player/src/flv-player.vue2.js +0 -261
- package/lib/components/flv-player/src/flv-player.vue2.js.map +0 -1
- package/theme-default/i-flv-player.css +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, shallowRef, computed, onMounted, nextTick, openBlock, createElementBlock, createCommentVNode, createElementVNode } from 'vue';
|
|
1
|
+
import { defineComponent, shallowRef, ref, computed, onMounted, nextTick, openBlock, createElementBlock, createCommentVNode, createElementVNode } from 'vue';
|
|
2
2
|
import Player, { Events } from 'xgplayer';
|
|
3
3
|
import FlvPlugin from 'xgplayer-flv';
|
|
4
4
|
import HlsPlugin from 'xgplayer-hls';
|
|
@@ -24,10 +24,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
24
24
|
setup(__props, { expose: __expose }) {
|
|
25
25
|
const props = __props;
|
|
26
26
|
const playerRef = shallowRef();
|
|
27
|
-
|
|
28
|
-
const videoUrl = computed(() =>
|
|
29
|
-
return props.url;
|
|
30
|
-
});
|
|
27
|
+
const playerInstance = ref(null);
|
|
28
|
+
const videoUrl = computed(() => props.url);
|
|
31
29
|
onMounted(() => {
|
|
32
30
|
Player.I18N.extend([customLang]);
|
|
33
31
|
play();
|
|
@@ -45,67 +43,71 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
45
43
|
}
|
|
46
44
|
__name(play, "play");
|
|
47
45
|
function destroy() {
|
|
48
|
-
if (playerInstance) {
|
|
49
|
-
playerInstance
|
|
50
|
-
playerInstance = null;
|
|
46
|
+
if (playerInstance.value) {
|
|
47
|
+
playerInstance.value.destroy();
|
|
48
|
+
playerInstance.value = null;
|
|
51
49
|
}
|
|
52
50
|
}
|
|
53
51
|
__name(destroy, "destroy");
|
|
54
|
-
function
|
|
52
|
+
function checkPluginSupport() {
|
|
55
53
|
const plugins = [];
|
|
56
54
|
const type = videoType(props.url);
|
|
57
55
|
try {
|
|
58
|
-
if (type === "flv") {
|
|
59
|
-
|
|
60
|
-
plugins.push(FlvPlugin);
|
|
61
|
-
}
|
|
56
|
+
if (type === "flv" && FlvPlugin.isSupported()) {
|
|
57
|
+
plugins.push(FlvPlugin);
|
|
62
58
|
} else if (type === "hls") {
|
|
63
59
|
const videoElement = document.createElement("video");
|
|
64
60
|
const isNativeHlsSupported = videoElement.canPlayType("application/vnd.apple.mpegurl");
|
|
65
61
|
if (!isNativeHlsSupported && HlsPlugin.isSupported()) {
|
|
66
62
|
plugins.push(HlsPlugin);
|
|
67
63
|
}
|
|
68
|
-
} else {
|
|
64
|
+
} else if (type !== "flv" && type !== "hls") {
|
|
69
65
|
console.warn(`\u4E0D\u652F\u6301\u7684\u89C6\u9891\u7C7B\u578B: ${type}. \u8BF7\u4F7F\u7528 'flv' \u6216 'hls'\u3002`);
|
|
70
66
|
}
|
|
71
67
|
} catch (error) {
|
|
72
68
|
console.error("\u68C0\u67E5\u63D2\u4EF6\u652F\u6301\u65F6\u51FA\u9519:", error);
|
|
73
69
|
}
|
|
70
|
+
return plugins;
|
|
71
|
+
}
|
|
72
|
+
__name(checkPluginSupport, "checkPluginSupport");
|
|
73
|
+
function createPlayerConfig(plugins) {
|
|
74
74
|
const ignores = props.onLine ? onLineIgnores : recordIgnores;
|
|
75
|
-
|
|
75
|
+
return {
|
|
76
76
|
el: playerRef.value,
|
|
77
77
|
url: props.url,
|
|
78
78
|
height: "100%",
|
|
79
79
|
width: "100%",
|
|
80
|
-
// 是否自动播放
|
|
81
80
|
autoplay: true,
|
|
82
|
-
// 是否自动静音自动播放, 如果autoplay为false,则该属性的作用为默认静音播放
|
|
83
81
|
autoplayMuted: true,
|
|
84
|
-
// 是否默认初始化video,当autoplay为true时,该配置为false无效
|
|
85
82
|
videoInit: true,
|
|
86
83
|
plugins,
|
|
87
84
|
ignores,
|
|
88
85
|
marginControls: false,
|
|
89
86
|
screenShot: props.onLine,
|
|
90
|
-
// 播放器初始显示语言,语言包不存在的情况下默认显示'en'语言包
|
|
91
87
|
lang: "zh-cn",
|
|
92
88
|
videoAttributes: {
|
|
93
89
|
crossOrigin: "anonymous"
|
|
94
90
|
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
__name(createPlayerConfig, "createPlayerConfig");
|
|
94
|
+
function createXgPlayer() {
|
|
95
|
+
const plugins = checkPluginSupport();
|
|
96
|
+
const config = createPlayerConfig(plugins);
|
|
97
|
+
playerInstance.value = new Player(config);
|
|
98
|
+
playerInstance.value.getPlugin("error").useHooks("errorRetry", () => {
|
|
99
|
+
playerInstance.value.setConfig({
|
|
98
100
|
url: props.url
|
|
99
101
|
});
|
|
100
|
-
playerInstance.resetState();
|
|
101
|
-
playerInstance.play();
|
|
102
|
+
playerInstance.value.resetState();
|
|
103
|
+
playerInstance.value.play();
|
|
102
104
|
return false;
|
|
103
105
|
});
|
|
104
|
-
playerInstance.on(Events.ERROR, (error) => {
|
|
106
|
+
playerInstance.value.on(Events.ERROR, (error) => {
|
|
105
107
|
console.error("\u64AD\u653E\u51FA\u9519:", error);
|
|
106
|
-
playerInstance.unRegisterPlugin("controls");
|
|
108
|
+
playerInstance.value.unRegisterPlugin("controls");
|
|
107
109
|
});
|
|
108
|
-
playerInstance.on(Events.CANPLAY, () => {
|
|
110
|
+
playerInstance.value.on(Events.CANPLAY, () => {
|
|
109
111
|
console.log("\u89C6\u9891\u7F13\u51B2\u8DB3\u591F\u6570\u636E\uFF0C\u53EF\u4EE5\u64AD\u653E");
|
|
110
112
|
});
|
|
111
113
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xgPlayer.vue2.mjs","sources":["../../../../../../../packages/components/live-player/src/xgPlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, nextTick, onMounted, shallowRef } from 'vue';\n import Player, { Events } from 'xgplayer';\n import FlvPlugin from 'xgplayer-flv';\n import HlsPlugin from 'xgplayer-hls';\n import { videoType } from './live-player';\n import { customLang, onLineIgnores, recordIgnores } from './preset';\n\n /**\n * 西瓜播放器\n */\n defineOptions({\n name: 'XgPlayer',\n });\n\n const props = defineProps<{\n url: string;\n onLine?: boolean;\n }>();\n\n const playerRef = shallowRef();\n
|
|
1
|
+
{"version":3,"file":"xgPlayer.vue2.mjs","sources":["../../../../../../../packages/components/live-player/src/xgPlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, nextTick, onMounted, ref, shallowRef } from 'vue';\n import Player, { Events } from 'xgplayer';\n import FlvPlugin from 'xgplayer-flv';\n import HlsPlugin from 'xgplayer-hls';\n import { videoType } from './live-player';\n import { customLang, onLineIgnores, recordIgnores } from './preset';\n\n /**\n * 西瓜播放器\n */\n defineOptions({\n name: 'XgPlayer',\n });\n\n const props = defineProps<{\n url: string;\n onLine?: boolean;\n }>();\n\n const playerRef = shallowRef<HTMLElement>();\n const playerInstance = ref<Player | null>(null);\n const videoUrl = computed(() => props.url);\n\n onMounted(() => {\n // @ts-ignore\n Player.I18N.extend([customLang]);\n play();\n });\n\n defineExpose({ play, destroy });\n\n function play() {\n destroy();\n nextTick(() => {\n console.log(videoUrl.value);\n // 视频地址为空,不播放\n if (!videoUrl.value) {\n return;\n }\n createXgPlayer();\n });\n }\n\n function destroy() {\n if (playerInstance.value) {\n playerInstance.value.destroy();\n playerInstance.value = null;\n }\n }\n\n /**\n * 检查插件支持情况\n */\n function checkPluginSupport() {\n const plugins: any[] = [];\n const type = videoType(props.url);\n\n try {\n if (type === 'flv' && FlvPlugin.isSupported()) {\n plugins.push(FlvPlugin);\n } else if (type === 'hls') {\n const videoElement = document.createElement('video');\n const isNativeHlsSupported = videoElement.canPlayType('application/vnd.apple.mpegurl');\n\n if (!isNativeHlsSupported && HlsPlugin.isSupported()) {\n plugins.push(HlsPlugin);\n }\n } else if (type !== 'flv' && type !== 'hls') {\n console.warn(`不支持的视频类型: ${type}. 请使用 'flv' 或 'hls'。`);\n }\n } catch (error) {\n console.error('检查插件支持时出错:', error);\n }\n\n return plugins;\n }\n\n /**\n * 创建播放器配置\n */\n function createPlayerConfig(plugins: any[]) {\n const ignores = props.onLine ? onLineIgnores : recordIgnores;\n\n return {\n el: playerRef.value!,\n url: props.url,\n height: '100%',\n width: '100%',\n autoplay: true,\n autoplayMuted: true,\n videoInit: true,\n plugins,\n ignores,\n marginControls: false,\n screenShot: props.onLine,\n lang: 'zh-cn',\n videoAttributes: {\n crossOrigin: 'anonymous',\n },\n };\n }\n\n /**\n * 创建西瓜播放器实例,播放hls,flv流\n */\n function createXgPlayer() {\n const plugins = checkPluginSupport();\n const config = createPlayerConfig(plugins);\n\n playerInstance.value = new Player(config);\n\n // 播放出错之后,点击\"刷新\"按钮重新播放\n playerInstance.value.getPlugin('error').useHooks('errorRetry', () => {\n playerInstance.value!.setConfig({\n url: props.url,\n });\n // 重置状态\n playerInstance.value!.resetState();\n // 重新播放\n playerInstance.value!.play();\n return false;\n });\n\n playerInstance.value.on(Events.ERROR, (error: Record<string, any>) => {\n console.error('播放出错:', error);\n // 播放出错时,禁用控制栏插件\n playerInstance.value!.unRegisterPlugin('controls');\n });\n\n // 视频缓冲足够数据,可以播放\n playerInstance.value.on(Events.CANPLAY, () => {\n console.log('视频缓冲足够数据,可以播放');\n });\n }\n</script>\n\n<template>\n <div class=\"i-player-bg i-player-container\">\n <!-- 视频地址为空的提示 -->\n <div v-if=\"!videoUrl\" class=\"i-player-no__url\">\n <div>无播放地址</div>\n </div>\n <div v-else ref=\"playerRef\" class=\"i-player-container\" />\n </div>\n</template>\n"],"names":[],"mappings":"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"}
|
|
@@ -19,10 +19,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
19
19
|
type: StringConstructor;
|
|
20
20
|
required: true;
|
|
21
21
|
};
|
|
22
|
-
debug: {
|
|
23
|
-
type: BooleanConstructor;
|
|
24
|
-
required: false;
|
|
25
|
-
};
|
|
26
22
|
playerTemplate: {
|
|
27
23
|
type: StringConstructor;
|
|
28
24
|
required: false;
|
|
@@ -68,15 +64,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
68
64
|
type: StringConstructor;
|
|
69
65
|
required: true;
|
|
70
66
|
};
|
|
71
|
-
debug: {
|
|
72
|
-
type: BooleanConstructor;
|
|
73
|
-
required: false;
|
|
74
|
-
};
|
|
75
67
|
playerTemplate: {
|
|
76
68
|
type: StringConstructor;
|
|
77
69
|
required: false;
|
|
78
70
|
};
|
|
79
|
-
}>> & Readonly<{}>, {
|
|
80
|
-
debug: boolean;
|
|
81
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
71
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
82
72
|
export default _default;
|
|
@@ -22,7 +22,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
22
22
|
channel: {},
|
|
23
23
|
quality: {},
|
|
24
24
|
accessToken: {},
|
|
25
|
-
debug: { type: Boolean },
|
|
26
25
|
playerTemplate: {}
|
|
27
26
|
},
|
|
28
27
|
setup(__props, { expose: __expose }) {
|
|
@@ -55,7 +54,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
55
54
|
}
|
|
56
55
|
);
|
|
57
56
|
function play(options) {
|
|
58
|
-
props.debug && console.log("play", options);
|
|
59
57
|
if (!props.accessToken) {
|
|
60
58
|
errorMsg = `params 'accessToken' is not found`;
|
|
61
59
|
} else {
|
|
@@ -83,7 +81,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
83
81
|
calculatedHeight = height.value;
|
|
84
82
|
calculatedWidth = calculatedHeight * ratio;
|
|
85
83
|
}
|
|
86
|
-
props.debug && console.log("playerInstance", playerInstance);
|
|
87
84
|
if (playerInstance == null ? void 0 : playerInstance.resize) {
|
|
88
85
|
playerInstance.resize(calculatedWidth, calculatedHeight);
|
|
89
86
|
} else {
|
|
@@ -108,29 +105,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
108
105
|
// @ts-ignore
|
|
109
106
|
loggerOptions: {
|
|
110
107
|
name: "YSPLAYER",
|
|
111
|
-
level:
|
|
108
|
+
level: "ERROR",
|
|
112
109
|
showTime: true
|
|
113
110
|
},
|
|
114
111
|
staticPath: "/plugins/ezuikit/ezuikit_static",
|
|
115
112
|
...options
|
|
116
113
|
});
|
|
117
|
-
playerInstance.eventEmitter.on("fullscreen", (
|
|
118
|
-
props.debug && console.log("fullscreen", args);
|
|
114
|
+
playerInstance.eventEmitter.on("fullscreen", () => {
|
|
119
115
|
isCurrentFullscreen = true;
|
|
120
116
|
});
|
|
121
|
-
playerInstance.eventEmitter.on("exitFullscreen", (
|
|
122
|
-
props.debug && console.log("exitFullscreen", args);
|
|
117
|
+
playerInstance.eventEmitter.on("exitFullscreen", () => {
|
|
123
118
|
isCurrentFullscreen = false;
|
|
124
119
|
});
|
|
125
|
-
playerInstance.eventEmitter.on("destroy", (args) => {
|
|
126
|
-
props.debug && console.log("destroy", args);
|
|
127
|
-
});
|
|
128
|
-
playerInstance.eventEmitter.on("init", (args) => {
|
|
129
|
-
props.debug && console.log("init", args);
|
|
130
|
-
});
|
|
131
|
-
playerInstance.eventEmitter.on("play", (args) => {
|
|
132
|
-
props.debug && console.log("play", args);
|
|
133
|
-
});
|
|
134
120
|
playerInstance.eventEmitter.on("videoInfo", (args) => {
|
|
135
121
|
const { width: w, height: h } = args;
|
|
136
122
|
if (w && h) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ysPlayer.vue2.mjs","sources":["../../../../../../../packages/components/live-player/src/ysPlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { useElementSize } from '@vueuse/core';\n import EZUIKit from 'ezuikit-js';\n import { nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue';\n import { uuid } from './live-player';\n // 萤石云播放器\n defineOptions({\n name: 'YsPlayer',\n });\n\n // 传值方式\n // 1、传url、accessToken\n // 2、传deviceSerial、channel、accessToken\n const props = defineProps<{\n // 播放地址\n // 高清:ezopen://open.ys7.com/${设备序列号}/${通道号}.hd.live\n // 流畅:ezopen://open.ys7.com/${设备序列号}/${通道号}.live\n url?: string;\n // 设备序列号\n deviceSerial?: string;\n // 通道号\n channel?: number;\n // 清晰度,默认为空,也表示高清\n // hd:高清;sd:流畅\n quality?: 'hd' | 'sd' | '';\n accessToken: string;\n debug?: boolean;\n // 播放器模板ID\n playerTemplate?: string;\n }>();\n\n // 播放器模板ID\n // 可在萤石云控制台查看、修改、获取\n // 位置:云直播-轻应用-特致珈默认模板\n const PLAYER_TEMPLATE = '5f295a9341a74d439b5d69374c90d501';\n const id = uuid();\n let playerInstance: any = null;\n let errorMsg = '';\n const ysRef = shallowRef();\n const { width, height } = useElementSize(ysRef);\n let ratio = 16 / 9;\n let isCurrentFullscreen = false;\n\n onMounted(() => play());\n\n onBeforeUnmount(() => destroy());\n\n defineExpose({ play, destroy, resize });\n\n // 防抖函数\n function debounce(func: Function, wait: number) {\n let timeout: ReturnType<typeof setTimeout> | null = null;\n return function (this: any, ...args: any[]) {\n if (timeout) clearTimeout(timeout);\n timeout = setTimeout(() => func.apply(this, args), wait);\n };\n }\n\n // 加上防抖的 resize 函数\n const debouncedResize = debounce(resize, 300);\n\n watch(\n () => [width.value, height.value, ratio],\n () => {\n if (!isCurrentFullscreen) {\n debouncedResize();\n }\n },\n );\n\n function play(options?: Record<string, any>) {\n props.debug && console.log('play', options);\n if (!props.accessToken) {\n errorMsg = `params 'accessToken' is not found`;\n } else {\n const url = formatterUrl();\n if (url) {\n createPlayerDom();\n nextTick(() => createPlayer(options));\n }\n }\n }\n function destroy() {\n if (playerInstance) {\n playerInstance.destroy();\n playerInstance = null;\n removePlayerDom();\n }\n }\n function resize() {\n // 根据播放器宽高比,设置播放器高度\n if (width.value > 0 && height.value > 0) {\n let calculatedWidth = width.value;\n let calculatedHeight = calculatedWidth / ratio;\n if (calculatedHeight > height.value) {\n calculatedHeight = height.value;\n calculatedWidth = calculatedHeight * ratio;\n }\n props.debug && console.log('playerInstance', playerInstance);\n if (playerInstance?.resize) {\n playerInstance.resize(calculatedWidth, calculatedHeight);\n } else {\n const dom = document.getElementById(id);\n if (dom) {\n dom.style.width = `${calculatedWidth}px`;\n dom.style.height = `${calculatedHeight}px`;\n }\n }\n }\n }\n\n /**\n * 创建萤石云播放器实例,播放萤石云直播流\n */\n function createPlayer(options?: Record<string, any>) {\n playerInstance = new EZUIKit.EZUIKitPlayer({\n id,\n url: formatterUrl(),\n accessToken: props.accessToken,\n template: props.playerTemplate || PLAYER_TEMPLATE,\n width: width.value,\n height: height.value,\n audio: 1,\n // @ts-ignore\n loggerOptions: {\n name: 'YSPLAYER',\n level: props.debug ? 'INFO' : 'ERROR',\n showTime: true,\n },\n staticPath: '/plugins/ezuikit/ezuikit_static',\n ...options,\n });\n\n playerInstance.eventEmitter.on('fullscreen', (args: any) => {\n props.debug && console.log('fullscreen', args);\n isCurrentFullscreen = true;\n });\n playerInstance.eventEmitter.on('exitFullscreen', (args: any) => {\n props.debug && console.log('exitFullscreen', args);\n isCurrentFullscreen = false;\n });\n playerInstance.eventEmitter.on('destroy', (args: any) => {\n props.debug && console.log('destroy', args);\n });\n playerInstance.eventEmitter.on('init', (args: any) => {\n props.debug && console.log('init', args);\n });\n playerInstance.eventEmitter.on('play', (args: any) => {\n props.debug && console.log('play', args);\n });\n playerInstance.eventEmitter.on('videoInfo', (args: any) => {\n const { width: w, height: h } = args;\n // 计算播放器宽高比\n if (w && h) {\n ratio = w / h;\n }\n });\n }\n\n function formatterUrl(): string {\n if (props.url) {\n return props.url;\n } else {\n if (props.deviceSerial && props.channel) {\n const quality = props.quality === '' || props.quality === 'hd' ? 'hd.' : '';\n return `ezopen://open.ys7.com/${props.deviceSerial}/${props.channel}.${quality}live`;\n } else {\n errorMsg = `params 'deviceSerial' or 'channel' is not found`;\n return '';\n }\n }\n }\n\n // 移除播放器DOM\n function removePlayerDom() {\n const dom = document.getElementById(id);\n dom && dom.remove();\n }\n // 创建播放器DOM\n function createPlayerDom() {\n if (!errorMsg) {\n removePlayerDom();\n const dom = document.createElement('div');\n dom.id = id;\n dom.style.width = '100%';\n dom.style.height = '100%';\n ysRef.value?.appendChild(dom);\n }\n }\n</script>\n\n<template>\n <div ref=\"ysRef\" class=\"i-player-bg i-player-container\">\n <div v-if=\"errorMsg\" class=\"i-player__error\" style=\"color: red; font-weight: bold\">\n {{ errorMsg }}\n </div>\n </div>\n</template>\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ysPlayer.vue2.mjs","sources":["../../../../../../../packages/components/live-player/src/ysPlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { useElementSize } from '@vueuse/core';\n import EZUIKit from 'ezuikit-js';\n import { nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue';\n import { uuid } from './live-player';\n // 萤石云播放器\n defineOptions({\n name: 'YsPlayer',\n });\n\n // 传值方式\n // 1、传url、accessToken\n // 2、传deviceSerial、channel、accessToken\n const props = defineProps<{\n // 播放地址\n // 高清:ezopen://open.ys7.com/${设备序列号}/${通道号}.hd.live\n // 流畅:ezopen://open.ys7.com/${设备序列号}/${通道号}.live\n url?: string;\n // 设备序列号\n deviceSerial?: string;\n // 通道号\n channel?: number;\n // 清晰度,默认为空,也表示高清\n // hd:高清;sd:流畅\n quality?: 'hd' | 'sd' | '';\n accessToken: string;\n // 播放器模板ID\n playerTemplate?: string;\n }>();\n\n // 播放器模板ID\n // 可在萤石云控制台查看、修改、获取\n // 位置:云直播-轻应用-特致珈默认模板\n const PLAYER_TEMPLATE = '5f295a9341a74d439b5d69374c90d501';\n const id = uuid();\n let playerInstance: any = null;\n let errorMsg = '';\n const ysRef = shallowRef();\n const { width, height } = useElementSize(ysRef);\n let ratio = 16 / 9;\n let isCurrentFullscreen = false;\n\n onMounted(() => play());\n\n onBeforeUnmount(() => destroy());\n\n defineExpose({ play, destroy, resize });\n\n // 防抖函数\n function debounce(func: Function, wait: number) {\n let timeout: ReturnType<typeof setTimeout> | null = null;\n return function (this: any, ...args: any[]) {\n if (timeout) clearTimeout(timeout);\n timeout = setTimeout(() => func.apply(this, args), wait);\n };\n }\n\n // 加上防抖的 resize 函数\n const debouncedResize = debounce(resize, 300);\n\n watch(\n () => [width.value, height.value, ratio],\n () => {\n if (!isCurrentFullscreen) {\n debouncedResize();\n }\n },\n );\n\n function play(options?: Record<string, any>) {\n if (!props.accessToken) {\n errorMsg = `params 'accessToken' is not found`;\n } else {\n const url = formatterUrl();\n if (url) {\n createPlayerDom();\n nextTick(() => createPlayer(options));\n }\n }\n }\n function destroy() {\n if (playerInstance) {\n playerInstance.destroy();\n playerInstance = null;\n removePlayerDom();\n }\n }\n function resize() {\n // 根据播放器宽高比,设置播放器高度\n if (width.value > 0 && height.value > 0) {\n let calculatedWidth = width.value;\n let calculatedHeight = calculatedWidth / ratio;\n if (calculatedHeight > height.value) {\n calculatedHeight = height.value;\n calculatedWidth = calculatedHeight * ratio;\n }\n if (playerInstance?.resize) {\n playerInstance.resize(calculatedWidth, calculatedHeight);\n } else {\n const dom = document.getElementById(id);\n if (dom) {\n dom.style.width = `${calculatedWidth}px`;\n dom.style.height = `${calculatedHeight}px`;\n }\n }\n }\n }\n\n /**\n * 创建萤石云播放器实例,播放萤石云直播流\n */\n function createPlayer(options?: Record<string, any>) {\n playerInstance = new EZUIKit.EZUIKitPlayer({\n id,\n url: formatterUrl(),\n accessToken: props.accessToken,\n template: props.playerTemplate || PLAYER_TEMPLATE,\n width: width.value,\n height: height.value,\n audio: 1,\n // @ts-ignore\n loggerOptions: {\n name: 'YSPLAYER',\n level: 'ERROR',\n showTime: true,\n },\n staticPath: '/plugins/ezuikit/ezuikit_static',\n ...options,\n });\n\n playerInstance.eventEmitter.on('fullscreen', () => {\n isCurrentFullscreen = true;\n });\n playerInstance.eventEmitter.on('exitFullscreen', () => {\n isCurrentFullscreen = false;\n });\n playerInstance.eventEmitter.on('videoInfo', (args: any) => {\n const { width: w, height: h } = args;\n // 计算播放器宽高比\n if (w && h) {\n ratio = w / h;\n }\n });\n }\n\n function formatterUrl(): string {\n if (props.url) {\n return props.url;\n } else {\n if (props.deviceSerial && props.channel) {\n const quality = props.quality === '' || props.quality === 'hd' ? 'hd.' : '';\n return `ezopen://open.ys7.com/${props.deviceSerial}/${props.channel}.${quality}live`;\n } else {\n errorMsg = `params 'deviceSerial' or 'channel' is not found`;\n return '';\n }\n }\n }\n\n // 移除播放器DOM\n function removePlayerDom() {\n const dom = document.getElementById(id);\n dom && dom.remove();\n }\n // 创建播放器DOM\n function createPlayerDom() {\n if (!errorMsg) {\n removePlayerDom();\n const dom = document.createElement('div');\n dom.id = id;\n dom.style.width = '100%';\n dom.style.height = '100%';\n ysRef.value?.appendChild(dom);\n }\n }\n</script>\n\n<template>\n <div ref=\"ysRef\" class=\"i-player-bg i-player-container\">\n <div v-if=\"errorMsg\" class=\"i-player__error\" style=\"color: red; font-weight: bold\">\n {{ errorMsg }}\n </div>\n </div>\n</template>\n"],"names":[],"mappings":"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"}
|
|
@@ -800,7 +800,6 @@ export declare const ISelect: import("../../types").SFCWithInstall<import("vue")
|
|
|
800
800
|
disabled: boolean;
|
|
801
801
|
placeholder: string;
|
|
802
802
|
clearable: boolean;
|
|
803
|
-
loadingText: string;
|
|
804
803
|
multiple: boolean;
|
|
805
804
|
valueKey: string;
|
|
806
805
|
collapseTags: boolean;
|
|
@@ -816,5 +815,6 @@ export declare const ISelect: import("../../types").SFCWithInstall<import("vue")
|
|
|
816
815
|
persistent: boolean;
|
|
817
816
|
fitInputWidth: boolean;
|
|
818
817
|
placement: "left" | "bottom" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
|
|
818
|
+
loadingText: string;
|
|
819
819
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
|
|
820
820
|
export default ISelect;
|
|
@@ -800,7 +800,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
800
800
|
disabled: boolean;
|
|
801
801
|
placeholder: string;
|
|
802
802
|
clearable: boolean;
|
|
803
|
-
loadingText: string;
|
|
804
803
|
multiple: boolean;
|
|
805
804
|
valueKey: string;
|
|
806
805
|
collapseTags: boolean;
|
|
@@ -816,5 +815,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
816
815
|
persistent: boolean;
|
|
817
816
|
fitInputWidth: boolean;
|
|
818
817
|
placement: "left" | "bottom" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end";
|
|
818
|
+
loadingText: string;
|
|
819
819
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
820
820
|
export default _default;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
export declare const ITzjPlayer: import("../../types").SFCWithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
url: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
default: string;
|
|
5
|
+
};
|
|
6
|
+
accessToken: {
|
|
7
|
+
type: StringConstructor;
|
|
8
|
+
default: string;
|
|
9
|
+
};
|
|
10
|
+
}>, {
|
|
11
|
+
props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
|
|
12
|
+
url: {
|
|
13
|
+
type: StringConstructor;
|
|
14
|
+
default: string;
|
|
15
|
+
};
|
|
16
|
+
accessToken: {
|
|
17
|
+
type: StringConstructor;
|
|
18
|
+
default: string;
|
|
19
|
+
};
|
|
20
|
+
}>> & Readonly<{}> & {}>;
|
|
21
|
+
comp: import("vue").ShallowRef<any, any>;
|
|
22
|
+
compRef: import("vue").ShallowRef<any, any>;
|
|
23
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
24
|
+
url: {
|
|
25
|
+
type: StringConstructor;
|
|
26
|
+
default: string;
|
|
27
|
+
};
|
|
28
|
+
accessToken: {
|
|
29
|
+
type: StringConstructor;
|
|
30
|
+
default: string;
|
|
31
|
+
};
|
|
32
|
+
}>> & Readonly<{}>, {
|
|
33
|
+
url: string;
|
|
34
|
+
accessToken: string;
|
|
35
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
|
|
36
|
+
export default ITzjPlayer;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import '../../utils/index.mjs';
|
|
2
|
+
import './src/tzj-player.vue.mjs';
|
|
3
|
+
import { withInstall } from '../../utils/install.mjs';
|
|
4
|
+
import _sfc_main from './src/tzj-player.vue2.mjs';
|
|
5
|
+
|
|
6
|
+
const ITzjPlayer = withInstall(_sfc_main);
|
|
7
|
+
|
|
8
|
+
export { ITzjPlayer, ITzjPlayer as default };
|
|
9
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/tzj-player/index.ts"],"sourcesContent":["import { withInstall } from '../../utils';\nimport TzjPlayer from './src/tzj-player.vue';\n\nexport const ITzjPlayer = withInstall(TzjPlayer); // 增加类型\n\nexport default ITzjPlayer;\n"],"names":["TzjPlayer"],"mappings":";;;;;AAGa,MAAA,UAAA,GAAa,YAAYA,SAAS;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
url: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
6
|
+
}>, {
|
|
7
|
+
props: any;
|
|
8
|
+
player: any;
|
|
9
|
+
playerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
|
|
10
|
+
playSuccess: import("vue").Ref<boolean, boolean>;
|
|
11
|
+
playUrl: import("vue").Ref<string, string>;
|
|
12
|
+
createPlayer: () => Promise<void>;
|
|
13
|
+
destroy: () => void;
|
|
14
|
+
play: (url?: string) => void;
|
|
15
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
16
|
+
url: {
|
|
17
|
+
type: StringConstructor;
|
|
18
|
+
required: true;
|
|
19
|
+
};
|
|
20
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
21
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"easyPlayer.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { defineComponent, shallowRef, ref, onMounted, watch, onBeforeUnmount, nextTick, openBlock, createElementBlock, createElementVNode, createCommentVNode } from 'vue';
|
|
2
|
+
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
5
|
+
const _hoisted_1 = { class: "i-tzj-player" };
|
|
6
|
+
const _hoisted_2 = {
|
|
7
|
+
key: 0,
|
|
8
|
+
class: "i-tzj-player__error"
|
|
9
|
+
};
|
|
10
|
+
const _hoisted_3 = {
|
|
11
|
+
key: 1,
|
|
12
|
+
class: "i-tzj-player__error"
|
|
13
|
+
};
|
|
14
|
+
var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
15
|
+
...{
|
|
16
|
+
name: "EasyPlayer"
|
|
17
|
+
},
|
|
18
|
+
__name: "easyPlayer",
|
|
19
|
+
props: {
|
|
20
|
+
url: {}
|
|
21
|
+
},
|
|
22
|
+
setup(__props, { expose: __expose }) {
|
|
23
|
+
const props = __props;
|
|
24
|
+
let player = null;
|
|
25
|
+
const playerRef = shallowRef();
|
|
26
|
+
const playSuccess = ref(true);
|
|
27
|
+
const playUrl = ref("");
|
|
28
|
+
onMounted(() => {
|
|
29
|
+
if (props.url) {
|
|
30
|
+
playUrl.value = props.url;
|
|
31
|
+
createPlayer();
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
watch(
|
|
35
|
+
() => props.url,
|
|
36
|
+
(newUrl) => {
|
|
37
|
+
if (newUrl) {
|
|
38
|
+
playUrl.value = newUrl;
|
|
39
|
+
createPlayer();
|
|
40
|
+
} else {
|
|
41
|
+
playUrl.value = "";
|
|
42
|
+
destroy();
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
onBeforeUnmount(() => {
|
|
47
|
+
playUrl.value = "";
|
|
48
|
+
destroy();
|
|
49
|
+
});
|
|
50
|
+
__expose({
|
|
51
|
+
play,
|
|
52
|
+
destroy
|
|
53
|
+
});
|
|
54
|
+
async function createPlayer() {
|
|
55
|
+
destroy();
|
|
56
|
+
await nextTick();
|
|
57
|
+
player = new window.EasyPlayerPro(playerRef.value, {
|
|
58
|
+
isLive: true,
|
|
59
|
+
// 是否直播
|
|
60
|
+
hasAudio: true,
|
|
61
|
+
// 是否解析音频
|
|
62
|
+
bufferTime: 0.2,
|
|
63
|
+
// 缓存时长
|
|
64
|
+
stretch: true,
|
|
65
|
+
// 加视频拉伸
|
|
66
|
+
MSE: false,
|
|
67
|
+
WCS: false,
|
|
68
|
+
WASM: true,
|
|
69
|
+
debug: false,
|
|
70
|
+
operateBtns: {
|
|
71
|
+
performance: false
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
player.on("timeout", () => {
|
|
75
|
+
playSuccess.value = false;
|
|
76
|
+
destroy();
|
|
77
|
+
});
|
|
78
|
+
player.on("error", () => {
|
|
79
|
+
playSuccess.value = false;
|
|
80
|
+
destroy();
|
|
81
|
+
});
|
|
82
|
+
play(props.url);
|
|
83
|
+
}
|
|
84
|
+
__name(createPlayer, "createPlayer");
|
|
85
|
+
function destroy() {
|
|
86
|
+
if (player) {
|
|
87
|
+
player.destroy();
|
|
88
|
+
player = null;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
__name(destroy, "destroy");
|
|
92
|
+
function play(url) {
|
|
93
|
+
if (player && (url || props.url)) {
|
|
94
|
+
playUrl.value = url || props.url;
|
|
95
|
+
player.play(playUrl.value);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
__name(play, "play");
|
|
99
|
+
return (_ctx, _cache) => {
|
|
100
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
101
|
+
createElementVNode(
|
|
102
|
+
"div",
|
|
103
|
+
{
|
|
104
|
+
ref_key: "playerRef",
|
|
105
|
+
ref: playerRef,
|
|
106
|
+
class: "i-tzj-player-content"
|
|
107
|
+
},
|
|
108
|
+
null,
|
|
109
|
+
512
|
|
110
|
+
/* NEED_PATCH */
|
|
111
|
+
),
|
|
112
|
+
!playSuccess.value ? (openBlock(), createElementBlock("div", _hoisted_2, "\u65E0\u4FE1\u53F7")) : createCommentVNode("v-if", true),
|
|
113
|
+
!playUrl.value ? (openBlock(), createElementBlock("div", _hoisted_3, "\u65E0\u64AD\u653E\u5730\u5740")) : createCommentVNode("v-if", true)
|
|
114
|
+
]);
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
export { _sfc_main as default };
|
|
120
|
+
//# sourceMappingURL=easyPlayer.vue2.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"easyPlayer.vue2.mjs","sources":["../../../../../../../packages/components/tzj-player/src/easyPlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';\n\n defineOptions({\n name: 'EasyPlayer',\n });\n\n const props = defineProps<{\n url: string;\n }>();\n\n let player: any = null;\n const playerRef = shallowRef<HTMLElement>();\n const playSuccess = ref(true);\n const playUrl = ref('');\n\n onMounted(() => {\n if (props.url) {\n playUrl.value = props.url;\n createPlayer();\n }\n });\n\n watch(\n () => props.url,\n newUrl => {\n if (newUrl) {\n playUrl.value = newUrl;\n createPlayer();\n } else {\n playUrl.value = '';\n destroy();\n }\n },\n );\n\n onBeforeUnmount(() => {\n playUrl.value = '';\n destroy();\n });\n\n defineExpose({\n play,\n destroy,\n });\n\n async function createPlayer() {\n destroy();\n await nextTick();\n player = new window.EasyPlayerPro(playerRef.value, {\n isLive: true, // 是否直播\n hasAudio: true, // 是否解析音频\n bufferTime: 0.2, // 缓存时长\n stretch: true, // 加视频拉伸\n MSE: false,\n WCS: false,\n WASM: true,\n debug: false,\n operateBtns: {\n performance: false,\n },\n });\n\n // 加载超时\n player.on('timeout', () => {\n playSuccess.value = false;\n destroy();\n });\n // 播放异常\n player.on('error', () => {\n playSuccess.value = false;\n destroy();\n });\n play(props.url);\n }\n\n function destroy() {\n if (player) {\n player.destroy();\n player = null;\n }\n }\n\n function play(url?: string) {\n if (player && (url || props.url)) {\n playUrl.value = url || props.url;\n player.play(playUrl.value);\n }\n }\n</script>\n\n<template>\n <div class=\"i-tzj-player\">\n <div ref=\"playerRef\" class=\"i-tzj-player-content\" />\n\n <div v-if=\"!playSuccess\" class=\"i-tzj-player__error\">无信号</div>\n <div v-if=\"!playUrl\" class=\"i-tzj-player__error\">无播放地址</div>\n </div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAOE,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,IAAI,MAAc,GAAA,IAAA;AAClB,IAAA,MAAM,YAAY,UAAwB,EAAA;AAC1C,IAAM,MAAA,WAAA,GAAc,IAAI,IAAI,CAAA;AAC5B,IAAM,MAAA,OAAA,GAAU,IAAI,EAAE,CAAA;AAEtB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,MAAM,GAAK,EAAA;AACb,QAAA,OAAA,CAAQ,QAAQ,KAAM,CAAA,GAAA;AACtB,QAAa,YAAA,EAAA;AAAA;AACf,KACD,CAAA;AAED,IAAA,KAAA;AAAA,MACE,MAAM,KAAM,CAAA,GAAA;AAAA,MACZ,CAAU,MAAA,KAAA;AACR,QAAA,IAAI,MAAQ,EAAA;AACV,UAAA,OAAA,CAAQ,KAAQ,GAAA,MAAA;AAChB,UAAa,YAAA,EAAA;AAAA,SACR,MAAA;AACL,UAAA,OAAA,CAAQ,KAAQ,GAAA,EAAA;AAChB,UAAQ,OAAA,EAAA;AAAA;AACV;AACF,KACF;AAEA,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAA,OAAA,CAAQ,KAAQ,GAAA,EAAA;AAChB,MAAQ,OAAA,EAAA;AAAA,KACT,CAAA;AAED,IAAa,QAAA,CAAA;AAAA,MACX,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,eAAe,YAAe,GAAA;AAC5B,MAAQ,OAAA,EAAA;AACR,MAAA,MAAM,QAAS,EAAA;AACf,MAAA,MAAA,GAAS,IAAI,MAAA,CAAO,aAAc,CAAA,SAAA,CAAU,KAAO,EAAA;AAAA,QACjD,MAAQ,EAAA,IAAA;AAAA;AAAA,QACR,QAAU,EAAA,IAAA;AAAA;AAAA,QACV,UAAY,EAAA,GAAA;AAAA;AAAA,QACZ,OAAS,EAAA,IAAA;AAAA;AAAA,QACT,GAAK,EAAA,KAAA;AAAA,QACL,GAAK,EAAA,KAAA;AAAA,QACL,IAAM,EAAA,IAAA;AAAA,QACN,KAAO,EAAA,KAAA;AAAA,QACP,WAAa,EAAA;AAAA,UACX,WAAa,EAAA;AAAA;AACf,OACD,CAAA;AAGD,MAAO,MAAA,CAAA,EAAA,CAAG,WAAW,MAAM;AACzB,QAAA,WAAA,CAAY,KAAQ,GAAA,KAAA;AACpB,QAAQ,OAAA,EAAA;AAAA,OACT,CAAA;AAED,MAAO,MAAA,CAAA,EAAA,CAAG,SAAS,MAAM;AACvB,QAAA,WAAA,CAAY,KAAQ,GAAA,KAAA;AACpB,QAAQ,OAAA,EAAA;AAAA,OACT,CAAA;AACD,MAAA,IAAA,CAAK,MAAM,GAAG,CAAA;AAAA;AA3BD,IAAA,MAAA,CAAA,YAAA,EAAA,cAAA,CAAA;AA8Bf,IAAA,SAAS,OAAU,GAAA;AACjB,MAAA,IAAI,MAAQ,EAAA;AACV,QAAA,MAAA,CAAO,OAAQ,EAAA;AACf,QAAS,MAAA,GAAA,IAAA;AAAA;AACX;AAJO,IAAA,MAAA,CAAA,OAAA,EAAA,SAAA,CAAA;AAOT,IAAA,SAAS,KAAK,GAAc,EAAA;AAC1B,MAAI,IAAA,MAAA,KAAW,GAAO,IAAA,KAAA,CAAM,GAAM,CAAA,EAAA;AAChC,QAAQ,OAAA,CAAA,KAAA,GAAQ,OAAO,KAAM,CAAA,GAAA;AAC7B,QAAO,MAAA,CAAA,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA;AAC3B;AAJO,IAAA,MAAA,CAAA,IAAA,EAAA,MAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ExtractPropTypes } from 'vue';
|
|
2
|
+
import type TzjPlayer from './tzj-player.vue';
|
|
3
|
+
export declare const TzjPlayerProps: {
|
|
4
|
+
url: {
|
|
5
|
+
type: StringConstructor;
|
|
6
|
+
default: string;
|
|
7
|
+
};
|
|
8
|
+
accessToken: {
|
|
9
|
+
type: StringConstructor;
|
|
10
|
+
default: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export declare function uuid(): string;
|
|
14
|
+
export type TzjPlayerPropsType = ExtractPropTypes<typeof TzjPlayerProps>;
|
|
15
|
+
export type TzjPlayerInstance = InstanceType<typeof TzjPlayer>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
const TzjPlayerProps = {
|
|
4
|
+
url: {
|
|
5
|
+
type: String,
|
|
6
|
+
default: ""
|
|
7
|
+
},
|
|
8
|
+
accessToken: {
|
|
9
|
+
type: String,
|
|
10
|
+
default: ""
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
function uuid() {
|
|
14
|
+
return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, (c) => {
|
|
15
|
+
const r = Math.random() * 16 | 0;
|
|
16
|
+
const v = c === "x" ? r : r & 3 | 8;
|
|
17
|
+
return v.toString(16);
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
__name(uuid, "uuid");
|
|
21
|
+
|
|
22
|
+
export { TzjPlayerProps, uuid };
|
|
23
|
+
//# sourceMappingURL=tzj-player.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tzj-player.mjs","sources":["../../../../../../../packages/components/tzj-player/src/tzj-player.ts"],"sourcesContent":["import type { ExtractPropTypes } from 'vue';\nimport type TzjPlayer from './tzj-player.vue';\n\nexport const TzjPlayerProps = {\n url: {\n type: String,\n default: '',\n },\n accessToken: {\n type: String,\n default: '',\n },\n};\n\nexport function uuid(): string {\n return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, c => {\n const r = (Math.random() * 16) | 0;\n const v = c === 'x' ? r : (r & 0x3) | 0x8;\n return v.toString(16);\n });\n}\n\nexport type TzjPlayerPropsType = ExtractPropTypes<typeof TzjPlayerProps>;\nexport type TzjPlayerInstance = InstanceType<typeof TzjPlayer>;\n"],"names":[],"mappings":";;AAGO,MAAM,cAAiB,GAAA;AAAA,EAC5B,GAAK,EAAA;AAAA,IACH,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA;AAAA,GACX;AAAA,EACA,WAAa,EAAA;AAAA,IACX,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA;AAAA;AAEb;AAEO,SAAS,IAAe,GAAA;AAC7B,EAAO,OAAA,kCAAA,CAAmC,OAAQ,CAAA,OAAA,EAAS,CAAK,CAAA,KAAA;AAC9D,IAAA,MAAM,CAAK,GAAA,IAAA,CAAK,MAAO,EAAA,GAAI,EAAM,GAAA,CAAA;AACjC,IAAA,MAAM,CAAI,GAAA,CAAA,KAAM,GAAM,GAAA,CAAA,GAAK,IAAI,CAAO,GAAA,CAAA;AACtC,IAAO,OAAA,CAAA,CAAE,SAAS,EAAE,CAAA;AAAA,GACrB,CAAA;AACH;AANgB,MAAA,CAAA,IAAA,EAAA,MAAA,CAAA;;;;"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
url: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
default: string;
|
|
5
|
+
};
|
|
6
|
+
accessToken: {
|
|
7
|
+
type: StringConstructor;
|
|
8
|
+
default: string;
|
|
9
|
+
};
|
|
10
|
+
}>, {
|
|
11
|
+
props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
|
|
12
|
+
url: {
|
|
13
|
+
type: StringConstructor;
|
|
14
|
+
default: string;
|
|
15
|
+
};
|
|
16
|
+
accessToken: {
|
|
17
|
+
type: StringConstructor;
|
|
18
|
+
default: string;
|
|
19
|
+
};
|
|
20
|
+
}>> & Readonly<{}> & {}>;
|
|
21
|
+
comp: import("vue").ShallowRef<any, any>;
|
|
22
|
+
compRef: import("vue").ShallowRef<any, any>;
|
|
23
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
24
|
+
url: {
|
|
25
|
+
type: StringConstructor;
|
|
26
|
+
default: string;
|
|
27
|
+
};
|
|
28
|
+
accessToken: {
|
|
29
|
+
type: StringConstructor;
|
|
30
|
+
default: string;
|
|
31
|
+
};
|
|
32
|
+
}>> & Readonly<{}>, {
|
|
33
|
+
url: string;
|
|
34
|
+
accessToken: string;
|
|
35
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
36
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tzj-player.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|