video标签播放后，再点击退出当前页，会遮住html结构，并无法关闭问题，怎么解决呀

最新推荐文章于 2023-05-30 15:05:48 发布

m0_0_m0_0

最新推荐文章于 2023-05-30 15:05:48 发布

阅读量1.1k

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_65186345/article/details/125856580

版权

1.进入视频详情页，并点击播放

2.点击返回，回退到上衣界面

3.再点击关闭按钮，当前video关闭，在滑到顶部，发现video还存在，并且层级显示的是最高，盖住了所有的html结构

4.html代码

<template>
  <div class="video-wrapper"
       v-if="detail.videoUrl || startTime">
    <video class="video"
           v-if="detail.videoUrl"
           :src="detail.videoUrl"
           x5-video-player-type="h5-page"
           playsinline
           webkit-playsinline="true"
           controls
           loop
           mtt-playsinline=“true”
           raw-controls></video>
    <div class="poster-img">
      <img :src="detail.coverUrl || detail.imgUrl || ''"
           @error="imgError"
           alt="">
    </div>
    <div class="video-poster">
      <span class="status"
            v-if="startTime && detail.liveStatus != 0"
            :class="'status-' + detail.liveStatus">{{$tc('forum.status', detail.liveStatus - 1)}}</span>
      <div class="play-icon"
           :class="[!startTime && 'video-play-icon']"
           v-if="!timeSize && detail.videoUrl"
           @click="videoPlay">
        <i class="iconfont"
           :class="[detail.liveStatus === 2 ? 'iconyuyuechexiao' : 'iconbofang']"></i>
        <span v-if="detail.liveStatus">{{$tc('forum.status', detail.liveStatus - 1)}}</span>
      </div>
      <div class="count-down"
           v-if="timeSize">
        <span>{{$tc('forum.notice')}}</span>
        <p v-if="parseInt(timeSize[0]) != 0">{{parseInt(timeSize[0])}}{{$tc('home.days', parseInt(timeSize[0]))}} {{timeSize[1]}}:{{timeSize[2]}}:{{timeSize[3]}}</p>
        <p v-else>{{timeSize[1]}}:{{timeSize[2]}}:{{timeSize[3]}}</p>
      </div>
    </div>
  </div>
</template>

5.js代码

<script>
export default {
  name: 'Video',
  data () {
    return {
      timeSize: null,
      startTime: ''

    }
  },
  props: ['detail'],
  mounted () {
    if (this.detail.liveStatus === 2 && !this.detail.videoUrl) {
      this.detail.liveStatus = 3
    }
    this.startTime = this.detail.liveOpenTime || this.detail.liveStartTime
    if (this.detail.liveStatus === 0 && this.startTime && this.startTime > this.detail.systemCurrentTime) {
      this.countDown()
    } else if (this.detail.liveStatus === 0) {
      this.detail.liveStatus = 1
    }
  },
  methods: {
    countDown () {
      if (this.detail.liveStatus === 0) {
        let serverTime = this.detail.systemCurrentTime || new Date().getTime()
        this.timeSize = this.$Common.countDown(this.startTime, serverTime)
        const timeId = setInterval(() => {
          serverTime = serverTime + 1000
          this.timeSize = this.$Common.countDown(this.startTime, serverTime)
          if (!this.timeSize) {
            this.detail.liveStatus = 1
            clearInterval(timeId)
          }
        }, 1000)
      }
    },
    videoPlay () {
      const video = document.querySelector('.video')
      video.style.display = 'block'
      video.play()
      document.querySelector('.poster-img').style.display = 'none'
      document.querySelector('.video-poster').style.display = 'none'
    },
    imgError (e) {
      e.target.src = require('../assets/img/default_img169.jpg')
    }
  },
  beforeDestroy () {
    const video = document.querySelector('.video')
    video.style.display = 'none'
    document.querySelector('.video-wrapper').style.display = 'none'
  }
}
</script>