Revert "直播设置"

This reverts commit 1d27b46c05bf6f10f03a65aa5a87b3e6df4ddfa5.

.env.development

@@ -30,8 +30,7 @@ VUE_APP_VIDEO_LINE_2 = https://xfkobs.ylrztop.com
 VUE_APP_VIDEO_URL = https://bdhdtvolcengine.ylrztop.com
 #火山云视频点播空间名
 VUE_APP_HSY_SPACE = bdhdt-2114522511
-#直播解码路径
-LIVE_PATH = /live
+
 
 VUE_APP_LIVE_WS_URL = ws://127.0.0.1:7114/ws
 

.env.prod-hdt

@@ -30,8 +30,6 @@ VUE_APP_VIDEO_LINE_2 = https://hdtobs.ylrztop.com
 VUE_APP_VIDEO_URL = https://bdhdtvolcengine.ylrztop.com
 #火山云视频点播空间名
 VUE_APP_HSY_SPACE = bdhdt-2114522511
-#直播解码路径
-LIVE_PATH = /live
 
 # 开发环境配置
 ENV = 'development'

src/api/live/live.js

@@ -157,12 +157,4 @@ export function getTagsListByCorpId(qwTagGroup) {
     method: 'get',
     params:qwTagGroup
   })
-}
-
-// 清除直播间缓存
-export function clearLiveCache(liveId) {
-  return request({
-    url: '/live/live/clearCache/' + liveId,
-    method: 'post'
-  })
-}
+}

src/utils/cos.js

@@ -39,7 +39,6 @@ export const uploadObject = async (file, onProgress, type, callBackUp) => {
     })
 
     console.log("初始化成功")
-    console.log(process.env)
     const fileName = file.name || ""
     const upload_file_name = new Date().getTime() + "." + fileName.split(".")[fileName.split(".").length - 1]
     const date = new Date()
@@ -49,18 +48,7 @@ export const uploadObject = async (file, onProgress, type, callBackUp) => {
     const uploadDay = `${year}${month}${strDate}`
     const videoKey = `/userVideo/${uploadDay}/${upload_file_name}`
     const courseKey = `/course/${uploadDay}/${upload_file_name}`
-    let liveKey;
-    console.log("LIVE_PATH value:", process.env.VUE_APP_LIVE_PATH);  // 添加这行查看实际值
-    console.log("Type of LIVE_PATH:", typeof process.env.VUE_APP_LIVE_PATH);  // 查看类型
-// 检查是否是空字符串或只有空格
-    if (process.env.VUE_APP_LIVE_PATH && process.env.VUE_APP_LIVE_PATH.trim() !== '') {
-      liveKey = `${process.env.VUE_APP_LIVE_PATH.trim()}/${uploadDay}/${upload_file_name}`;
-    } else {
-      liveKey = `/course/${uploadDay}/${upload_file_name}`;
-    }
-    console.log("liveKey={}",liveKey);
-    const key = type === 3 ? liveKey : (type === 1 ? courseKey : videoKey);
-
+    const key = type === 1 ? courseKey : videoKey
     console.log("开始上传")
 
     return new Promise((resolve, reject) => {

src/views/live/live/index.vue

@@ -200,12 +200,6 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55"></el-table-column>
-      <el-table-column
-        label="直播ID"
-        align="center"
-        prop="liveId"
-        width="100"
-      />
       <el-table-column
         label="直播封面"
         align="center"
@@ -309,14 +303,6 @@
             v-hasPermi="['live:console:list']"
             >进入直播间</el-button
           >
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleClearCache(scope.row)"
-            v-hasPermi="['live:live:edit']"
-            >清理缓存</el-button
-          >
           <el-dropdown trigger="hover">
             <el-button size="mini" type="text" icon="el-icon-more">
               更多
@@ -684,7 +670,6 @@ import {
   getCompanyDropList,
   getQwCorpList,
   getTagsListByCorpId,
-  clearLiveCache,
 } from "@/api/live/live";
 import Editor from "@/components/Editor/wang";
 import user from "@/store/modules/user";
@@ -1314,24 +1299,6 @@ export default {
         })
         .catch(() => {});
     },
-    /** 清理缓存按钮操作 */
-    handleClearCache(row) {
-      this.$confirm("是否确认清理该直播间的缓存?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          clearLiveCache(row.liveId).then((response) => {
-            if (response.code === 200) {
-              this.msgSuccess("缓存清理成功");
-            } else {
-              this.msgError(response.msg || "缓存清理失败");
-            }
-          });
-        })
-        .catch(() => {});
-    },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;

src/views/live/liveConsole/LivePlayer.vue

@@ -1,9 +1,22 @@
 <template>
   <div class="live-player">
