fix(随手拍详情): iOS 不能全屏预览视频

pages/mine-picture-detail/index.scss

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

pages/mine-picture-detail/index.vue

@@ -15,7 +15,7 @@
           <view class="photo_item" v-for="(val, index) in mediaList" :key="val.id" @click="previewVideo(val, index)">
             <image v-if="val.type === 'image'" mode="aspectFill" :src="val.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="val.url" />
+              <video :controls="video.fullscreen" :object-fit="videoFit" :id="`myVideo${index}`" class="upload_img" :src="val.url" @fullscreenchange="onVideoFullscreenChange" />
               <image src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
             </view>
           </view>
@@ -81,8 +81,17 @@ export default {
       photoList: [],
       mediaList: [],
       photoDetail: [],
+      video: {
+        ctx: null,
+        fullscreen: false
+      }
     };
   },
+  computed: {
+    videoFit() {
+      return this.video.fullscreen ? 'contain' : 'cover'
+    }
+  },
   onLoad(query) {
     this.query = query;
     this.fetchPhotoDetail();
@@ -123,7 +132,13 @@ export default {
     // 预览视频
     previewVideo(item, index) {
       if (item.type === 'video') {
-        this.mediaList[index].videoContext.requestFullScreen();
+        // this.mediaList[index].videoContext.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({
@@ -131,10 +146,29 @@ export default {
         });
       }
     },
+
+    onVideoFullscreenChange(e) {
+      const { fullScreen } = e.detail
+      this.video.fullscreen = fullScreen
+
+      if (!fullScreen) {
+        this.video.ctx.pause()
+      }
+    }
   },
 };
 </script>
 
 <style scoped lang="scss">
 @import 'index.scss';
+
+::v-deep .uni-video-container {
+  // iOS 要在 video 父元素上设置才生效
+  border-radius: 16rpx;
+}
+
+// HACK: 上面的 :controls="false" 不生效
+::v-deep .uni-video-cover {
+  display: none;
+}
 </style>