uni-app video组件全屏下层级太高

uni-app video组件全屏下层级太高

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：

<video style=“width: 100%;”
src="‘" title="‘title’" @play=“playVideo(item)” @pause.stop=“videoclick(item)” @fullscreenchange=“fullscreenchange(item)”
id="‘videp’+item.id" controls poster="item.attachmentVOS[0].length==’’?’./static/image/video404.jpg’:item.url==’’?http:///StudentBookMessageController/getVideoCoverOrPdfToImage?id=${item.id}:'http:///’+item.url"> <cover-view class="coverview-title coverview-center" :id="'tip'+item.id" v-show="item.addshow2"> {{item.videoTime}} </cover-view> 


# 预期结果：


<video style="width: 100%;"   
src="'****"
title="'title'"
[@play](/user/play)="playVideo(item)"
[@pause](/user/pause).stop="videoclick(item)"
[@fullscreenchange](/user/fullscreenchange)="fullscreenchange(item)"  
id="'videp'+item.id" controls
poster="item.attachmentVOS[0].length==''?'./static/image/video404.jpg':item.url==''?http://******/StudentBookMessageController/getVideoCoverOrPdfToImage?id=${item.id}:'http://**/'+item.url">
    <!-- #ifdef APP-PLUS -->
    <cover-view class="coverview-title coverview-center" :id="'tip'+item.id" v-show="item.addshow2">
        {{item.videoTime}}
    </cover-view>
    <!-- #endif -->
</video>

实际结果：

<video style=“width: 100%;”
src="‘" title="‘title’" @play=“playVideo(item)” @pause.stop=“videoclick(item)” @fullscreenchange=“fullscreenchange(item)”
id="‘videp’+item.id" controls poster="item.attachmentVOS[0].length==’’?’./static/image/video404.jpg’:item.url==’’?http:///StudentBookMessageController/getVideoCoverOrPdfToImage?id=${item.id}:'http:///’+item.url"> <cover-view class="coverview-title coverview-center" :id="'tip'+item.id" v-show="item.addshow2"> {{item.videoTime}} </cover-view> 


## bug描述：


video组件在全屏在层级太高，导致无法插入自定义内容；
试了cover-view，subnvue， plus.nativeObj均无效；
还有一个问题就是，官方文档里video title属性在vue页面不生效，无法加入标题；
video组件播放按钮模糊；

更多关于uni-app video组件全屏下层级太高的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

解决了吗？

更多关于uni-app video组件全屏下层级太高的实战教程也可以访问 https://www.itying.com/category-93-b0.html


怎么解决的？

https://github.com/liusheng22/uniapp-video-player

我这边是 webview 调用了 浏览器全屏以后 层级直接顶级了 不管是subnvue还是plus.nativeObj都不行

是的，我用nvue也不行，全屏后不能自定义内容了，uniapp的video太拉了

回复 深溪数智: 您好 现在解决了吗

目前视频层级问题，在 app 上是可以解决的，小程序之类的暂时没合适方案: https://github.com/liusheng22/uniapp-video-player

这是一个已知的 uni-app video 组件在 APP 端的限制问题。video 组件全屏时确实会覆盖所有其他元素，包括 cover-view。

问题分析：

  1. 全屏层级问题：在 APP 端，video 组件全屏时会使用原生播放器，层级最高，无法通过常规方式覆盖自定义内容
  2. title 属性不生效：video 的 title 属性在 APP 端确实不支持，这是平台限制
  3. 播放按钮模糊：可能是由于缩放或渲染问题导致

解决方案：

针对全屏自定义内容问题： 目前最可行的方案是放弃使用 video 组件的全屏功能，改为自定义全屏实现：

<template>
  <view>
    <!-- 正常状态 -->
    <video 
      v-if="!isFullScreen"
      :src="videoSrc"
      controls
      @fullscreenchange="handleFullscreen"
    ></video>
    
    <!-- 自定义全屏状态 -->
    <view v-if="isFullScreen" class="custom-fullscreen">
      <video 
        :src="videoSrc"
        :style="fullscreenStyle"
        controls
        @fullscreenchange="exitFullscreen"
      ></video>
      <!-- 这里可以添加自定义覆盖内容 -->
      <cover-view class="custom-overlay">
        {{videoTime}}
      </cover-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFullScreen: false,
      fullscreenStyle: {
        width: '100vw',
        height: '100vh',
        position: 'fixed',
        top: '0',
        left: '0',
        'z-index': 9999
      }
    }
  },
  methods: {
    handleFullscreen() {
      this.isFullScreen = true
      // 锁定屏幕方向
      plus.screen.lockOrientation('landscape')
    },
    exitFullscreen() {
      this.isFullScreen = false
      plus.screen.unlockOrientation()
    }
  }
}
</script>

<style>
.custom-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 10000;
}

.custom-overlay {
  position: absolute;
  bottom: 100px;
  left: 20px;
  color: white;
  z-index: 10001;
}
</style>
回到顶部