ai功能静态

src/components/VideoPlayer/index.vue

@@ -120,6 +120,32 @@
             <div class="player-time">{{ currentTimeFormat }} / {{ fullTimeFormat }}</div>
           </div>
           <div class="player-controls-bottom-right">
+            <div class="player-controls-btn box-aiTranslate">
+              <div v-show="isSubtitle" class="player-controls-btn cursor-pointer btn-speed">
+                <span>{{!currentLang ? 'AI翻译' : currentLangLabel}}</span>
+                <div class="speed-control">
+                  <ul class="speed-control-list">
+                    <li
+                      v-for="item in selectableLang"
+                      :key="item.srclang"
+                      @click="changeLang(item)"
+                      :data-value="item.srclang"
+                      class="one-line-ellipsis"
+                      :title="item.label"
+                      :class="{'current': currentLang === item.srclang}"
+                    >{{ item.label }}</li>
+                  </ul>
+                </div>
+              </div>
+              <div v-show="isSubtitle" style="margin-top: -3px;">|</div>
+              <div class="player-controls-btn" style="display: flex;gap: 0.3rem;align-items: center;">
+                <span>字幕</span>
+                <el-switch
+                  v-model="isSubtitle">
+                </el-switch>
+              </div>
+              <div style="margin-top: -3px;">|</div>
+            </div>
             <div class="player-controls-btn cursor-pointer btn-speed">
               <span>{{currentSpeed === 1 ? '倍速' : `${currentSpeed}x`}}</span>
               <div class="speed-control">
@@ -224,6 +250,7 @@
 import volumeBar from "@/components/VideoPlayer/volume-bar.vue";
 import progressBar from "@/components/VideoPlayer/progress-bar.vue";
 import playerBarrageScreen from "@/components/VideoPlayer/player-barrage-screen.vue";
+import { mapGetters, mapMutations } from 'vuex';
 
 export default {
   name: "barrage-videoplayer",
@@ -301,10 +328,15 @@ export default {
       fullTimeFormat: "00:00:00", // 视频总长度的文字
       barrageTimelineStart: 0, // 弹幕时间轴的起始时间点（手动调整进度条触发更新）
       isInit:false, // 是否初始化过
+      isSubtitle:false, // 是否开启字幕
+      currentLangLabel:'', // 当前字幕语言
     };
   },
+  computed: {
+    ...mapGetters(['selectableLang','currentLang'])
+  },
   created() {
-
+    this.SET_currentLang('');
   },
   mounted() {
     this.videoDom = this.$refs.video;
@@ -411,6 +443,9 @@ export default {
     // });
   },
   methods: {
+    ...mapMutations({
+      SET_currentLang: 'video/SET_currentLang',
+    }),
     //当视频由于需要缓冲下一帧而停止，解决一直计时的问题
     onWaiting(){
       console.log('触发了onWairing');
@@ -641,9 +676,16 @@ export default {
           this.$emit('onFullscreen',false);//全屏
         }
       }
+    },
 
-
-    }
+    /**
+     * 切换字幕语言
+     */
+    changeLang(item) {
+      this.SET_currentLang(item.srclang);
+      this.currentLangLabel = item.label;
+      this.$emit('onLangChange', item.srclang);
+    },
   },
   watch: {
     currentVolume: function () {
@@ -907,6 +949,12 @@ export default {
   color: #fff;
   margin-bottom: 0.5rem;
 }
+.box-aiTranslate{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+}
 @media (device-width: 100vw) {
   .player-controls-btn .player-controls-icon {
     /* height: 26px; */