fix(上报内容): iOS 不能全屏预览视频

pages/record-content/index.scss

@@ -132,6 +132,8 @@
 .upload_img {
   width: 0;
   height: 0;
+  // width: 100%;
+  // height: 100%;
   //width: 168rpx;
   //height: 168rpx;
   border-radius: 16rpx;

pages/record-content/index.vue

@@ -76,7 +76,7 @@
                   <image mode="aspectFill" v-if="item.type === 'image'" :src="item.url" style="display: block; width: 168rpx; height: 168rpx; border-radius: 16rpx" />
 
                   <view v-else class="play-wrapper">
-                    <video :id="`myVideo${index}`" class="upload_img" :src="item.url" />
+                    <video :controls="video.fullscreen" :object-fit="videoFit" :id="`myVideo${index}`" class="upload_img" :src="item.url" @fullscreenchange="onVideoFullscreenChange" />
                     <image src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
                   </view>
                   <!--              <video class="upload_img" v-else :src="item.url" :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" />-->
@@ -275,7 +275,7 @@
                   <image mode="aspectFill" v-if="item.type === 'image'" :src="item.url" style="display: block; width: 168rpx; height: 168rpx; border-radius: 16rpx" />
 
                   <view v-else class="play-wrapper">
-                    <video :id="`myVideo${index}`" class="upload_img" :src="item.url" />
+                    <video :controls="video.fullscreen" :object-fit="videoFit" :id="`myVideo${index}`" class="upload_img" :src="item.url" @fullscreenchange="onVideoFullscreenChange" />
                     <image src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
                   </view>
                   <!--              <video class="upload_img" v-else :src="item.url" :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" />-->
@@ -525,6 +525,11 @@ export default {
           realNameTitle: '申报人信息',
           time: '申报时间',
         }
+      },
+
+      video: {
+        ctx: null,
+        fullscreen: false
       }
     };
   },
@@ -594,6 +599,9 @@ export default {
     },
     uploadVisible() {
       return !this.isOnlyAllowUploadImages || this.photoList.length < mustUploadImageCount
+    },
+    videoFit() {
+      return this.video.fullscreen ? 'contain' : 'cover'
     }
   },
 
@@ -890,8 +898,12 @@ export default {
     // 预览视频
     previewVideo(item, index) {
       if (item.type === 'video') {
-        const ctx = uni.createVideoContext(`myVideo${index}`)
-        ctx.requestFullScreen()
+        const ctx = this.video.ctx = uni.createVideoContext(`myVideo${index}`)
+        ctx.play()
+        // HACK: iOS 需要延迟一下才能全屏
+        setTimeout(() => {
+          ctx.requestFullScreen()
+        }, uni.$u.os() === 'ios' ? 300 : 0)
       }
       if (item.type === 'image') {
         uni.previewImage({
@@ -917,6 +929,15 @@ export default {
     getUploadTitle({ name, type }) {
       return `上传${name}${type === 'image' ? `（${mustUploadImageCount}张）` : ''}`
     },
+
+    onVideoFullscreenChange(e) {
+      const { fullScreen } = e.detail
+      this.video.fullscreen = fullScreen
+
+      if (!fullScreen) {
+        this.video.ctx.pause()
+      }
+    }
   },
 };
 </script>
@@ -928,4 +949,14 @@ export default {
   margin-top: 16rpx;
   font-size: 28rpx;
 }
+
+::v-deep .uni-video-container {
+  // iOS 要在 video 父元素上设置才生效
+  border-radius: 16rpx;
+}
+
+// HACK: 上面的 :controls="false" 不生效
+::v-deep .uni-video-cover {
+  display: none;
+}
 </style>