video层级过高，以及界面使用多个video时，在安卓APP上同时播放的问题（uniapp）

最新推荐文章于 2024-07-04 17:06:35 发布

浅箬

最新推荐文章于 2024-07-04 17:06:35 发布

阅读量2.4k

点赞数 1

分类专栏：日常问题总结 uniapp 文章标签： uni-app 前端

本文链接：https://blog.csdn.net/qq_34458824/article/details/129408465

版权

日常问题总结同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

uniapp

7 篇文章 0 订阅

订阅专栏

文章讲述了在uni-app中遇到的video层级过高遮挡导航栏和自定义菜单的问题，以及在安卓设备上处理多个video同时播放的解决方案。通过使用cover-view替换view来调整video层级，利用subNVues创建原生子窗体解决弹出层被覆盖问题，并通过uni.createVideoContext控制每个视频的播放状态，实现安卓上多视频播放的管理。

摘要由CSDN通过智能技术生成

1、video层级过高的问题

问题一：我的界面由于是自定义导航栏，所以使用video时，上滑界面video会直在最上层，盖着头部导航栏

解决方法：使用cover-view,自定义头部使用cover-view替换view

问题二：自定义导航栏上面有menu，点击会出现一个弹出层，但是弹出层会被video压到

解决方法：使用原生窗体subNVues（uni-app subNVue 原生子窗体开发指南 - DCloud问答），原生窗体在第一次打包的时候可能会显示问题，打包的时候注意一下就行。详细的以上链接有说明

2、循环使用多个video时，安卓手机同时播放的问题

使用uni.createVideoContext，具体方法：

<video 
:src="item.src" 
:data-id="item.id" 
:id="item.id" 
class="item-video" 
:poster="item.src+'?x-oss-process=video/snapshot,t_0,f_jpg'" 
show-fullscreen-btn="false" 
object-fit="cover" 
@play="playing">
</video>

        playing(e) {
            // 获取当前视频id
            let currentId = e.currentTarget.dataset.id
            console.log(currentId);
            // uni.createVideoContext获取视频上下文对象
            this.videoContent = uni.createVideoContext(currentId)
            // 获取json对象并遍历, 停止非当前视频
            //operationList为video循环列表
            let operationList = this.operationList
            for (let i = 0; i < operationList.length; i++) {
              let temp = operationList[i].id
              if (temp !== currentId) {
                uni.createVideoContext(temp).pause()
              }
            }
          },

以上就可以解决安卓手机上，多视频播放的问题啦