askbot-dragon 1.7.89-beta → 1.7.90-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.7.89-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,30 +69,21 @@
             /* 安卓手机播放视频默认全屏设置  ios默认就是全屏 */
             let id = this.msg.id + 'key'
             const video = document.getElementById(id);
-            const videoContainer = document.getElementById('dragon-video');
+            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', async () => {
+              video.addEventListener('play', () => {
                 // 仅在全屏请求由用户触发时有效（如点击播放按钮后）
-                try {
-                  // 1. 先进入全屏
-                  await video.requestFullscreen();
-
-                  // 2. 锁定竖屏方向（需浏览器支持）
-                  if (screen.orientation?.lock) {
-                    await screen.orientation.lock('portrait');
-                  }
-                } catch (err) {
-                  console.error('全屏失败:', err);
-                  videoContainer.classList.add('force-fullscreen'); // 降级方案
-                }
+                videoContainer.classList.add('force-fullscreen'); // 降级方案
+                this.isFullscreen = true;
               });
               // 点击关闭按钮或按 ESC 退出
               document.addEventListener('fullscreenchange', () => {
                 if (!document.fullscreenElement) {
-                  console.debug('fullscreenchange')
                   videoContainer.classList.remove('force-fullscreen');
+                  this.isFullscreen = false;
                 }
               });
             }
@@ -148,14 +144,20 @@
           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');
         }
-      },
+      }
 
     }
 </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;
@@ -199,10 +201,24 @@ video::-webkit-media-controls-mute-button { display: none !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;
+    }
+  }
 }
 
-/* 隐藏原生控件（可选） */
-.force-fullscreen::-webkit-media-controls {
-  display: none !important;
-}
 </style>