兼容h265协议

src/utils/inject.js

@@ -11,7 +11,8 @@ 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',
+  '/presource/datascreen/js/ezuikit-flv/ezuikit.js',
+  // '/presource/datascreen/js/ezuikit.js',
   '/presource/datascreen/js/clappr.min.js',
 ]
 window.$loadScript = (type = 'js', url, dom = "body") => {
@@ -76,35 +77,58 @@ Vue.prototype.$storeBoard = Vue.observable({
 Vue.component("HlsPlayer", {
   render: (h) => h('div', {style: {width: '100%', height: '100%'}}),
   props: {
+    id: {default: ""},
     url: {default: "https://open.ys7.com/v3/openlive/155715496_1_1.m3u8?expire=1747359002&id=712960386311127040&t=c9c6ad362940b1fb4ea7a736cec78980aa9ad1d27d6e3eddf75788c0564e9d7b&ev=100"}
   },
-  mounted() {
-    const {Hls,Clappr} = window
-    // if (Hls && this.url) {
-    //   if (Hls.isSupported()) {
-    //     const hls = new Hls()
-    //     hls.loadSource(this.url)
-    //     hls.attachMedia(this.$el)
-    //   } else if (this.$el.canPlayType('application/vnd.apple.mpegurl')) {
-    //     this.$el.src = this.url;
-    //   }
-    // }
-    if(Clappr && this.url) {
-      const player = new Clappr.Player({
-        mute: true, //静音为true
-        width: '100%',
-        height: '100%',
-        source: this.url,
-        autoPlay: true,
-        disableCanAutoPlay: true, //禁用检测浏览器是否可以自动播放视频
-        hideMediaControl: true, //禁用媒体控制自动隐藏
-        hideMediaControlDelay: 100, //更改默认的媒体控件自动隐藏超时值
-        hideVolumeBar: true, //当嵌入的宽度小于320时，音量条将被隐藏
-        exitFullscreenOnEnd: false, //禁用播放器将在媒体结束时自动退出全屏显示，即播放结束后不会退出全屏
-        mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定义进度条和底部暂停等图标的颜色
-      })
-      player.attachTo(this.$el)
+  data() {
+    return {
+      player: null
     }
+  },
+  mounted() {
+    const {Clappr, EzuikitFlv, EZUIKit} = window
+    if (EzuikitFlv && this.url) {
+      const {id} = this.$props
+      this.$el.id = id
+      this.player = new EzuikitFlv({
+        container: id,
+        url: this.url,
+        decoder: "/presource/datascreen/js/ezuikit-flv/decoder.js"
+      })
+      this.player.play()
+    }
+    // if (EZUIKit && this.url) {
+    //   const {id} = this.$props
+    //   this.$el.id = id
+    //   this.player = new EZUIKit.EZUIKitPlayer({
+    //     id, // 视频容器ID
+    //     width: '100%', // 播放器宽度，播放器高度会按比例缩放
+    //     height: '100%',
+    //     accessToken: 'at.c1lrqlq7ae1hj18tbpe9q8ip4hhrbfcw-7ax2lsg0rz-06anrcm-tcd5wjaz9',
+    //     url: 'ezopen://open.ys7.com/BA9983755/1.live',
+    //   })
+    //   this.player.play()
+    // }
+
+    // if (Clappr && this.url) {
+    //   this.player = new Clappr.Player({
+    //     mute: true, //静音为true
+    //     width: '100%',
+    //     height: '100%',
+    //     source: this.url,
+    //     autoPlay: true,
+    //     disableCanAutoPlay: true, //禁用检测浏览器是否可以自动播放视频
+    //     hideMediaControl: true, //禁用媒体控制自动隐藏
+    //     hideMediaControlDelay: 100, //更改默认的媒体控件自动隐藏超时值
+    //     hideVolumeBar: true, //当嵌入的宽度小于320时，音量条将被隐藏
+    //     exitFullscreenOnEnd: false, //禁用播放器将在媒体结束时自动退出全屏显示，即播放结束后不会退出全屏
+    //     mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定义进度条和底部暂停等图标的颜色
+    //   })
+    //   this.player.attachTo(this.$el)
+    // }
+  },
+  beforeDestroy() {
+    this.player?.destroy()
   }
 })
 Vue.component("tableColumn", {

src/views/AppStoresTable.vue

@@ -77,7 +77,7 @@ export default {
               const {storeCameraVOList = [], storeName, longitude, latitude} = this.cameras.find(e => e.storeCode == storeCode) || {}
               const keyGoods = this.storeKeyGoods.filter(e => e.storeCode == storeCode) || []
               const categorySale = this.categorySales.filter(e => e.storeCode == storeCode) || []
-              return {storeCode, storeName, longitude, latitude, camera: storeCameraVOList.map(e => e.cameraUrl), keyGoods, categorySale}
+              return {storeCode, storeName, longitude, latitude, camera: [...new Set(storeCameraVOList.map(e => e.cameraUrl))], keyGoods, categorySale}
             }).filter(e => !!e.storeName) || []
           })
     },
@@ -165,7 +165,7 @@ export default {
             <div class="headerTitle" v-text="store.storeName" @click="gotoDetail(store)"/>
             <el-carousel indicator-position="none" height="250px" @change="v=>curJ=(v||0)" :autoplay="false">
               <el-carousel-item v-for="(url,j) in store.camera" :key="[i,j].join('_')">
-                <hls-player v-if="`${i}_${j}`==`${curI}_${curJ}`" :url="url"/>
+                <hls-player v-if="`${i}_${j}`==`${curI}_${curJ}`" :id="`hls_player_${store.storeCode}_${i}_${j}`" :url="url"/>
               </el-carousel-item>
             </el-carousel>
             <div class="subTitle" v-text="'品类销售情况'"/>