ai视频一期功能提交

src/components/VideoPlayer/index.vue

@@ -141,6 +141,7 @@
               <div class="player-controls-btn" style="display: flex;gap: 0.3rem;align-items: center;">
                 <span>字幕</span>
                 <el-switch
+                  @change="toggleSubtitle"
                   v-model="isSubtitle">
                 </el-switch>
               </div>
@@ -328,7 +329,7 @@ export default {
       fullTimeFormat: "00:00:00", // 视频总长度的文字
       barrageTimelineStart: 0, // 弹幕时间轴的起始时间点（手动调整进度条触发更新）
       isInit:false, // 是否初始化过
-      isSubtitle:false, // 是否开启字幕
+      isSubtitle: true, // 是否开启字幕
       currentLangLabel:'', // 当前字幕语言
     };
   },
@@ -349,7 +350,7 @@ export default {
     }
 
     setInterval(() => {
-          console.log('当前状态:',this.currentProgress,this.isDrag,this.videoDom.currentTime , this.videoDom.duration)
+          // console.log('当前状态:',this.currentProgress,this.isDrag,this.videoDom.currentTime , this.videoDom.duration)
           // 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行
           if(!this.isDrag){
             var time = localStorage.getItem('videoProgressData')
@@ -396,7 +397,7 @@ export default {
       }
       // 根据视频的readyState判断下一帧是否已加载，并控制loading的显示
       this.isShowLoading = this.videoDom.readyState < 3;
-      console.log("当前缓存:"+this.videoDom.readyState)
+      // console.log("当前缓存:"+this.videoDom.readyState)
       if (this.videoDom.readyState < 3){
         console.log("详细信息",this.videoDom)
         console.log("卡了",this.videoDom.readyState)
@@ -445,6 +446,7 @@ export default {
   methods: {
     ...mapMutations({
       SET_currentLang: 'video/SET_currentLang',
+      SET_currentTime: 'video/SET_currentTime',
     }),
     //当视频由于需要缓冲下一帧而停止，解决一直计时的问题
     onWaiting(){
@@ -659,6 +661,7 @@ export default {
     },
     onAudioTimeUpdate() {
       const currentTime = this.$refs.video.currentTime;
+      this.SET_currentTime(currentTime)
       this.$emit('onTimeUpdate', currentTime);
     },
     /**
@@ -677,15 +680,76 @@ export default {
         }
       }
     },
-
+    /**
+     * 切换字幕
+     */
+    toggleSubtitle(value) {
+      if (this.videoDom && this.videoDom.textTracks && this.videoDom.textTracks.length >0) {
+        if (!value) {
+          // 关闭字幕
+          this.videoDom.textTracks[this.videoDom.textTracks.length - 1].mode = 'hidden';
+        } else { 
+          // 打开字幕
+          this.videoDom.textTracks[this.videoDom.textTracks.length - 1].mode = 'showing';
+        }
+      }
+    },
     /**
      * 切换字幕语言
      */
     changeLang(item) {
       this.SET_currentLang(item.srclang);
       this.currentLangLabel = item.label;
-      this.$emit('onLangChange', item.srclang);
+      console.log("changeLang",item);
+      // 先移除所有字幕轨道
+      Array.from(this.videoDom.querySelectorAll('track')).forEach(t => t.remove());
+      if(!item.vttContent){
+        console.log("字幕内容为空!")
+        return;
+      }
+      if(!item.srcUrl){
+        try{
+          const blob = new Blob([item.vttContent], { type: 'text/vtt' });
+          item.srcUrl = URL.createObjectURL(blob);
+        }catch(e){
+          console.log("字幕格式错误",e)
+        }
+      }
+      const trackEl = document.createElement('track');
+      trackEl.kind = 'subtitles';
+      trackEl.srclang = item.srclang;
+      trackEl.label = item.label;
+      trackEl.src = item.srcUrl;
+      trackEl.default = true; // 确保字幕默认启用
+      
+      // 使用箭头函数保持this上下文
+      trackEl.addEventListener('load', () => {
+          console.log('字幕加载成功！');
+          // console.log('#########Track cues:', trackEl.track.cues);
+      });
+      
+      trackEl.addEventListener('error', () => {
+          console.error('字幕加载失败！');
+      });
+      
+      // 确保视频已加载到可添加轨道的状态
+      if (this.videoDom.readyState >= 1) {
+        this.videoDom.appendChild(trackEl);
+        this.videoDom.textTracks[this.videoDom.textTracks.length - 1].mode = 'showing';
+      } else {
+        this.videoDom.addEventListener('loadedmetadata', () => {
+          this.videoDom.appendChild(trackEl);
+          this.videoDom.textTracks[this.videoDom.textTracks.length - 1].mode = 'showing';
+        }, { once: true });
+      }
     },
+    seekToTime(time) {
+      if (!this.videoDom) return;
+      this.videoDom.currentTime = time + 0.01;
+      this.isPlaying = true;
+      this.videoDom.play();
+    },
+
   },
   watch: {
     currentVolume: function () {