准备替换推流组件了

src/utils/inject.js

@@ -11,6 +11,7 @@ const libs = [
   `${KENGEE_CDN_BASE}/js/three/three.min.js`,
   `${KENGEE_CDN_BASE}/js/d3-array.min.js`,
   `${KENGEE_CDN_BASE}/js/d3-geo.min.js`,
+  '/presource/datascreen/js/hls.min.js'
 ]
 window.$loadScript = (type = 'js', url, dom = "body") => {
   let flag = false;
@@ -71,6 +72,37 @@ Vue.prototype.$storeBoard = Vue.observable({
   query: {},
   search: {}
 })
+Vue.component("HlsPlayer", {
+  render: (h) => h('div', {style: {width: '100%', height: '100%'}}),
+  props: {
+    url: {default: "https://open.ys7.com/v3/openlive/155715496_1_1.m3u8?expire=1747359002&id=712960386311127040&t=c9c6ad362940b1fb4ea7a736cec78980aa9ad1d27d6e3eddf75788c0564e9d7b&ev=100"}
+  },
+  mounted() {
+    const {Clappr} = window
+    if (Clappr && this.url) {
+      const player = new Clappr.Player({
+        source: this.url,
+        mute: true, //静音为true
+        width: '100%',
+        height: '100%',
+        // poster:'http://clappr.io/poster.png', //设置封面图
+        autoPlay: true,
+        disableCanAutoPlay: true, //禁用检测浏览器是否可以自动播放视频
+        hideMediaControl: true, //禁用媒体控制自动隐藏
+        hideMediaControlDelay: 100, //更改默认的媒体控件自动隐藏超时值
+        hideVolumeBar: true, //当嵌入的宽度小于320时，音量条将被隐藏
+        exitFullscreenOnEnd: false, //禁用播放器将在媒体结束时自动退出全屏显示，即播放结束后不会退出全屏
+        mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定义进度条和底部暂停等图标的颜色
+        events: {
+          onError: function () { //当播放出错时
+            alert("播放出错!")
+          },
+        }
+      });
+      player.attachTo(this.$el);
+    }
+  }
+})
 Vue.component("tableColumn", {
   props: {
     column: {default: () => ({})}

src/views/AppStoresTable.vue

@@ -2,39 +2,6 @@
 export default {
   name: "AppStoresTable",
   label: "多店监控",
-  components: {
-    HlsPlayer: {
-      render: (h) => h('div', {style: {width: '100%', height: '100%'}}),
-      props: {
-        url: {default: "https://open.ys7.com/v3/openlive/155715496_1_1.m3u8?expire=1747359002&id=712960386311127040&t=c9c6ad362940b1fb4ea7a736cec78980aa9ad1d27d6e3eddf75788c0564e9d7b&ev=100"}
-      },
-      mounted() {
-        const {Clappr} = window
-        if (Clappr && this.url) {
-          const player = new Clappr.Player({
-            source: this.url,
-            mute: true, //静音为true
-            width: '100%',
-            height: '100%',
-            // poster:'http://clappr.io/poster.png', //设置封面图
-            autoPlay: true,
-            disableCanAutoPlay: true, //禁用检测浏览器是否可以自动播放视频
-            hideMediaControl: true, //禁用媒体控制自动隐藏
-            hideMediaControlDelay: 100, //更改默认的媒体控件自动隐藏超时值
-            hideVolumeBar: true, //当嵌入的宽度小于320时，音量条将被隐藏
-            exitFullscreenOnEnd: false, //禁用播放器将在媒体结束时自动退出全屏显示，即播放结束后不会退出全屏
-            mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定义进度条和底部暂停等图标的颜色
-            events: {
-              onError: function () { //当播放出错时
-                alert("播放出错!")
-              },
-            }
-          });
-          player.attachTo(this.$el);
-        }
-      }
-    }
-  },
   data() {
     return {
       height: '600px',