-    <video v-if="videoParam.liveType == 2" ref="videoPlayer" loop autoplay class="player">
-      <source :src="videoParam.videoUrl" type="application/x-mpegURL">
+    <!-- 修改：所有录播和回放都使用同一个video元素，MP4和HLS都支持 -->
+    <video
+      v-if="videoParam.liveType == 2 || videoParam.liveType == 3"
+      ref="videoPlayer"
+      :loop="videoParam.liveType == 2"
+      autoplay
+      class="player"
+    >
+      <!-- 去掉type，让浏览器自动检测 -->
     </video>
-    <video v-if="videoParam.liveType == 1" ref="livePlayer" loop autoplay class="player">
+
+    <video
+      v-if="videoParam.liveType == 1"
+      ref="livePlayer"
+      autoplay
+      class="player"
+    >
     </video>
   </div>
 </template>
@@ -27,23 +40,33 @@ export default {
   },
   data() {
     return {
-      videoDuration: 0, // 视频总时长（秒）
-      startTime: 0, // 开播时间戳（毫秒）
-      hls: null, // HLS 实例
+      videoDuration: 0,
+      startTime: 0,
+      hls: null,
+      liveHls: null // 分开管理直播和录播的HLS实例
     };
   },
   mounted() {
-
-    // 这里可以添加播放器初始化逻辑
+    this.initPlayer();
   },
   methods: {
     videoPlay(url) {
-      if (Hls.isSupported()) {
-        const videoElement = this.$refs.videoPlayer
-        if (!videoElement) {
-          console.error('找不到 video 元素')
-          return
-        }
+      const videoElement = this.$refs.videoPlayer;
+      if (!videoElement) {
+        console.error('找不到 video 元素');
+        return;
+      }
+
+      // 判断是否是MP4格式
+      const isMp4 = url.toLowerCase().endsWith('.mp4') ||
+        url.toLowerCase().includes('.mp4?');
+
+      // 判断是否是HLS格式（m3u8）
+      const isHls = url.toLowerCase().endsWith('.m3u8') ||
+        url.toLowerCase().includes('.m3u8?');
+
+      if (isHls && Hls.isSupported()) {
+        // HLS格式使用hls.js播放
         this.hls = new Hls();
         this.hls.attachMedia(videoElement);
         this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
@@ -55,104 +78,165 @@ export default {
         this.hls.on(Hls.Events.ERROR, (event, data) => {
           console.error('HLS 错误:', data);
         });
-        // 1. 初始化开播时间
-        this.startTime = new Date(this.videoParam.startTime).getTime();
+
+        // 录播的时间位置计算
         if (this.videoParam.liveType === 2) {
-          // 2. 监听视频元数据加载完成（获取视频时长）
           videoElement.addEventListener('loadedmetadata', () => {
-            this.videoDuration = videoElement.duration; // 获取视频时长（秒）
-
-            // 初始化视频播放位置
+            this.videoDuration = videoElement.duration;
             this.updateVideoPosition(videoElement);
+          });
+        }
 
+      } else if (isMp4 || !isHls) {
+        // MP4格式或非HLS格式直接使用video元素播放
+        videoElement.src = url;
+
+        // 录播的时间位置计算
+        if (this.videoParam.liveType === 2) {
+          videoElement.addEventListener('loadedmetadata', () => {
+            this.videoDuration = videoElement.duration;
+            this.updateVideoPosition(videoElement);
           });
         }
+
+        // 触发播放
+        videoElement.load();
+        videoElement.play().catch(e => {
+          console.warn('自动播放失败:', e);
+        });
+
       } else {
-        console.error('浏览器不支持 HLS')
+        // 不支持HLS的浏览器，尝试直接播放
+        console.warn('浏览器不支持HLS，尝试直接播放');
+        videoElement.src = url;
+        videoElement.load();
+        videoElement.play().catch(e => {
+          console.warn('播放失败:', e);
+        });
       }
     },
-    updateVideoPosition(video){
-      const currentTime = new Date().getTime(); // 当前时间戳（毫秒）
-      const elapsedTime = currentTime - this.startTime; // 已流逝时间（毫秒）
+
+    updateVideoPosition(video) {
+      const currentTime = new Date().getTime();
+      this.startTime = new Date(this.videoParam.startTime).getTime();
+      const elapsedTime = currentTime - this.startTime;
+
       if (elapsedTime < 0) {
-        // 未开播：视频停在初始位置
         video.currentTime = 0;
         return;
       }
 
-      // 已开播：计算视频循环后的位置（流逝时间 % 视频时长）
-      const elapsedSeconds = elapsedTime / 1000; // 转换为秒
-      // 视频内的播放位置（秒）
-      // 设置视频播放位置
-      video.currentTime = elapsedSeconds % this.videoDuration;
+      const elapsedSeconds = elapsedTime / 1000;
+      if (this.videoDuration > 0) {
+        video.currentTime = elapsedSeconds % this.videoDuration;
+      }
     },
+
     livePlay(url) {
       if (Hls.isSupported()) {
-        const videoElement = this.$refs.livePlayer
+        const videoElement = this.$refs.livePlayer;
         if (!videoElement) {
-          console.error('找不到 video 元素')
-          return
+          console.error('找不到 video 元素');
+          return;
         }
-        this.hls = new Hls();
-        this.hls.attachMedia(videoElement);
-        this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
-          this.hls.loadSource(url);
-          this.hls.on(Hls.Events.STREAM_LOADED, (event, data) => {
+
+        this.liveHls = new Hls();
+        this.liveHls.attachMedia(videoElement);
+        this.liveHls.on(Hls.Events.MEDIA_ATTACHED, () => {
+          this.liveHls.loadSource(url);
+          this.liveHls.on(Hls.Events.STREAM_LOADED, (event, data) => {
             videoElement.play();
           });
         });
-        this.hls.on(Hls.Events.ERROR, (event, data) => {
+        this.liveHls.on(Hls.Events.ERROR, (event, data) => {
           console.error('HLS 错误:', data);
         });
+
       } else {
-        console.error('浏览器不支持 HLS')
+        // 浏览器原生支持HLS（如Safari）
+        const videoElement = this.$refs.livePlayer;
+        if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
+          videoElement.src = url;
+          videoElement.play().catch(e => {
+            console.warn('自动播放失败:', e);
+          });
+        } else {
+          console.error('浏览器不支持 HLS');
+        }
       }
     },
+
     initPlayer() {
+      // 清理之前的实例
+      if (this.hls) {
+        this.hls.destroy();
+        this.hls = null;
+      }
+      if (this.liveHls) {
+        this.liveHls.destroy();
+        this.liveHls = null;
+      }
 
       if (this.videoParam.liveType === 1) {
         // 直播
         const isUrl = this.videoParam.livingUrl === null || this.videoParam.livingUrl.trim() === '';
         if (isUrl) {
-          console.error('直播地址为空，无法初始化播放器')
-          return
+          console.error('直播地址为空，无法初始化播放器');
+          return;
         }
         this.$nextTick(() => {
           this.livePlay(this.videoParam.livingUrl);
-        })
+        });
         return;
       }
-      const viUrl = this.videoParam.videoUrl === null || this.videoParam.videoUrl.trim() === ''
+
+      const viUrl = this.videoParam.videoUrl === null || this.videoParam.videoUrl.trim() === '';
       if (viUrl) {
-        console.error('播放地址为空，无法初始化播放器')
-        return
+        console.error('播放地址为空，无法初始化播放器');
+        return;
       }
-      if(this.videoParam.liveType === 2){
-        // 录播
-        this.videoPlay(this.videoParam.videoUrl);
-      } else if(this.videoParam.liveType === 3){
-        // 直播回放
-        this.videoPlay(this.videoParam.videoUrl);
-      }else {
-        console.error('直播类型错误，无法初始化播放器')
+
+      if (this.videoParam.liveType === 2 || this.videoParam.liveType === 3) {
+        // 录播或直播回放
+        this.$nextTick(() => {
+          this.videoPlay(this.videoParam.videoUrl);
+        });
+      } else {
+        console.error('直播类型错误，无法初始化播放器');
       }
-      // 创建播放器实例
-      const videoPlayer = this.$refs.videoPlayer;
-      // 添加播放器事件监听器
-      videoPlayer.addEventListener('play', () => {
-        console.log('播放器已开始播放');
-      });
-      videoPlayer.addEventListener('pause', () => {
-        console.log('播放器已暂停');
-      });
-      videoPlayer.addEventListener('ended', () => {
-        console.log('播放器已结束');
-      });
     }
   },
+
+  watch: {
+    // 监听videoParam变化，重新初始化播放器
+    videoParam: {
+      handler() {
+        this.$nextTick(() => {
+          this.initPlayer();
+        });
+      },
+      deep: true
+    }
+  },
+
   beforeDestroy() {
-    this.hls?.destroy()
-    // 销毁播放器实例
+    // 销毁HLS实例
+    this.hls?.destroy();
+    this.liveHls?.destroy();
+
+    // 清理video元素
+    const videoElements = [
+      this.$refs.videoPlayer,
+      this.$refs.livePlayer
+    ];
+
+    videoElements.forEach(video => {
+      if (video) {
+        video.pause();
+        video.src = '';
+        video.load();
+      }
+    });
   }
 };
 </script>