微信公众号 Android x5内核 播放视频时预览图片，图片被

场景：微信公众号开发 Android x5内核 播放视频时预览图片，图片被视频遮挡

页面：

image.png

播放视频并预览图片的效果：

image.png

思路：

预览图片时隐藏视频元素并暂停播放，关闭预览时再显示视频元素

代码：

<template>
  <section>
    <div class="main theme-color">
      <!--播放语音必须-->
      <audio id="audio" src=""></audio>
      <div class="task" :class="taskDetail.status ? 'over' : 'process'">
        <div class="info">
          <div class="author-info">
            <p lang="zh-CN" class="status">{{taskDetail.status_str}}</p>
            <p class="avatar"><img :src="taskDetail.publisher_avatar + '?imageView2/1/w/200/h/200'"/></p>
            <p class="name">{{taskDetail.publisher_name}}</p>
            <p lang="zh-CN" class="time">{{taskDetail.publish_date}}</p>
          </div>
          <div class="title">{{taskDetail.title}}</div>
          <div class="effective-date">
            <div class="title">生效日期：</div>
            <div class="time">
              <p>{{`${taskDetail.started_at}-${taskDetail.ended_at}  ${taskDetail.repeat_days_str}`}}</p>
            </div>
          </div>
          <p lang="zh-CN" v-if="!taskDetail.status" class="task-status">{{taskDetail.record_status | recordStatus}}</p>
        </div>
        <div class="cont">
          <p v-if="taskDetail.description" class="text">{{taskDetail.description}}</p>
          <div v-show="isShowVideo" v-if="taskDetail.videos && taskDetail.videos.length > 0" class="video">
            <video :poster="taskDetail.videos[0].cover" :src="taskDetail.videos[0].url" controls controlsList="nodownload" preload="none" x-webkit-airplay="allow" playsinline webkit-playsinline x5-playsinline></video>
          </div>
          <template v-if="isFold">
            <div v-if="taskDetail.audios && taskDetail.audios.length > 0" class="voice">
              <TaskAudio
                :audio = "taskDetail.audios[0]"
              />
            </div>
            <ul v-if="taskDetail.pics&&taskDetail.pics.length > 0" class="img-list">
              <li @click="onShowPreviewer(taskDetail.pics, i)" v-for="(img,i) in taskDetail.pics" :key="i" class="img-item">
                <img v-lazy="img.url + '?imageView2/1/w/200/h/200'" alt="">
              </li>
            </ul>
          </template>
          <div v-if="(taskDetail.audios && taskDetail.audios.length > 0) || (taskDetail.pics&&taskDetail.pics.length > 0)" class="fold">
            <p lang="zh-CN" @click="isFold = true" v-if="!isFold"><span>展开</span><span class="icon icon-up"></span></p>
            <p lang="zh-CN" @click="isFold = false" v-else><span>收起</span><span class="icon icon-down"></span></p>
          </div>
          <div class="shadow"></div>
        </div>
      </div>
    </div>

    <!-- 放大图片组件 -->
    <PreviewImage
      v-show="isShowpreviewImage"
      :images="showImgs"
      :startPosition="startPosition"
      @closePreviewer="closePreviewer"
    />
  </section>
</template>

<script>

import TaskAudio from '@/components/task/TaskAudio'
import PreviewImage from '@/components/PreviewImage'

export default {
  created () {
    let timer = setTimeout(() => {
      this.initShare()
      clearTimeout(timer)
    }, 1000)
    this.fetchTaskDetail()
  },
  data () {
    return {
      taskId: this.$route.params.taskId,
      kidId: this.$route.query.kidId,
      classId: this.$route.query.classId,
      taskDetail: {},
      isFold: false, // 是否展开，默认不展开
      // 预览图片组件相关
      showImgs: [],
      startPosition: 0,
      isShowpreviewImage: false,
      isShowVideo: true
    }
  },
  components: {
    TaskAudio,
    PreviewImage
  },
  computed: {
    // 是否含有家长身份 0为不含
    ...mapState({
      parentId: state => state.User.info.parent_id
    })
  },
  methods: {
    fetchTaskDetail () {
      this.$http.get('v1/parent/task/info', {
        params: {
          task_id: this.taskId,
          kid_id: this.kidId
        }
      }).then(res => {
        let data = res.data.meta
        if (data) {
          this.taskDetail = data
        }
        this.shareStr = data.share_str
      }).catch(err => {
        this.$utils.showErrorMsg(err, 0)
      })
    },
    // 显示图片详情
    onShowPreviewer (imgArr, index) {
      if (!document.querySelector('video').paused) {
        document.querySelector('video').pause()
      }
      this.isShowVideo = false
      // 以上用来解决 预览图片时，视频遮挡预览图片的问题
      this.showImgs = imgArr
      this.startPosition = index
      this.isShowpreviewImage = true
    },
    // 关闭图片轮播(隐藏放大的图片)
    closePreviewer () {
      this.isShowVideo = true
      this.isShowpreviewImage = false
    }
  }
}
</script>

