uniapp video视频组件层级的问题

时间:2024-03-16 20:14:44

uniapp 中的video视频组件的层级问题

uniapp中的video视频组件默认是最高层级的,也就是说无论写什么样式,都是在video的下层,这样就会影响到页面的展示。

uniapp video视频组件层级的问题
如果点击视频播放的时候,video视频组件会永远在最高层,为了能够解决这个问题,可以通过另一个方式来处理。

就是视频播放的时候全屏展示,这样就可以避免层级的问题了。

页面顶部添加一个视频的组件

uniapp video视频组件层级的问题

如果是视频格式的则可以点击进行视频的播放

uniapp video视频组件层级的问题

data中创建一个参数用于接收视频路径

uniapp video视频组件层级的问题

页面onReady时创建视频区域

uniapp video视频组件层级的问题

methods方法中添加视频播放功能及改变全屏功能

uniapp video视频组件层级的问题

最终实现效果如下:

uniapp video视频组件层级的问题

uniapp video视频组件层级的问题