feat: 集成音频播放组件和视频播放器

2026-02-11 14:49:16 +08:00
parent 9a92e6ffb4
commit c6feeeef8b
48 changed files with 15614 additions and 1584 deletions
--- a/components/ali-video/audio.vue
+++ b/components/ali-video/audio.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="video-player">
+    <image :src="coverImageUrl" class="video-cover" style="width: 100%; height:100%;" />
+    <CxAudioPlayer
+      v-if="list.length > 0"
+      :list="list"
+      :autoplays="true"
+      style="
+        display: flex; align-items: center; justify-content: center;
+        position: absolute; left: 0; top: 0;
+        width: 100%; height: 100%;
+        background-color: rgba(0, 0, 0, 0.6);
+      "
+    />
+  </div>
+</template>
+<script>
+import { mainClient } from '@/api/clients';
+import CxAudioPlayer from './cx-audio-play/cx-audio-play.vue'
+export default {
+  props: {
+    currentVideo: {
+      type: Object,
+      default: () => {}
+    },
+    coverImageUrl: {
+      type: String,
+      default: ''
+    },
+    http: {
+      type: Object,
+      default: () => {}
+    },
+  },
+  components: {
+    CxAudioPlayer
+  },
+  watch: {
+    currentVideo: {
+      handler(newVal, oldVal) {
+        if (!newVal || !newVal.id) return
+        this.fetchRealAudioUrl(newVal)
+      },
+      immediate: true,
+      deep: true,
+    }
+  },
+  data() {
+    return {
+      isfresh: false,
+      screenLoading: false,
+      isFullScreen: false,
+      changeVideoLock: false,
+      secondCountDown: 10,
+      list: []
+    }
+  },
+  methods: {
+    async fetchRealAudioUrl(videoInfo) {
+      if (!videoInfo) return
+      const data = { ...videoInfo }
+      try {
+        const res = await mainClient.request({
+          url: 'sociology/course/checkVideo',
+          method: 'POST',
+          data,
+          header: {
+            'Content-Type': 'application/json'
+          }
+        })
+        console.log('获取播放凭证666',JSON.stringify(res.video));
+        const real = res && res.video ? res.video : null
+        if (!real) {
+          this.list = []
+          return
+        }
+        const src = real.videoUrl || real.m3u8Url || real.source || ''
+        if (!src) {
+          
+          this.list = []
+          return
+        }
+        this.list = [{ recorPath: src }]
+      } catch (e) {
+        this.list = []
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.video-player {
+  position: relative;
+  height: 400rpx;
+  width: 100%;
+
+  .player {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+}
+</style>