全屏模式问题修改

package.json

@@ -1,86 +1,85 @@
 {
-    "name": "vue-admin-template",
-    "version": "4.4.0",
-    "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
-    "author": "Pan <panfree23@gmail.com>",
-    "scripts": {
-        "dev": "vue-cli-service serve",
-        "build:prod": "vue-cli-service build",
-        "build:stage": "vue-cli-service build --mode staging",
-        "preview": "node build/index.js --preview",
-        "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
-        "lint": "eslint --ext .js,.vue src",
-        "test:unit": "jest --clearCache && vue-cli-service test:unit",
-        "test:ci": "npm run lint && npm run test:unit"
-    },
-    "dependencies": {
-        "@tinymce/tinymce-vue": "^3.2.2",
-        "awe-dnd": "^0.3.4",
-        "axios": "^0.23.0",
-        "core-js": "3.6.5",
-        "element-ui": "^2.13.2",
-        "he-tree-vue": "^2.0.10",
-        "jquery": "^3.6.0",
-        "js-audio-recorder": "^1.0.7",
-        "js-base64": "^3.6.1",
-        "js-cookie": "2.2.0",
-        "jsplumb": "^2.15.6",
-        "normalize.css": "7.0.0",
-        "nprogress": "0.2.0",
-        "path-to-regexp": "2.4.0",
-        "seededshuffle": "^0.2.0",
-        "tinymce": "^5.3.1",
-        "video.js": "^7.15.4",
-        "view-design": "^4.5.0",
-        "vue": "2.6.10",
-        "vue-element-utils": "^0.2.1",
-        "vue-esign": "^1.0.5",
-        "vue-i18n": "^8.24.4",
-        "vue-pdf": "^4.2.0",
-        "vue-router": "3.0.6",
-        "vue-slider-component": "^3.2.14",
-        "vue-video-player": "^5.0.2",
-        "vuedraggable": "^2.24.3",
-        "vuex": "3.1.0",
-        "xgplayer": "^2.30.2"
-    },
-    "devDependencies": {
-        "@vue/cli-plugin-babel": "4.4.4",
-        "@vue/cli-plugin-eslint": "4.4.4",
-        "@vue/cli-plugin-unit-jest": "4.4.4",
-        "@vue/cli-service": "4.4.4",
-        "@vue/test-utils": "1.0.0-beta.29",
-        "autoprefixer": "9.5.1",
-        "babel-eslint": "10.1.0",
-        "babel-jest": "23.6.0",
-        "babel-plugin-dynamic-import-node": "2.3.3",
-        "chalk": "2.4.2",
-        "compression-webpack-plugin": "^6.1.1",
-        "connect": "3.6.6",
-        "drag-tree-table": "^2.2.0",
-        "eslint": "6.7.2",
-        "eslint-plugin-vue": "6.2.2",
-        "hanzi-writer": "^3.1.0",
-        "html-webpack-plugin": "3.2.0",
-        "mockjs": "^1.0.1-beta3",
-        "postcss": "^8.2.10",
-        "postcss-loader": "^5.2.0",
-        "runjs": "4.3.2",
-        "sass": "1.26.8",
-        "sass-loader": "8.0.2",
-        "script-ext-html-webpack-plugin": "2.1.3",
-        "serve-static": "1.13.2",
-        "svg-sprite-loader": "4.1.3",
-        "svgo": "1.2.2",
-        "vue-template-compiler": "2.6.10"
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions"
-    ],
-    "engines": {
-        "node": ">=8.9",
-        "npm": ">= 3.0.0"
-    },
-    "license": "MIT"
-}
+  "name": "vue-admin-template",
+  "version": "4.4.0",
+  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
+  "author": "Pan <panfree23@gmail.com>",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "lint": "eslint --ext .js,.vue src",
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit"
+  },
+  "dependencies": {
+    "@tinymce/tinymce-vue": "^3.2.2",
+    "awe-dnd": "^0.3.4",
+    "axios": "^0.23.0",
+    "core-js": "3.6.5",
+    "element-ui": "^2.13.2",
+    "he-tree-vue": "^2.0.10",
+    "jquery": "^3.6.0",
+    "js-audio-recorder": "^1.0.7",
+    "js-base64": "^3.6.1",
+    "js-cookie": "2.2.0",
+    "jsplumb": "^2.15.6",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "path-to-regexp": "2.4.0",
+    "seededshuffle": "^0.2.0",
+    "tinymce": "^5.3.1",
+    "video.js": "^7.15.4",
+    "view-design": "^4.5.0",
+    "vue": "2.6.10",
+    "vue-element-utils": "^0.2.1",
+    "vue-esign": "^1.0.5",
+    "vue-i18n": "^8.24.4",
+    "vue-pdf": "^4.2.0",
+    "vue-router": "3.0.6",
+    "vue-slider-component": "^3.2.14",
+    "vuedraggable": "^2.24.3",
+    "vuex": "3.1.0",
+    "xgplayer": "^2.30.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "4.4.4",
+    "@vue/cli-plugin-eslint": "4.4.4",
+    "@vue/cli-plugin-unit-jest": "4.4.4",
+    "@vue/cli-service": "4.4.4",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "9.5.1",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "23.6.0",
+    "babel-plugin-dynamic-import-node": "2.3.3",
+    "chalk": "2.4.2",
+    "compression-webpack-plugin": "^6.1.1",
+    "connect": "3.6.6",
+    "drag-tree-table": "^2.2.0",
+    "eslint": "6.7.2",
+    "eslint-plugin-vue": "6.2.2",
+    "hanzi-writer": "^3.1.0",
+    "html-webpack-plugin": "3.2.0",
+    "mockjs": "^1.0.1-beta3",
+    "postcss": "^8.2.10",
+    "postcss-loader": "^5.2.0",
+    "runjs": "4.3.2",
+    "sass": "1.26.8",
+    "sass-loader": "8.0.2",
+    "script-ext-html-webpack-plugin": "2.1.3",
+    "serve-static": "1.13.2",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.2",
+    "vue-template-compiler": "2.6.10"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "license": "MIT"
+}

