web移动端、UC浏览器、夸克浏览器等、video视频无法被其他元素覆盖、浏览器劫持视频播放

于 2024-07-10 19:08:18 发布
阅读量586 收藏 3
点赞数 1
文章标签： html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KenThomas/article/details/140332006
版权

研究了一天
终于发现
video标签muted要默认为true
移动端、UC浏览器、夸克浏览器等才不会出现video视频无法被其他元素覆盖、浏览器劫持视频播放的问题

解决方案：
muted为true默认静音
添加一个“取消静音”的按钮
点击后设置muted为false
打开声音
大多数web移动端也是这么处理的

KenThomas
关注
UC中video脱离文档流的规避方案（含常见浏览器判定）
riddle1981的博客
08-28 2566
首先声明目前没有找到彻底的解决方案找到的是规避方案，可以根据业务场景灵活食用。我的业务场景是要在video上盖东西，video会跑到最上层，体验很差。如果是相同场景可以继续看，不是可以直接退出。 1、判断他是个uc浏览器 navigator.userAgent.indexOf("UBrowser") 2、当video上需要盖东西的时候把video标签隐藏起来。（对，就是这么简单粗暴。因为即使隐藏起来效果也比video跑到文档外面乱跑视觉效果好的多） 以下是各种浏览器ua判定 var OsObject=na
html5 手机uc浏览器 复制链接,H5手机移动端调起浏览器（qq浏览器，uc浏览器）自带分享功能实例...
weixin_32760485的博客
06-05 4538
/*** mshare.js* 此插件主要做用是在UC和QQ两个主流浏览器* 上面触发微信分享到朋友圈或发送给朋友的功能* 代码编写过程当中 参考:*http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js* 此外，JefferyWang的项目对我也有必定启示：*https://github.com/JefferyWang...
移动端HTML5＜video＞ 浏览器劫持视频播放 视频激活播放后强制全屏 视频无法被其他元素覆盖
weixin_45461674的博客
11-21 7900
浏览器劫持视频播放、视频无法被其他元素覆盖 Html5 video 多媒体标签 <video id="loginVideo" muted autoplay loop :src="require('./assets/login.mp4')" ></video> 登录页加入视频作为背景，加入了video标签，设置定位，层级，谷歌浏览器调试完美展示，由于做的是H5网页，移至手机上查看（红米A8）。手机端
解决uc浏览器劫持video标签问题
smile_y_y的博客
05-15 1289
解决uc视频悬浮播放 ，video标签被浏览器劫持 ，vide0适配
解决浏览器不支持video问题
05-08
解决浏览器不支持video问题
移动端H5【video】浏览器劫持视频播放
2201_75568521的博客
02-26 2068
在H5页面开发中会使用视频，现在是使用videojs组件进行开发，但是在部分浏览器，如夸克，QQ浏览器中，视频会被浏览器劫持，不仅样式会有变化，且视频的层次会变得特别高。解决问题2：如需实现页面内（非全屏）播放，需要在 video 标签中加入 playsinline 和 webkit-playsinline 和 x5-playsinline 属性。解决问题1： 视频转成gif 使用poster属性做背景封面也可以使用js 方法。：使用第三方播放器，一般插件做过封装以上两个问题都可以解决。
android webview 劫持,微信webview 及第三方浏览器劫持视频问题
weixin_32578161的博客
05-26 1063
视频问题(安卓浏览器，app)安卓手机，大部分浏览器，强制劫持video标签；引起一系列问题；视频播放时及播放后处于置顶状态，导致提示窗等元素被遮挡；视频展示样式发生变化，设置圆角失效；视频的控件无法管理，出现下载，分享等按钮；视频暂停或播放结束时，甚至出现广告浮窗；视频尺寸与展示不一致时，object-fill:fill,cover 不起作用；1 视频问题汇总图.png由于是banner上配置的...
video标签在uc和QQ浏览器的bug
xxyzjb的专栏
08-19 9160
效果：在页面创建一黑色遮罩，然后视频水平垂直居中播放 问题1：如果hard-code 把video标签和src写死在html里面的话，uc浏览器下视频会很小很小，对css里面设置的宽度100%不起效，解决办法：动态更改src值，或者动态设置video的宽度。 问题2：同事遇到的，如果video默认设置成display：none，在QQ浏览器里面，视频不会播放，解决办法：动态创建video，并且
Html5开发 微信视频及夸克手机浏览器问题
kingdomwar的博客
05-24 2992
1、video标签在更换src之后，需要执行load()方法，载入新视频。this.video.src = src; this.video.load();2、在微信内置浏览器中，这段时间就会在video标签中显示上一个视频的最后一帧的画面所以需要在前一个视频播放完毕后隐藏video标签，再在切换src之后监听video.oncanplay，在触发该事件之后，再将相应的video标签显示出来，这样，...
基于javaScript+css+html实现仿夸克浏览器主页+源码+文档（毕业设计&课程设计&项目开发）
最新发布
08-26
基于javaScript+css+html实现仿夸克浏览器主页+源码+文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在...H5仿夸克浏览器主页 更新计划 搜索历史 壁纸库 夜间模式 可以添加预设书签
UC Browser Turbo极速浏览器国际版1.4.2.893 汉化中文版 修改百度搜索引擎 超越夸克
05-10
UC浏览器Turbo版是夸克浏览器的国际版，针对国际友人的，没有广告，没有新闻推送，极简设计，体验非常简单流畅。经测试比夸克浏览器占内存小一点。目前最新版UC Browser Turbo1.4.2.893没有中文版，搜索引擎也是谷歌...
基于HTML5的仿夸克浏览器主页源码(课程作业).zip
12-28
基于HTML5的仿夸克浏览器主页源码(课程作业).zip基于HTML5的仿夸克浏览器主页源码(课程作业).zip基于HTML5的仿夸克浏览器主页源码(课程作业).zip基于HTML5的仿夸克浏览器主页源码(课程作业).zip基于HTML5的仿夸克...
小米浏览器导出html,一招教你导出小米uc浏览器缓存视频
weixin_42350514的博客
06-03 6838
一招教你导出小米uc浏览器缓存视频相信很多小伙伴都有在使用小米uc浏览器，那么我们怎么导出其中的缓存视频呢？方法很简单，下面小编就来为大家介绍。具体如下：1.首先，打开浏览器，任意进入其中的一个视频网站。2. 点击下图箭头所指处的下载图标。3. 将下图一所示软件安装到手机后，打开该软件。4. 出现下图所示页面后，选择“自定义”后，再点击“下一步”。5. 将软件保存至文件管理器根目录，即下图红圈所圈...
【前端知识点】HTML5 浅谈 媒体标签<video><audio>
chaunceyw的博客
07-21 4916
html5播放器细谈，从大众自带浏览器 到 wechat和QQ以x5内核的浏览器，以及UC其他特殊的浏览器在此不再细谈：）当然也会分析iphone ios系统和Android手机系统的差别。【基本属性】video标签属性：src ：视频的属性，url地址 poster：视频封面，没有播放时显示的图片 preload：预加载|none|metadata（部分预加载）|auto。默认为auto auto
转载--video标签在微信内置浏览器和QQ浏览器（手机端）的怪异现象
weixin_33804582的博客
03-04 856
用H5做了一个新闻信息展示的网页，video标签总是处于最顶层，调节z-index的值不起作用，对于flash也是一样的情况，flash已设置wmode属性。在PC端和手机端大部分浏览器（360、小米内置浏览器、ff、opera、uc等）都没有这个问题，唯独在微信内置浏览器和QQ浏览器上有问题。求大神解答~补充：播放完毕还有广告背景 尊驾...
video标签在安卓手机内置浏览器上的播放问题
weixin_44891495的博客
08-30 1475
道阻且长，行而不辍，未来可期在手机内置浏览上，虽然没有给video标签设置controls,但在内置浏览器上，就是会显示。而且，video一旦自动播放，video的层级就会提升到最前，想设置一个盒子覆盖在上面都做不到，给前端造成了很大的困扰。看了很多相关问题的解决方法，直到看到把video的src设置为blob(视频流）安卓手机的内置浏览器因为认不出数据格式，而不再劫持video标签的渲染。直觉是个好方法，开始动手。下载blob类型的文件：在回调函数中可以这样写完美解决。
完美解决移动端video视频层级问题
热门推荐
风萧萧兮易水寒
06-14 3万+
H5页面视频播放的问题相信曾经让很多同学崩溃，video标签的层级问题始终无法得到完美的解决方案。 这次的需求是这样的：在浏览器中扫码打开一个H5页面，要将一个视频当成背景图片来播放（gif太大，所以不用） 通过给video标签设置postion z-index等属性，明显是不可行的。 方案1： <video id="video-ios" src="./ceshi.mp4" web...
移动端H5视频video开发兼容性总结
peade的博客
07-01 1399
在开发移动端视频video时，存在两个兼容性问题： 视频播放时全屏 视频播放时层级最高 视频播放时全屏 移动端浏览器在播放时，默认是全屏播放。改为内联播放方式为： ele.setAttribute('playsinline', props.options.playsinline); ele.setAttribute( 'webkit-playsinline', props.options.playsinline); ele.setAttribute('x5-video-player-type', 'h
QQ浏览器劫持html5的视频video标签的问题（怎么解决？）
阿酷tony
12-12 1万+
无解，暂无解决办法，哪位朋友知道告之一下，感激 QQ浏览器真的不讲一点规则，强制劫持视频video标签，这已经很 XX 了吧？还在视频结束时加载他们自己的广告，这... 就无语了。 相信开发html5视频播放器的朋友，都会遇到这个问题。 参见： 腾讯的移动浏览器劫持 &lt;Video&gt; 换成它自己的播放器还插广告： https://www.v2ex.com/t/411564 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值