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

已于 2025-02-22 14:54:02 修改
阅读量408 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： 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 - 实现手机端H5网页直播功能效果，拿到后端推流地址或播放资源后进行前端的流畅播放和画面展示功能，uniapp实时推流/拉流直播系统详细教程（提供完整示例代码，一键复制开箱即用！）
高级前端工程师
12-28 5460
uniapp，h5网页，手机端H5网页，uniapp h5直播功能页面，uniapp直播实时推送显示，uniapp h5直播怎么做，怎么使用uniapp去实现移动端手机H5直播，h5 vue+uniapp怎么做直播，uniapp中使用videojs构建H5直播播放器，uniappH5端怎么实现直播推流，uniapp如何实现直播，直播聊天功能，h5平台端直播用什么插件，uniapp手机网页直播用什么组件插件播放器，uniapp手机H5直播播放器详细教程，直播项目，怎么使用vue+uniapp怎么做H5实时直播
uniapp入门超详细教程：如何从零开始搭建项目
热门推荐
weixin_51609337的博客
07-19 2万+
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。本次章节也是博主从零开始搭建uniapp项目，在此过程进行记录，帮助后续查询同时为读者提供讲解，如有异议，欢迎留言。uni-app官网。
Uniapp微信小程序视频全屏播放功能极简实现法
Aays2790的博客
08-10 1万+
*高端的食材，往往只需要最朴素的烹饪方式，本文用css旋转定位实现视频全屏播放，朴实无华，简单实用，本文为原创，分享请标明出处* 实习入职第三周，在经过两周的改bug和切图之后，组里说给我一个有挑战性的需求，做一个视频全屏播放的功能 简单来说，就是点击按钮，将视频全屏播放，宽高比例过1.8的横屏播放，小于1.8的仍然竖屏播放，就像下面这样 看完需求我的思考如下： 1.在原页面操作属实麻烦，需要点击全屏按钮跳转到新页面播放 2.由于需要保留侧边栏的点赞关注等功能，所以需要组件分离复用 3.由于存在横竖
Uniapp微信小程序视频全屏播放功能极简实现法_uniapp视频全屏播放
2401_85015191的博客
05-14 1104
PS：由于拖动进度条的时候视频仍处于播放中，进度状态不停的在更新，会导致拖动时有闪动的情况，所以需要在拖动开始时暂停视频，在拖动结束后再播放，但是uniapp的slider组件没有拖动开始的属性，只有sliderChanging，它会在拖动中高频率触发，所以我们写一个节流函数让它3秒只触发一次暂停视频，减少不必要的内存消耗。模拟点击事件，即当拖动的距离足够小时，直接记录当前y坐标，获取视口高度，得出当前y坐标在整个视口的相对位置，并且把进度条调到整个进度条的同比相对位置。
uniapp h5 在video全屏播放时显示水印图片
最新发布
qq_57477371的博客
04-22 242
项目中需要给视频播放时添加水印图片，视频在非全屏下可以直接使用定位就可以显示遮盖的水印，但是在视频全屏时，水印就会消失，这是因为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 4939
<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 2672
重点：导致安卓全屏不了的问题就在于css样式问题。废话不多说直接上干货。
uniapp subNvue 写的视频播放
11-03
- **全屏适配**：利用uniapp的`requestFullScreen`和`exitFullScreen` API，实现视频的横屏全屏播放。 4. **uniapp的生命周期方法** - `onLoad`：用于初始化视频播放器，加载视频资源。 - `onReady`：当视频...
uni-app 视频播放遇到的问题-video
liuye066的专栏
12-07 1万+
最近开发一个项目，一个视频列表，点击其中一个视频，全屏播放（像大屏预览似的全屏），图上覆盖截图，全屏和回放图标。 弹出的全屏窗口： videoTest.vue <template> <view style="height: 100%;"> <videoView></videoView> </view> </template> <script> import videoView from './video.
uniapp学习总结
weixin_67850938的博客
06-15 1107
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app组成和跨端原理uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxmlwxssjs等代码。
uniapp 视频全屏IOS兼容
weixin_40638895的博客
07-06 310
开发者,IDE相关视频讲解：美国禁用中国大学MATLAB快四年，国产替代完成了吗？C语言程序设计入门之环境安装实现uniapp视频全屏IOS兼容指南 1. 流程概述 为了实现uniapp视频全屏IOS兼容，我们需要按照以下步骤进行操作： 步骤 操作 1 检查视频组件是否支持全屏功能 2 在uniapp...
uniapp video 标签，点击进入全屏播放，退出全屏，停止播放，暂停播放
qq_24518001的博客
04-08 3554
【代码】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 4231
使用 video组件播放视频时，在苹果手机上全屏后页面横竖屏错乱，点击返回按钮退出全屏，页面变成横屏，在iOS16 以上都会出现这个问题。video 组件添加fullscreenchange监听事件，当退出全屏时手动设置竖屏。修改manifest.json配置文件。
uniapp全屏播放视频以及获取第一帧作为封面图
weixin_47568895的博客
04-18 2008
uniapp全屏播放视频以及获取第一帧作为封面图。
uni-app微信小程序video组件全屏播放亮度问题
weixin_42083974的博客
09-05 600
1.在使用uniapp开发微信小程序时，涉及到播放视频的需求，所以选择了uniapp的内置组件video，但是在全屏播放视频的时候，通过手势滑动将亮度调节到最低，然后退出小程序，再次进入小程序时，所有页面的亮度都会显示为最低，而且这个时候手机系统自带的亮度调节功能失效，经过调研，发现以下方法可以解决这个问题（此问题只在安卓系统的手机上复现，IOS系统没有发现这个问题）value: res.value, //屏幕亮度 值在0~1之间。加入以上代码之后，在退出全屏播放时会把手机亮度恢复到之前的亮度。
html video全屏横屏播放视频怎么实现
11-19
要在HTML中让`<video>`元素全屏并横屏播放视频，你可以结合CSS和JavaScript来实现。下面是一个基本步骤： 1. 首先，在HTML里添加`<video>`元素，并设置一些基础属性，如`src`、`controls`等： ```html <video id="myVideo" src="your_video.mp4" controls></video> ``` 2. 然后，在CSS中隐藏默认的控制条（如果你不想显示），并设置宽度和高度为100%，以便适应屏幕： ```css #myVideo { display: none; width: 100%; height: 100%; } ``` 3. 使用JavaScript监听`fullscreenchange`事件，当视频进入全屏模式时，改变其样式以实现横屏。这通常需要检查设备的屏幕方向： ```javascript document.addEventListener('fullscreenchange', function() { var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen; if (isFullScreen) { // 当处于全屏时，切换到横屏模式 // 这部分通常依赖于浏览器的支持，可以使用CSS `transform` 或者 JavaScript 来旋转视口 // 例如，使用 CSS: // document.body.style.transform = 'rotateY(90deg)'; // 或者使用 JS 和 CSS Flexbox (假设你的 HTML 结构支持): const container = document.getElementById('myVideo'); container.parentNode.style.display = 'flex'; container.style.flexDirection = 'column-reverse'; } else { // 撤出全屏或恢复竖屏 // ...这里处理退出全屏后的横屏恢复 } }); ``` 请注意，由于不同浏览器对全屏API的支持可能有差异，上述代码可能需要调整以兼容所有主流浏览器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值