uniapp video视频播放横屏/全屏情况下 层级问题

已于 2025-02-22 14:54:02 修改
阅读量260 收藏
点赞数 2
文章标签： uni-app
于 2025-02-22 14:50:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jiaxiaohong_csdn/article/details/145795004
版权

1、问题记录
     视频上有点赞等操作，模拟器上不管是苹果还是安卓都显示正常，真机模拟就没有了，由于本人是苹果手机然后就一直用苹果手机调试，发现真机运行的时候竖屏层级还正常，一旦横屏视频会自动加上一个很大的索引值，如图

然后就把点赞等操作按钮z-index值设置的比视频大就解决了，以为完事了，不料安卓手机不行。。。于是真机运行安卓手机去调试，无奈运行完左侧的wxml又不出现了，我用苹果手机调的时候也是时不时才出现，这搞得也无法抓原因.
2、解决：最后试了半天发现把点赞等操作元素放到video视频里就行了。

最后有哪位大佬可以告诉我，我真机运行的窗口为啥左侧wxml出不了呢？（报错信息就是图片未加载出来，应该不影响吧）

Uniapp微信小程序视频全屏播放功能极简实现法_uniapp视频全屏播放
2401_85015191的博客
05-14 1069
PS：由于拖动进度条的时候视频仍处于播放中，进度状态不停的在更新，会导致拖动时有闪动的情况，所以需要在拖动开始时暂停视频，在拖动结束后再播放，但是uniapp的slider组件没有拖动开始的属性，只有sliderChanging，它会在拖动中高频率触发，所以我们写一个节流函数让它3秒只触发一次暂停视频，减少不必要的内存消耗。模拟点击事件，即当拖动的距离足够小时，直接记录当前y坐标，获取视口高度，得出当前y坐标在整个视口的相对位置，并且把进度条调到整个进度条的同比相对位置。
微信H5视频/VIDEO/全屏/不全屏/自动播放等相关问题
热门推荐
不懂小彬的博客
12-28 3万+
做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步，自动全屏，不能全屏，不能自动播放，Android，IOS，巴拉巴拉……多到令人发指！今天整理了一下相关的解决办法，以上并不是全部解决了，但是起码能打个60分…… 第一步:设置 x5­video­player­type 启用Ｈ5同层播放器通过video属性“x5­video­player­type”声明启用同层H5播放器 x5­v
Uniapp微信小程序视频全屏播放功能极简实现法
Aays2790的博客
08-10 1万+
*高端的食材，往往只需要最朴素的烹饪方式，本文用css旋转定位实现视频全屏播放，朴实无华，简单实用，本文为原创，分享请标明出处* 实习入职第三周，在经过两周的改bug和切图之后，组里说给我一个有挑战性的需求，做一个视频全屏播放的功能 简单来说，就是点击按钮，将视频全屏播放，宽高比例过1.8的横屏播放，小于1.8的仍然竖屏播放，就像下面这样 看完需求我的思考如下： 1.在原页面操作属实麻烦，需要点击全屏按钮跳转到新页面播放 2.由于需要保留侧边栏的点赞关注等功能，所以需要组件分离复用 3.由于存在横竖
关于uniapp的video组件全屏会被父级的图片和文字顶下来位置这件事
qq_56438836的博客
01-10 214
哈哈哈哈啊哈谁来告诉我这是为什么啊！
解决 Uniapp 中 App 端 video 元素层级过高的问题
最新发布
qq_60743005的博客
03-16 739
在 Uniapp 开发中，使用video组件时，可能会遇到video元素层级过高的问题，导致其覆盖其他元素（如弹窗、导航栏等）。在 Uniapp 的 App 端，video组件默认会以原生组件的形式渲染，其层级较高，可能覆盖页面中的其他元素。即使通过z-index调整层级，也无法完全解决这一问题。
uni-app通过点击事件直接全屏播放视频
我的博客
09-23 1万+
一、背景：项目需求，点击元素直接全屏播放视频，退出全屏关闭视频。 二、代码 <view v-if="videoPlay"> <video controls id="myvideo" :src="videoUrl" @fullscreenchange="screenChange" ></video> </view> data() { return { videoPlay: false,
uniapp 视频默认全屏 播放
拿回忆下酒
06-23 1万+
在做小程序时，遇到播放视频，希望直接点击视频便全屏播放，uniapp 文档上也有介绍createVideoContext 重要的事情说三遍 this this this，记得createVideoContext第一个参数为video的ID，第二个参数组件实例this this.videoContext = uni.createVideoContext(id,this); this.videoContext.requestFullScreen(); <video id="myVideo" :
uniapp视频播放默认全屏（横屏显示）
我的电脑会后空翻的博客
10-26 4863
<template> <view> <video :src="videoUrl" @play="playVedio()" @fullscreenchange="screenchange" id="video"></video> </view> </template> <script> export default { data() { return { videoUrl: 'http://125246
uni-app小程序video不能自动全屏问题
nelly521的博客
09-22 2542
重点：导致安卓全屏不了的问题就在于css样式问题。废话不多说直接上干货。
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { ...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
在本文中，我们将深入探讨如何使用vue-video-player组件在微信环境中解决自动全屏播放以及横竖屏导致的样式错乱问题。vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如...
FullscreenVideo:在Ionic App中以横向模式显示全屏视频
05-13
要实现在横屏模式下播放全屏视频，我们首先要确保视频元素的设置正确。以下是一个基本的HTML结构示例： ```html <video id="fullscreen-video" src="your_video_path.mp4" controls playsinline></video> </...
Uniapp微信小程序视频全屏播放功能极简实现法_uniapp视频全屏播放(1)
2401_85015191的博客
05-14 870
【代码】Uniapp微信小程序视频全屏播放功能极简实现法_uniapp视频全屏播放(1)
uniapp 视频全屏IOS兼容
weixin_40638895的博客
07-06 259
开发者,IDE相关视频讲解：美国禁用中国大学MATLAB快四年，国产替代完成了吗？C语言程序设计入门之环境安装实现uniapp视频全屏IOS兼容指南 1. 流程概述 为了实现uniapp视频全屏IOS兼容，我们需要按照以下步骤进行操作： 步骤 操作 1 检查视频组件是否支持全屏功能 2 在uniapp...
uniapp video 标签，点击进入全屏播放，退出全屏，停止播放，暂停播放
qq_24518001的博客
04-08 3421
【代码】uniapp video 标签，点击进入全屏播放，退出全屏，停止播放，暂停播放。
uniapp 中 H5端 使用 video 使其全屏横屏播放
leaf的博客
09-13 1万+
起因： H5端 uniapp 提供的 video 组件，在点击其全屏按钮后，进入全屏状态，视频显示部分仍然为竖屏显示，无法转换成横屏，查阅了大量的资料。 官方人员说 H5端不支持 了解详情 但是客户提出来了就要想办法解决 解决方案： 自定义 video 组件，不使用官方组件 使用 css 进行样式修改强制 横屏 就有了第一版 获取video标签，对齐进行css样式修改… 简单粗暴 需要把video原生带的全屏隐藏掉(有这个属性show-fullscreen-btn改成false就可以了)，自己再写一个
uni-app解决video组件全屏时页面横竖错乱问题
培根芝士的专栏
12-04 4000
使用 video组件播放视频时，在苹果手机上全屏后页面横竖屏错乱，点击返回按钮退出全屏，页面变成横屏，在iOS16 以上都会出现这个问题。video 组件添加fullscreenchange监听事件，当退出全屏时手动设置竖屏。修改manifest.json配置文件。
uniapp全屏播放视频以及获取第一帧作为封面图
weixin_47568895的博客
04-18 1967
uniapp全屏播放视频以及获取第一帧作为封面图。
uniapp视频点击全屏播放横屏
01-03
### 实现 UniApp 中视频点击后全屏播放并切换到横屏模式 为了实现在 UniApp 应用中当用户点击视频时能够进入全屏播放并且屏幕方向变为横向，可以采用如下方法： #### 方法概述 通过监听视频组件上的 `click` 或者 `play` 事件来检测用户的操作行为。一旦捕捉到了这些事件，则调用相应的API改变设备的方向至 landscape (即横屏)，接着再让视频进入到全屏状态。 对于 Android 设备而言，在某些情况下可能会存在 H5 对于自动播放功能有所限制的情况[^1]；因此建议确保是在接收到实际的用户交互之后才执行上述逻辑。 下面给出具体的实现方式以及一段简单的代码示例用于展示这一过程。 #### 示例代码 ```javascript <template> <view class="video-container"> <!-- 使用 video 组件 --> <video id="myVideo" @tap="handleTap"></video> </view> </template> <script> export default { methods: { handleTap() { const videoContext = uni.createVideoContext('myVideo'); // 判断是否支持设置屏幕旋转 if (uni.getSystemInfoSync().platform === 'android') { plus.screen.lockOrientation('landscape'); // 锁定为横屏 } else { // iOS 平台处理 wx.setScreenBrightness({ brightness: 0 }); // 尝试唤醒锁屏接口促使系统响应 setTimeout(() => { wx.setKeepScreenOn({ keepScreenOn: true }); }, 200); } // 请求全屏显示 videoContext.requestFullScreen({ direction: 90, // 设置为顺时针旋转90度达到横屏效果 success(res) { console.log("成功请求全屏", res); }, fail(err) { console.error("失败", err); } }); // 开始播放视频 videoContext.play(); } } } </script> ``` 这段代码展示了如何在一个 Vue 单文件组件内完成所需的功能。这里需要注意的是针对不同平台（Android 和 iOS）采取不同的策略去尝试锁定屏幕方向，并且利用了 `createVideoContext()` 来获取对 `<video>` 元素的操作权限从而控制其进入全屏模式和启动播放。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值