提交一波

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/hls.min.js',
+  '/presource/datascreen/js/clappr.min.js',
 ]
 window.$loadScript = (type = 'js', url, dom = "body") => {
   let flag = false;
@@ -78,14 +79,22 @@ Vue.component("HlsPlayer", {
     url: {default: "https://open.ys7.com/v3/openlive/155715496_1_1.m3u8?expire=1747359002&id=712960386311127040&t=c9c6ad362940b1fb4ea7a736cec78980aa9ad1d27d6e3eddf75788c0564e9d7b&ev=100"}
   },
   mounted() {
-    const {Clappr} = window
+    const {Hls,Clappr} = window
-    if (Clappr && this.url) {
+    // 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({
-        source: this.url,
         mute: true, //静音为true
         width: '100%',
         height: '100%',
-        // poster:'http://clappr.io/poster.png', //设置封面图
+        source: this.url,
         autoPlay: true,
         disableCanAutoPlay: true, //禁用检测浏览器是否可以自动播放视频
         hideMediaControl: true, //禁用媒体控制自动隐藏
@@ -93,13 +102,8 @@ Vue.component("HlsPlayer", {
         hideVolumeBar: true, //当嵌入的宽度小于320时，音量条将被隐藏
         exitFullscreenOnEnd: false, //禁用播放器将在媒体结束时自动退出全屏显示，即播放结束后不会退出全屏
         mediacontrol: {seekbar: "#000", buttons: "#FFF"}, //定义进度条和底部暂停等图标的颜色
-        events: {
+      })
-          onError: function () { //当播放出错时
+      player.attachTo(this.$el)
-            alert("播放出错!")
-          },
-        }
-      });
-      player.attachTo(this.$el);
     }
   }
 })

src/views/AppCarouselList.vue

@@ -3,39 +3,6 @@ const currentDate = "20240705"
 export default {
   name: "AppCarouselList",
   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',
@@ -179,7 +146,7 @@ export default {
     <div class="layout">
       <div class="store" v-for="store in list" :key="store.storeCode">
         <div class="headerTitle" v-text="store.label"/>
-        <el-carousel indicator-position="none" height="250px">
+        <el-carousel indicator-position="none" height="250px" :autoplay="false">
           <el-carousel-item v-for="(url,i) in store.camera" :key="i">
             <hls-player :url="url"/>
           </el-carousel-item>

src/views/AppStoresTable.vue

@@ -158,12 +158,12 @@ export default {
 
 <template>
   <section class="AppStoresTable" @click="dialog=false">
-    <el-carousel indicator-position="none" :height="height" :autoplay="search.changeWay==1" @change="v=>curI=(v||0)">
+    <el-carousel indicator-position="none" :height="height" :autoplay="search.changeWay==1" @change="v=>curI=(v||0)" :interval="15000">
       <el-carousel-item v-for="(group,i) in storeList" :key="i">
         <div class="layout">
           <div class="store" v-for="store in group" :key="store.storeCode">
             <div class="headerTitle" v-text="store.storeName" @click="gotoDetail(store)"/>
-            <el-carousel indicator-position="none" height="250px" @change="v=>curJ=(v||0)">
+            <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"/>
               </el-carousel-item>