askbot-dragon 1.7.88-beta → 1.7.90-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.7.88-beta",
+  "version": "1.7.90-beta",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/components/askVideo.vue

@@ -2,7 +2,8 @@
     <div
             v-loading="loading"
             :element-loading-text="showProgress"
-            id="dragon-video"
+            class="dragon-video"
+            :id="'dragon-video' + msg.id"
     >
         <!-- <video-player
           class="video-player vjs-custom-skin"
@@ -22,6 +23,9 @@
                 :id="msg.id+'key'">
           <source :src="videoSrc"/>
         </video>
+        <div v-if="isFullscreen" class="close-fullscreen" @click="closeFullScreen">
+          <i class="iconfont guoran-tongyichicun-guanbi2"></i>
+        </div>
         <div v-show="!nodownload" class="dragon-video-download">
           <a :href="msg.content.url" download><span class="el-icon-download"></span></a>
         </div>
@@ -37,7 +41,8 @@
         data() {
             return {
               videoSrc:'',
-              poster:''
+              poster:'',
+              isFullscreen:false
             }
         },
         watch: {
@@ -64,13 +69,21 @@
             /* 安卓手机播放视频默认全屏设置  ios默认就是全屏 */
             let id = this.msg.id + 'key'
             const video = document.getElementById(id);
+            let containerId = 'dragon-video' + this.msg.id
+            const videoContainer = document.getElementById(containerId);
             // 仅在 Android 设备尝试自动全屏
             const isAndroid = /Android/i.test(navigator.userAgent);
             if (isAndroid){
               video.addEventListener('play', () => {
                 // 仅在全屏请求由用户触发时有效（如点击播放按钮后）
-                if (video.requestFullscreen) {
-                  video.requestFullscreen().catch(console.error);
+                videoContainer.classList.add('force-fullscreen'); // 降级方案
+                this.isFullscreen = true;
+              });
+              // 点击关闭按钮或按 ESC 退出
+              document.addEventListener('fullscreenchange', () => {
+                if (!document.fullscreenElement) {
+                  videoContainer.classList.remove('force-fullscreen');
+                  this.isFullscreen = false;
                 }
               });
             }
@@ -131,6 +144,12 @@
           return new File([u8arr], filename, {type:mime});
           //转换成成blob对象
           /*return new Blob([u8arr],{type:'image/png'});*/
+        },
+        closeFullScreen(){
+          this.isFullscreen = false;
+          let containerId = 'dragon-video' + this.msg.id
+          const videoContainer = document.getElementById(containerId);
+          videoContainer.classList.remove('force-fullscreen');
         }
       }
 
@@ -138,7 +157,7 @@
 </script>
 <style scoped lang="less">
 video::-webkit-media-controls-mute-button { display: none !important;}
-#dragon-video{
+.dragon-video{
   position: relative;
   width: calc(100vw - 109px);
   max-width: 260px;
@@ -172,5 +191,34 @@ video::-webkit-media-controls-mute-button { display: none !important;}
     }
   }
 }
+/* 强制竖屏全屏样式 */
+.force-fullscreen {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  object-fit: contain !important;
+  background: black !important;
+  z-index: 9999 !important;
+  max-width: 100vw!important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  video{
+    max-width: 100% !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+  .close-fullscreen{
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    i{
+      color: #ffffff;
+      font-size: 20px;
+    }
+  }
+}
 
 </style>