feat：完善功能

src/components/CoreVideo/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="core-video">
     <div class="title">核心景区视频</div>
-    <ul class="list" v-loading="loading">
+
+    <ul class="list">
       <li
         class="item"
         :style="{ backgroundImage: `url(${index == 0 ? primary : error})` }"
@@ -12,7 +13,17 @@
           <p :class="[index % 2 === 0 ? 'item-title--primary' : 'item-title--error']">
             三峡之巅-最新异常名称三峡之巅-最新异常名称三峡之巅-最新异常名称
           </p>
-          <img class="item-img" src="@/assets/images/cover.png" />
+          <!-- <img class="item-img" src="@/assets/images/cover.png" /> -->
+          <video
+            class="item-img"
+            :ref="(el) => getRefs(el, index)"
+            muted
+            autoplay
+            controls
+            style="object-fit: fill"
+          >
+            <source src="" type="application/x-mpegURL" />
+          </video>
         </div>
       </li>
     </ul>
@@ -22,13 +33,28 @@
 <script setup>
   import primary from '@/assets/images/item-primary.png'
   import error from '@/assets/images/item-error.png'
-  let loading = ref(true)
-  let list = ref(0)
+  import { getVideoListApi } from '@/api/home'
+  import Hls from 'hls.js'
+
+  let list = ref(2)
+
+  const getRefs = (el) => {
+    if (el) {
+      const hls = new Hls()
+      hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
+      hls.attachMedia(el)
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        el.play()
+      })
+    }
+  }
+  const getVideoList = async () => {
+    let res = await getVideoListApi({
+      businessVideoDisplayPosition: ''
+    })
+  }
   onMounted(() => {
-    setTimeout(() => {
-      loading.value = false
-      list.value = 10
-    }, 2000)
+    getVideoList()
   })
 </script>