<style scoped>
  .main{
    width: 100%;
    max-width: 7.5rem;
    min-height:100vh;
    position: absolute;
    top:0;
    left: 0;
    z-index: -2;
    padding-bottom: 0.6rem;
  }
  .task {
    width: 100%;
    background: url('../../../assets/img/icon/bg-task-detail@2x.png') no-repeat top center/100% 3.92rem;
    padding:0.6rem 0.3rem 0;
    margin-bottom: 0.38rem;
    position: relative;
  }
  .task .info{
    width: 100%;
    margin-bottom: 0.54rem;
  }
  .task .status{
    width:0.92rem;
    height:0.36rem;
    text-align: center;
    line-height:0.28rem;
    font-size: 0.24rem;
    padding:0.04rem 0;
    border-radius: 0.08rem;
    margin-right: 0.12rem;
  }
  .task.process .status{
    background-image: linear-gradient(128deg, #ff9b5c, #ff6c0f 62%);
    color:#fff;
  }
  .task.over .status{
    color: #333;
    border:0.01rem solid #999;
    padding:0.03rem 0;
  }
  .task .info>.title{
    width: 80%;
    height:0.4rem;
    line-height: 0.4rem;
    font-size: 0.36rem;
    font-family: 'PingFangSC';
    color: #333;
    padding:0.02rem 0;
    margin-bottom: 0.26rem;
  }
  .task .task-status{
    display: inline-block;
    min-width:1.32rem;
    height: 0.52rem;
    background: #fff;
    text-align: center;
    line-height: 0.28rem;
    font-size: 0.24rem;
    color: #333;
    padding:0.12rem 0.3rem;
    border-radius: 0.26rem 0 0 0.26rem;
    position: absolute;
    top: 1.02rem;
    right:0;
  }
  .author-info {
    width:100%;
    display: flex;
    align-items: center;
    margin-bottom: 0.22rem;
  }
  .author-info .avatar{
    width: 0.44rem;
    height: 0.44rem;
    margin-right: 0.16rem;
    font-size: 0;
  }
  .author-info .avatar img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .author-info .name{
    max-width: 2.64rem;
    height:0.44rem;
    line-height: 0.44rem;
    font-size: 0.28rem;
    color:#333;
    margin-right: 0.12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .author-info .time{
    height: 0.44rem;
    line-height: 0.44rem;
    font-size: 0.24rem;
    color:#333;
  }
  .cont{
    width:6.92rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 0.3rem;
    padding:0.32rem 0.24rem 0;
    border: solid 0.01rem #f6f6f6;
    position: relative;
  }
  .cont .text{
    width: 100%;
    line-height: 0.42rem;
    font-size: 0.3rem;
    color: #333;
    margin-bottom: 0.22rem;
    position: relative;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .cont .voice{
    width: 100%;
    margin-bottom: 0.28rem;
  }
  .cont .video {
    width: 100%;
    margin-bottom: 0.28rem;
  }
  .cont .video video{
    width: 100%;
    height: 3.62rem;
    background: #000;
  }
  .img-list{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    margin-bottom: 0.16rem;
  }
  .img-item{
    width:2.06rem;
    height: 2.06rem;
    margin-right: 0.12rem;
    margin-bottom: 0.12rem;
  }
  .img-item:nth-of-type(3n+3){
    margin-right: 0;
  }
  .img-item img{
    width: 100%;
    height: 100%;
  }
  .task .effective-date{
    width:100%;
    display: flex;
  }
  .task .effective-date .title{
    line-height: 0.28rem;
    font-size: 0.24rem;
    color: #333;
    white-space: nowrap;
  }
  .task .effective-date .time{
    color: #333;
  }
  .task .effective-date .time p{
    line-height: 0.28rem;
    font-size: 0.24rem;
  }

  .task .fold{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.38rem;
  }
  .task .fold p{
    height:0.28rem;
    line-height:0.28rem;
    font-size: 0.24rem;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .task .fold span{
    font-style: normal;
  }
  .task .fold .icon{
    display: inline-block;
    width:0.24rem;
    height: 0.24rem;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .task .fold .icon-up{
    background-image: url('../../../assets/img/parents/icon-homepage-photo-up@2x.png');
  }
  .task .fold .icon-down{
    background-image: url('../../../assets/img/parents/icon-homepage-photo-down@2x.png');
  }
  .cont .shadow, .task-record-item .shadow{
    width:6rem;
    height: 100%;
    background: #000;
    opacity: 0.05;
    border-radius: 0.3rem;
    -webkit-filter: blur(.1rem);
    filter: blur(.1rem);
    -webkit-backdrop-filter: blur(.1rem);
    backdrop-filter:blur(.1rem);
    position: absolute;
    top:0.2rem;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
  }

</style>