关于video元素在移动端，安卓端播放，层级最高的bug解决。100%有用

最新推荐文章于 2024-04-22 15:28:53 发布
最新推荐文章于 2024-04-22 15:28:53 发布
阅读量3.4k 收藏 13
点赞数 3
文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cold__Star/article/details/109571881
版权

video元素在安卓端播放视频，层级最高，遮挡弹窗，百度一堆都是说加x5-video-player-type="h5"属性，其实不然，正确的写法是

  <div class="video">
    <video 
    x5-video-player-type="h5"
    webkit-playsinline="true" 
    playsinline="true"
    src="https://1251250874.vod2.myqcloud.com/439f276avodtransgzp1251250874/89c9f3a15285890799882254764/v.f20.mp4" controls></video>

百度一堆叫你加x5-playsinline ，会导致在x5内核浏览器中播放层级最高，去掉完美解决，经过测试ios和安卓perfect
解决video移动端层级最高bug

Cold__Star
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "navigationStyle": "custom", "app-plus": { "titleNView": false, //禁用原生导航栏 "subNVues": [{ "id": "subnvue", //顶部导航配置 "path": "pages/index/subnvue", "type": "navigationBar" }, { "id": "drawer", "path": "pages/index/drawer.nvue", // 配置分享弹窗 "style": {
解决微信小程序的video元素层级太高无法遮盖问题
苦涩精灵的博客
01-16 3488
解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题 今天在项目中遇到了这个问题，需要在微信小程序中用视频作为背景，微信开发者工具中模拟的没问题，真机调试就发现video的层级太高，其他元素设置 z-index 都低于 video 微信官方文档提供的解决办法 因为微信小程序的 video 原生组件层级太高，无法用 z-index 层叠。所以可以使用 <cover-view> <cover-image> 作为覆盖在原生组件之上的文本视图元素 可覆盖
uniapp中video层级太高解决方案，适用安卓/IOS/H5
Am心若依旧
08-09 2292
话不多说，直接上代码stylewidth100%;height100%;border;
移动web端视频层级最高，视频弹窗层被遮挡的解决方案探究
萌新_zackXiong_勇闯前端~
04-15 4836
一.背景 相信有不少同学在开发移动web端带视频的页面时，在部分浏览器上视频的显示层级最高，遮罩层，弹窗之类都被视频遮盖。 我觉得出现这种情况是因为使用了浏览器的播放器，和标准的h5video标签有比较大的区别。会出现这种情况的有： 安卓端: 微信内置浏览器，UC浏览器，QQ浏览器....等等 苹果端： 手头没有苹果设备. [补充说明]: 文中用的是layer.js的弹窗组件 二...
video视频背景层级过高解决方案
无名之辈-_-
03-31 1833
uni-app video
video使用安卓手机在播放状态或者播放后浮在最上层问题
热门推荐
哈喽234的博客
01-09 1万+
MPEG-4视频，支持2.5Mbps、640*480像素、30帧每秒、AAC-LC音频，速率为160Kbps、48kHz，立体声音频输入的.m4v、.mp4、.mov格式。240像素、30帧每秒、支持1.3版的AAC-LC音频，速率为160Kbps、48kHz，立体声音频输入的.m4v、.mp4、.mov格式。视频设置背景图，透明。
解决移动端视频层级最高的问题，修改video属性
little_kid_pea的博客
06-04 8839
原文链接 1.安卓端下的video标签播放时会被浏览器接管。此时已经脱离了文档流，并且与文档已经非同层了，所以设置z-index是无效的。 2.安卓下qq的x5内核浏览器，提供了相关属性。分别为：x5-playsinline：行内播放。x5-video-player-type="h5"：播放层级为文档层级。 参考 x-webkit-airplay="allow" x5-v...
video层级过高，以及界面使用多个video时，在安卓APP上同时播放的问题（uniapp）
随身笔记
03-08 2225
uniapp中video多个同时播放问题 video 层级过高的问题解决 subNVues原生窗体的使用
前端H5 video视频在360浏览器、微信内置浏览器层级提升（太高）问题
薛小科的博客
09-06 785
我们在对页面进行浏览器兼容性测试的时候会发现页面中的视频在部分浏览器中（QQ浏览器、360浏览器、搜狗浏览器等）会被提升，这属于浏览器自身优化行为，无法通过CSS的z-index属性改变其层级关系。目前找到了360浏览器、微信内置浏览器的解决方案： <video controls360=no // 360浏览器 webkit-playsinline playsinline x5-playsinline // 针对腾讯
移动端video点开后层级过高问题
吞石鱼的博客
08-13 1万+
网络上有很多关于该问题的解答，而且大家遇到的状况也是层出不穷。 我初步分析是由于不同厂商和游览器内核版本等不同导致的标签解析和渲染问题。我仅仅以我的两个手机进行解答。 首先我得机型分别是nubia z11 android 6.0.1 和 huawei nova 3 android 9.0 测试时间 2019.8.13 两款手机的表现是，huawei 和 nubia未点击video时，video都是...
Android编程使WebView支持HTML5 Video全屏播放的解决方法
09-03
主要介绍了Android编程使WebView支持HTML5 Video全屏播放的解决方法,较为详细的分析了全屏播放所涉及的相关技巧,并给出了完整代码下载地址供读者参考,需要的朋友可以参考下
解决video标签在安卓webview下无法自动播放问题
09-04
主要介绍了video标签在安卓webview下无法自动播放问题的解决方法 ,需要的朋友可以参考下
vue-video:vue移动端简单自定义控件播放器
05-13
vue-video vue移动端简单自定义控件播放器
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 358
官网代码（在取消选中状态的时候不生效）
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 956
​​​​​​​。
Vue.js（自定义指令）
Luo3255069063的博客
04-18 392
【代码】Vue.js（自定义指令）
PLSQL的下载与安装
code袁的博客
04-18 499
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
vue 实现级联选择器功能
最新发布
清音的博客
04-22 216
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
【可视化大屏开发】19. 加餐-百度地图API实现导航加线路热力图
pblh123的专栏
04-17 904
Web端使用场景中会涉及到地图导航路线情况，并利用热力图显示路况信息。实现效果如下：输入起始地点，选择并开始导航最终效果。
在移动端如何实现gif图像video一样的有点击播放，暂停，全屏，静音的功能
06-06
在移动端，可以使用HTML5的video标签来实现gif图像的点击播放、暂停、全屏和静音等功能。 具体实现步骤如下： 1. 将GIF图像转换为视频格式（如MP4）。 2. 在HTML5中使用video标签引入转换后的视频文件。 3. 使用JavaScript编写相关的控制逻辑，例如点击播放、暂停、全屏和静音等功能。 4. 根据需要，可以使用CSS调整视频的样式和布局。 下面是一个简单的示例代码： ``` <video id="myVideo" src="path/to/myVideo.mp4"></video> <script> var video = document.getElementById("myVideo"); // 播放和暂停 video.onclick = function() { if (video.paused) { video.play(); } else { video.pause(); } } // 全屏 video.ondblclick = function() { if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); } else if (video.msRequestFullscreen) { video.msRequestFullscreen(); } } // 静音 video.onvolumechange = function() { if (video.muted) { video.muted = false; } else { video.muted = true; } } </script> ``` 以上代码中，首先使用video标签引入了一个MP4格式的视频文件。然后通过JavaScript编写了点击播放、暂停、全屏和静音等功能的控制逻辑。最后，根据需要通过CSS调整视频的样式和布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值