src/components/Adult/preview/ArticleViewChs/Practicechs.vue

@@ -376,9 +376,16 @@ export default {
         item.pause();
       });
     },
+    pauseVideo() {
+      let video = document.getElementsByTagName("video");
+      video.forEach((item) => {
+        item.pause();
+      });
+    },
     //语音全屏
     fullScreen() {
       this.pauseAudio();
+      this.pauseVideo();
       this.isFull = true;
       this.goFullscreen();
     },

src/components/Adult/preview/AudioLineSentence.vue

@@ -195,7 +195,7 @@ export default {
     PlayAudio() {
       let audioId = this.audioId;
       let audio = document.getElementsByTagName("audio");
-      audio.forEach(item => {
+      audio.forEach((item) => {
         if (item.src == this.mp3) {
           if (item.id !== audioId) {
             item.pause();
@@ -205,7 +205,7 @@ export default {
         }
       });
       let video = document.getElementsByTagName("video");
-      video.forEach(vItem => {
+      video.forEach((vItem) => {
         vItem.pause();
       });
       this.$set(this.audio, "isPlaying", true);
@@ -289,7 +289,7 @@ export default {
       this.playValue = (time / this.audio.maxTime) * 100;
       if (playFlag) {
         let audio = document.getElementsByTagName("audio");
-        audio.forEach(item => {
+        audio.forEach((item) => {
           if (item.id !== audioId) {
             item.pause();
           }

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -510,9 +510,16 @@ export default {
         item.pause();
       });
     },
+    pauseVideo() {
+      let video = document.getElementsByTagName("video");
+      video.forEach((item) => {
+        item.pause();
+      });
+    },
     //语音全屏
     fullScreen(type) {
       this.pauseAudio();
+      this.pauseVideo();
       this.isFull = true;
       this.goFullscreen();
     },

src/components/Adult/preview/VideoControl.vue

@@ -104,6 +104,7 @@ export default {
         _this.curQue.img_list.length > 0 ? _this.curQue.img_list[0].url : "", //视频封面
       height: "100%",
       width: "100%",
+      keyShortcut: "off",
     });
     // 设置清晰度
     _this.player.emit("resourceReady", [

src/components/Adult/preview/Voicefullscreen.vue

@@ -720,7 +720,7 @@ export default {
       let Bookdetail = sessionStorage.getItem("Bookdetail");
       if (Bookdetail) {
         Bookdetail = JSON.parse(Bookdetail);
-     
+
         let MethodName = "order-collection_manager-AddMyCollection";
         let text = "";
         this.item.forEach((item) => {
@@ -751,12 +751,11 @@ export default {
         };
         LearnWebSI(MethodName, data).then((res) => {
           this.$set(this.isCollArr, this.curSentIndex, true);
-          console.log();
           this.$message.success("收藏成功！");
         });
-       }else{
-         this.$message.warning("权限不足！");
-       }
+      } else {
+        this.$message.warning("权限不足！");
+      }
     },
     //取消收藏
     cancleColl() {
@@ -804,12 +803,17 @@ export default {
       this[key] = bool;
     },
     prevSentence() {
-      if (this.curSentIndex == 0) {
-        this.$message.warning("已经是第一个句子了");
+      let _this = this;
+      if (_this.curSentIndex == 0) {
+        _this.$message.warning("已经是第一个句子了");
         return;
       }
-      this.curSentIndex = this.curSentIndex - 1;
-      this.getSentence();
+      _this.curSentIndex = _this.curSentIndex - 1;
+      _this.getSentence();
+      if (_this.isAuto) {
+        _this.curTime = _this.bg;
+        _this.$refs.audioLineSent.onTimeupdateTime(_this.bg / 1000);
+      }
     },
     nextSentence() {
       if (this.curSentIndex == this.sentList.length - 1) {
@@ -885,6 +889,7 @@ export default {
         }
       } else if (_this.isAuto) {
         let time = curTime * 1000;
+
         if (time > _this.ed) {
           _this.rollSentence();
           _this.curTime = _this.bg;
@@ -918,7 +923,6 @@ export default {
       } else {
         _this.item = item;
       }
-
       _this.sentList.forEach((item) => {
         this.isCollArr.push(false);
       });
@@ -1058,25 +1062,30 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     let _this = this;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
     document.addEventListener("keyup", function (e) {
       if (_this.isKeyboard) {
         if (e.keyCode == 32) {
           //空格
-          _this.$refs.audioLineSent.PlayAudio();
+          _this.$nextTick(() => {
+            if (_this.$refs.audioLineSent) {
+              _this.$refs.audioLineSent.PlayAudio();
+            }
+          });
         } else if (e.keyCode == 38) {
           _this.prevSentence();
         } else if (e.keyCode == 40) {
           _this.nextSentence();
         } else if (e.keyCode == 13) {
-          _this.$refs.Soundrecorddiff.microphone();
+          _this.$nextTick(() => {
+            _this.$refs.Soundrecorddiff.microphone();
+          });
         }
       }
     });
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    let _this = this;
-
     if (_this.NNPENewWordList) {
       _this.handleNewword();
     }

src/main.js

@@ -25,10 +25,6 @@ Vue.use(VueDND)
 import jsPlumb from 'jsplumb'
 Vue.prototype.$jsPlumb = jsPlumb.jsPlumb
 
-import VideoPlayer from 'vue-video-player'
-require('video.js/dist/video-js.css')
-require('vue-video-player/src/custom-theme.css')
-Vue.use(VideoPlayer)
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api