From 1d0747d1ff2e7a6be93b1fc1ba7f6d8326cade41 Mon Sep 17 00:00:00 2001
From: miaojiale <1123971748@qq.com>
Date: Mon, 31 Oct 2022 17:14:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=80=E4=BA=9B=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/videoList.vue |  8 ++++++-
 src/pages/videoShow.vue | 48 +++++++++++++++++++++++++++++++++++++----
 vue.config.js           |  2 +-
 3 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/pages/videoList.vue b/src/pages/videoList.vue
index 25266ef..faef8a8 100644
--- a/src/pages/videoList.vue
+++ b/src/pages/videoList.vue
@@ -168,7 +168,13 @@ export default {
       this.describe = data
     },
     showVideo (url) {
-      this.$router.push(`/videoShow?src=${url}`)
+      var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
+      // if (isIphone) {
+      //   window.open('https://inno.sh-sict.com/gastric-api/gastric-cancer-data/file/show?videoName=' + url, '_self')
+      // } else {
+        this.$router.push(`/videoShow?src=${url}`)
+      // }
+
     },
     afterRead (file) {
       this.uploadLoading = true
diff --git a/src/pages/videoShow.vue b/src/pages/videoShow.vue
index 8938334..3caade0 100644
--- a/src/pages/videoShow.vue
+++ b/src/pages/videoShow.vue
@@ -8,16 +8,37 @@
       />
     </div>
     <div class="video">
+      <!-- <video
+        id="video"
+        controls
+        preload="auto"
+        loop="loop"
+        x5-video-player-fullscreen="true"
+        x5-video-orientation="portraint"
+        playsinline="true"
+        x5-video-player-type="h5"
+        style="object-fit:fill"
+      >
+        <source :src="src">
+      </video> -->
+
       <video
         ref="videoPlayer"
         class="video-js"
         id="videoplayer"
-      ></video>
+        playsinline="true"
+        preload="none" 
+        x5-video-player-type="h5"
+        x-webkit-airplay="true"
+        webkit-playsinline="true"
+      >
+      </video>
     </div>
   </div>
 </template>
 <script>
 import videojs from 'video.js';
+
 export default {
   data () {
     return {
@@ -26,18 +47,28 @@ export default {
   },
   computed: {
     src () {
-      return this.$route.query.src
+      return 'https://inno.sh-sict.com/gastric-api/gastric-cancer-data/file/show?videoName=' + this.$route.query.src
     }
   },
   methods: {
     // 实例化播放器
     createVideo () {
       let options = {
+        width: this.width,
         autoplay: false,
         controls: true,
         sources: [
           {
-            src: 'https://inno.sh-sict.com/gastric-api/gastric-cancer-data/file/show?videoName=' + this.src,
+            src: this.src,
+            type: "video/mp4",
+          },
+          {
+            src: this.src,
+            type: "video/ogg",
+          },
+          {
+            src: this.src,
+            type: "video/webm",
           }
         ]
       }
@@ -50,8 +81,17 @@ export default {
     }
   },
   mounted () {
+    videojs.addLanguage('zh-CN', {
+      "You aborted the media playback": "视频播放被终止",
+      "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
+      "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。请尝试使用uc浏览器或qq浏览器。",
+      "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
+      "No compatible source was found for this media.": "无法找到此视频兼容的源。",
+    });
     this.$nextTick(() => {
-      this.createVideo()
+      setTimeout(() => {
+        this.createVideo()
+      })
     })
     this.$once('hook:beforeDestroy', () => {
       this.player.dispose();
diff --git a/vue.config.js b/vue.config.js
index 2d4e9b4..5b836ad 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -65,7 +65,7 @@ module.exports = {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       "/": {
-        target: "http://10.130.2.52:8201",
+        target: "http://10.130.2.64:8201",
         changeOrigin: true
       }
     }
-- 
2.22.0