renkang
2025-01-24 d492850f1cc64ddcfaf43798af9c76c2505414fd
h5/pages/polling/point.vue
@@ -28,7 +28,12 @@
         <view class="files">
            <view class="adduser_list_item_ipt1_upload" v-for="(item, i) in info.multifileList" :key="i">
               <image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
               <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
               <!-- <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video> -->
               <view v-if="item.type == 1" @click="videoClick(item)" class="video_wrap">
                  <video :src="item.fileurlFull" initial-time="0.01" :show-center-play-btn="false" :controls="false"
                     class="video" :enable-progress-gesture="false" muted />
                  <image src="@/static/play.png" class="play" mode=""></image>
               </view>
            </view>
         </view>
         <view v-if="info.dealInfo" class="desc">{{ info.dealInfo }}</view>
@@ -96,7 +101,13 @@
         @cancel="isShowHandleDate = false" mode="datetime"></u-datetime-picker>
      <u-picker :show="isShowRes" keyName="name" @cancel="isShowRes = false" @confirm='confirmRes'
         :columns="columns"></u-picker>
         <!--  -->
         <view v-if="videoPlay" class="video_app">
            <video controls autoplay muted x5-video-player-type="h5" x5-video-player-fullscreen="true" id="myvideo"
               :src="videoUrl" @fullscreenchange="screenChange"></video>
            <view class="bg" @click="closeVideo"></view>
         </view>
         <!--  -->
   </view>
</template>
@@ -135,7 +146,11 @@
                     name: '跳过'
                  },
               ]
            ],
            ],
            videoPlay: false,
            videoContext: null,
            videoUrl: ''
         };
      },
      onLoad(option) {
@@ -204,6 +219,26 @@
            this.$set(this.handleParam, 'dealStatus', e.value[0].id)
            this.$set(this.handleParam, 'dealName', e.value[0].name)
            this.isShowRes = false
         },
         videoClick(item) {
            this.videoPlay = true;
            this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
            this.videoUrl = item.fileurlFull;
            this.videoContext.requestFullScreen();
            this.$nextTick(() => {
               this.videoContext.play();
            })
         },
         screenChange(e) {
            let fullScreen = e.detail.fullScreen // 值true为进入全屏,false为退出全屏
            if (!fullScreen) {
               //退出全屏
               this.videoPlay = false // 隐藏播放盒子
            }
         },
         closeVideo() {
            this.videoPlay = false
            this.videoContext = null
         },
         fileDel(str, i) {
            this[str].splice(i, 1);
@@ -470,11 +505,51 @@
      image {
         width: 100%;
         height: 100%;
      }
      video {
         width: 100%;
         height: 100%;
      }
      video {
         width: 100%;
         height: 100%;
      .video_wrap {
         position: relative;
         border: 1px solid;
         width: 156rpx;
         height: 156rpx;
         border-radius: 4rpx;
         .play {
            width: 60rpx !important;
            height: 60rpx !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
         }
      }
   }
   .video_app {
      overflow: hidden;
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      z-index: 9990;
      .bg {
         background-color: rgba(0, 0, 0, .6);
         position: absolute;
         width: 100%;
         height: 100%;
         z-index: -1;
      }
      video {
         width: 100%;
         height: 42vh;
      }
   }
</style>