交互视频弹窗问题

src/components/CommonPreview.vue

@@ -352,7 +352,7 @@
       class="remark-dialog"
       @close="dialogClose('')"
     >
-      <Remark :remark="remark" :project-id="projectId" :courseware-id="select_node ? select_node : id"></Remark>
+      <Remark :remark="remark" :project-id="projectId" :courseware-id="select_node ? select_node : id" />
       <div slot="footer">
         <el-button @click="dialogClose('')">取消</el-button>
         <el-button type="primary" :loading="submit_loading" @click="addCoursewareAuditRemark(select_node)">
@@ -409,7 +409,6 @@
 
 <script>
 import CoursewarePreview from '@/views/book/courseware/preview/CoursewarePreview.vue';
-import RichText from '@/components/RichText.vue';
 import MindMap from '@/components/MindMap.vue';
 import VisNetwork from '@/components/VisNetwork.vue';
 import VideoPlay from '@/views/book/courseware/preview/components/common/VideoPlay.vue';
@@ -455,7 +454,6 @@ export default {
   name: 'CommonPreview',
   components: {
     CoursewarePreview,
-    RichText,
     MindMap,
     AudioPlay,
     VideoPlay,

src/views/book/courseware/create/components/SelectBackground.vue

@@ -2,6 +2,7 @@
   <el-dialog
     custom-class="background"
     width="608px"
+    append-to-body
     :close-on-click-modal="false"
     :visible="visible"
     :before-close="handleClose"

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

@@ -18,8 +18,8 @@
       />
       <div v-if="data.video_list.length > 0 && data.video_list[0].media_duration" class="interaction-box">
         <video
-          ref="videoPlayer"
           id="interaction-video"
+          ref="videoPlayer"
           :src="data.video_list[0].file_url"
           width="100%"
           height="400"
@@ -28,7 +28,7 @@
         ></video>
         <!-- <video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"></video> -->
 
-        <el-button type="primary" size="small" @click="handlePause" style="margin-top: 5px">暂停视频编辑题目</el-button>
+        <el-button type="primary" size="small" style="margin-top: 5px" @click="handlePause">暂停视频编辑题目</el-button>
         <!-- <el-button @click="handleMultilingual">多语言</el-button> -->
         <ul v-if="data.file_info_list.length > 0" class="file-list">
           <li v-for="(file, i) in data.file_info_list" :key="i">
@@ -48,14 +48,12 @@
         v-if="exerciseFlag"
         :visible.sync="exerciseFlag"
         width="1400px"
-        append-to-body
-        :show-close="true"
         title="练习题"
         :close-on-click-modal="false"
-        class="module-content"
-        @close="handleCancle"
+        custom-class="module-content"
+        @close="handleCancale"
       >
-        <exercise-add :exercise-content="exerciseContent" @handleCancle="handleCancle" @submitAdd="submitAdd" />
+        <exercise-add :exercise-content="exerciseContent" @handleCancale="handleCancale" @submitAdd="submitAdd" />
       </el-dialog>
       <MultilingualFill
         :visible.sync="multilingualVisible"
@@ -114,26 +112,25 @@ export default {
     };
   },
   watch: {
-    'data.video_list': {
-      handler(val, oldVal) {
-        if (val !== oldVal) {
-        }
-      },
-      immediate: true,
-    },
     'data.property.file_list': 'handleMindMap',
   },
+  mounted() {},
+  beforeDestroy() {
+    if (this.player) {
+      this.player.dispose();
+    }
+  },
   methods: {
     // 初始化player
-    handleCreatPlayer(time) {
+    handleCreatePlayer() {
       let _this = this;
       let options = {
-        autoplay: false, //自动播放
+        autoplay: false, // 自动播放
         height: 500,
         width: 918,
-        controls: true, //用户可以与之交互的控件
-        loop: true, //视频一结束就重新开始
-        muted: false, //默认情况下将使所有音频静音
+        controls: true, // 用户可以与之交互的控件
+        loop: true, // 视频一结束就重新开始
+        muted: false, // 默认情况下将使所有音频静音
         playsinline: true,
         webkitPlaysinline: true,
         // aspectRatio:"16:9",//显示比率
@@ -154,8 +151,8 @@ export default {
       // 设置标点
       _this.handleMarkers();
       // 获取当前播放时间
-      this.player.on('timeupdate', function (event) {
-        _this.currentTime = this.currentTime().toFixed(3);
+      this.player.on('timeupdate', () => {
+        this.currentTime = this.player.currentTime().toFixed(3);
         // console.log(this.currentTime());
       });
     },
@@ -178,28 +175,7 @@ export default {
           'background-color': 'red',
           'border-radius': '50%',
         },
-        markers: markers,
-        // markers: [
-        //   {
-        //     time: 0.694313,
-        //     class: 'custom-marker-class',
-        //     text: '标记1',
-        //   },
-        //   {
-        //     time: 5.694313,
-        //     class: 'custom-marker-class',
-        //     text: '标记2',
-        //   },
-        //   {
-        //     time: 10.694313,
-        //     class: 'custom-marker-class',
-        //     text: '标记3',
-        //   },
-        //   {
-        //     time: 15.694313,
-        //     class: 'custom-marker-class',
-        //   },
-        // ],
+        markers,
       });
     },
     updateFileList({ file_list, file_id_list, file_info_list }) {
@@ -210,21 +186,12 @@ export default {
       if (file_list.length === 0) {
         this.data.file_info_list = [];
       } else {
-        let _this = this;
         this.$nextTick(() => {
-          _this.handleCreatPlayer();
+          this.handleCreatePlayer();
         });
         this.duration = file_list[0].media_duration;
       }
     },
-
-    handleData() {
-      // this.data.video_list.forEach((item) => {
-      //   GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
-      //     this.$set(item, 'file_url', url_map[item.file_id]);
-      //   });
-      // });
-    },
     handleMindMap() {
       // 思维导图数据
       let node_list = [];
@@ -249,7 +216,7 @@ export default {
         this.player.play();
       }
     },
-    handleCancle() {
+    handleCancale() {
       // this.sourceAddFlag = false;
       this.exerciseFlag = false;
       this.player.play();
@@ -325,16 +292,10 @@ export default {
           }
         })
         .catch(() => {
-          this.$emit('handleCancle');
+          this.$emit('handleCancale');
         });
     },
   },
-  mounted() {},
-  beforeDestroy() {
-    if (this.player) {
-      this.player.dispose();
-    }
-  },
 };
 </script>
 <style lang="scss" scoped>

src/views/book/courseware/preview/common/AnswerAnalysis.vue

@@ -6,6 +6,7 @@
     :visible="visible"
     width="65vw"
     :close-on-click-modal="false"
+    :modal="modal"
     :before-close="handleClose"
   >
     <!-- 正确答案 -->
@@ -104,6 +105,11 @@ import VideoPlay from '@/views/book/courseware/preview/components/common/VideoPl
 export default {
   name: 'AnswerAnalysis',
   components: { AudioPlay, VideoPlay },
+  inject: {
+    modal: {
+      default: true,
+    },
+  },
   props: {
     visible: {
       type: Boolean,

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

@@ -29,6 +29,7 @@ export default {
   provide() {
     return {
       getPermissionControl: () => this.permissionControl,
+      modal: false,
     };
   },
   props: ['exercise_id', 'feed_back'],

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

@@ -13,8 +13,8 @@
         @timeupdate="handleTimeUpdate"
       ></video> -->
       <video
-        ref="videoPlayer"
         id="interaction-preview-video"
+        ref="videoPlayer"
         :src="data.video_list[0].file_url"
         width="100%"
         height="400"
@@ -24,6 +24,7 @@
     </div>
     <!-- v-if="Object.keys(this.userAnswer).length === data.file_info_list.length" -->
     <el-button
+      v-if="data.property.feed_back === 'total'"
       type="primary"
       :style="{
         background:
@@ -33,7 +34,6 @@
         marginTop: '5px',
       }"
       @click="lookReport"
-      v-if="data.property.feed_back === 'total'"
       >{{ convertText('查看答题报告') }}</el-button
     >
     <AnswerCorrect
@@ -59,9 +59,9 @@
     >
       <ExercisePreview
         :exercise_id="exercise_id"
+        :feed_back="data.property.feed_back"
         @handleCancle="handleClose"
         @submitAdd="submitAdd"
-        :feed_back="data.property.feed_back"
       />
       <!-- <iframe v-if="visible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe> -->
     </el-dialog>
@@ -140,6 +140,11 @@ export default {
     this.initData();
   },
   mounted() {},
+  beforeDestroy() {
+    if (this.player) {
+      this.player.dispose();
+    }
+  },
   methods: {
     initData() {
       this.data.file_info_list = this.data.file_info_list.sort((a, b) => Number(a.currentTime) - Number(b.currentTime));
@@ -157,12 +162,12 @@ export default {
     handleCreatPlayer() {
       let _this = this;
       let options = {
-        autoplay: false, //自动播放
+        autoplay: false, // 自动播放
         height: 500,
         width: 1000,
-        controls: true, //用户可以与之交互的控件
-        loop: true, //视频一结束就重新开始
-        muted: false, //默认情况下将使所有音频静音
+        controls: true, // 用户可以与之交互的控件
+        loop: true, // 视频一结束就重新开始
+        muted: false, // 默认情况下将使所有音频静音
         playsinline: true,
         webkitPlaysinline: true,
         // aspectRatio:"16:9",//显示比率
@@ -183,8 +188,8 @@ export default {
       // 设置标点
       _this.handleMarkers();
       // 获取当前播放时间
-      this.player.on('timeupdate', function (event) {
-        _this.handleTimeUpdate(this.currentTime());
+      this.player.on('timeupdate', () => {
+        this.handleTimeUpdate(this.player.currentTime());
         // console.log(this.currentTime());
       });
     },
@@ -207,7 +212,7 @@ export default {
           'background-color': 'red',
           'border-radius': '50%',
         },
-        markers: markers,
+        markers,
       });
     },
     handleTimeUpdate(currentTime) {
@@ -255,7 +260,7 @@ export default {
       let total = this.data.file_info_list.length;
       Object.keys(this.userAnswer).forEach((key) => {
         if (this.userAnswer[key].is_right) {
-          num++;
+          num += 1;
         }
       });
       this.reportResult = {
@@ -267,11 +272,6 @@ export default {
       this.reportFlag = true;
     },
   },
-  beforeDestroy() {
-    if (this.player) {
-      this.player.dispose();
-    }
-  },
 };
 </script>