交互视频题

src/views/book/courseware/create/components/question/video_interaction/VideoInteraction.vue

@@ -138,6 +138,7 @@ export default {
         obj.currentTime = this.currentTime;
         this.data.file_info_list.push(obj);
         this.sourceAddFlag = false;
+        document.getElementById('interaction-video').play();
       }
     },
     handleCancle() {

src/views/book/courseware/preview/components/video_interaction/VideoInteractionPreview.vue

@@ -3,8 +3,29 @@
   <div class="imageText-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
     <div class="interaction-box" v-if="data.video_list.length > 0">
-      <video id="interaction-video" :src="data.video_list[0].file_url" width="100%" height="400" controls></video>
+      <video
+        id="interaction-preview-video"
+        :src="data.video_list[0].file_url"
+        width="100%"
+        height="400"
+        controls
+        @timeupdate="handleTimeUpdate"
+      ></video>
     </div>
+    <el-dialog
+      v-if="visible"
+      :visible.sync="visible"
+      :show-close="true"
+      :close-on-click-modal="true"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+      :lock-scroll="true"
+      width="80%"
+      top="0"
+      @close="handleClose"
+    >
+      <iframe v-if="visible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe>
+    </el-dialog>
   </div>
 </template>
 
@@ -12,6 +33,7 @@
 import PreviewMixin from '../common/PreviewMixin';
 import { getVideoInteractionData } from '@/views/book/courseware/data/videoInteraction';
 import { GetFileURLMap } from '@/api/app';
+import { getConfig } from '@/utils/auth';
 export default {
   name: 'VideoInteractionPreview',
 
@@ -21,8 +43,14 @@ export default {
     return {
       data: getVideoInteractionData(),
       video_info: null,
+      file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
+      visible: false,
+      newpath: '',
+      iframeHeight: `${window.innerHeight - 100}px`,
+      first: '',
     };
   },
+  watch: {},
   created() {
     this.initData();
   },
@@ -43,6 +71,31 @@ export default {
         });
       });
     },
+    handleTimeUpdate(event) {
+      let currentTime = event.target.currentTime;
+
+      this.data.file_info_list.forEach((item) => {
+        if (
+          Number(item.currentTime) > Math.floor(currentTime) &&
+          Number(item.currentTime) < Math.floor(currentTime) + 1 &&
+          item.file_id !== this.first
+        ) {
+          this.first = item.file_id;
+          document.getElementById('interaction-preview-video').pause();
+          GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
+            this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(url_map[item.file_id])}`;
+            this.visible = true;
+          });
+        }
+      });
+    },
+    handleClose() {
+      this.visible = false;
+      document.getElementById('interaction-preview-video').play();
+      setTimeout(() => {
+        this.first = '';
+      }, 1000);
+    },
   },
 };
 </script>