QQ浏览器劫持html5的视频video标签的问题（怎么解决？）

最新推荐文章于 2025-09-15 16:24:10 发布
原创 最新推荐文章于 2025-09-15 16:24:10 发布 · 1.7w 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#QQ浏览器劫持video #劫持video标签

本文探讨了QQ浏览器强制劫持HTML5 video标签并插入广告的问题，这一行为影响了视频播放器的正常工作，尤其是在开发HTML5视频播放器时会遇到此困扰。文章同时链接了相关讨论及原创文章，涉及HLS协议、Chrome浏览器设置、IIS配置、HTML5视频播放器设计等内容。

无解，暂无解决办法，哪位朋友知道告之一下，感激

QQ浏览器真的不讲一点规则，强制劫持视频video标签，这已经很 XX 了吧？还在视频结束时加载他们自己的广告，这... 就无语了。

相信开发html5视频播放器的朋友，都会遇到这个问题。

参见：

腾讯的移动浏览器劫持 <Video> 换成它自己的播放器还插广告： https://www.v2ex.com/t/411564

video标签在微信内置浏览器和QQ浏览器（手机端）的怪异现象？https://www.zhihu.com/question/27472010

 

我的原创文章整理：

移动端H5【video】浏览器劫持视频播放
2201_75568521的博客
02-26 3916
在H5页面开发中会使用视频，现在是使用videojs组件进行开发，但是在部分浏览器，如夸克，QQ浏览器中，视频会被浏览器劫持，不仅样式会有变化，且视频的层次会变得特别高。解决问题2：如需实现页面内（非全屏）播放，需要在 video 标签中加入 playsinline 和 webkit-playsinline 和 x5-playsinline 属性。解决问题1： 视频转成gif 使用poster属性做背景封面也可以使用js 方法。：使用第三方播放器，一般插件做过封装以上两个问题都可以解决。
解决uc浏览器劫持video标签问题
smile_y_y的博客
05-15 2975
解决uc视频悬浮播放 ，video标签被浏览器劫持 ，vide0适配
百度浏览器移动端video自动置顶、层级提高问题
最新发布
weixin_47509784的博客
09-15 504
百度浏览器（X5内核）存在视频自动置顶播放问题，导致视频脱离原有布局。原因包括强制全屏机制、层级劫持和硬件加速隔离。解决方案包括：1）使用本地视频资源并禁用自动全屏；2）通过CSS或JavaScript修复层级问题；3）动态控制播放行为；4）禁用硬件加速；5）X5内核特殊处理；6）封装可控视频组件。若上述方法无效，可检测是否为百度浏览器并设置特殊样式绕过问题。最终通过navigator.userAgent检测百度浏览器，针对性处理视频展示问题。
QQ浏览器劫持video标签加载自己的广告（怎么解决？）
专注企业级视频应用，企业视频直播、MR虚拟直播、教育培训连麦直播
03-14 5110
QQ浏览器劫持video标签加载自己的广告（怎么解决？） QQ浏览器真的不讲一点规则，强制劫持视频video标签，这已经很 XX 了吧？还在视频结束时加载他们自己的广告，这... 就无语了。 相信开发html5视频播放器的朋友，都会遇到这个问题。 参见： 腾讯的移动浏览器劫持 &lt;Video&gt; 换成它自己的播放器还插广告：https://www.v2ex.com/t/411564...
video标签在h5中被劫持问题
weixin_52901235的博客
11-26 1012
video标签在h5中被劫持问题 注：如果出现跨域问题需要在服务器上设置一下不让跨域。
移动端HTML5＜video＞ 浏览器劫持视频播放 视频激活播放后强制全屏 视频无法被其他元素覆盖
weixin_45461674的博客
11-21 9373
浏览器劫持视频播放、视频无法被其他元素覆盖 Html5 video 多媒体标签 <video id="loginVideo" muted autoplay loop :src="require('./assets/login.mp4')" ></video> 登录页加入视频作为背景，加入了video标签，设置定位，层级，谷歌浏览器调试完美展示，由于做的是H5网页，移至手机上查看（红米A8）。手机端
解决安卓微信video标签标签劫持
晓晓攻城师的攻城之路
08-15 3165
解决安卓微信video标签标签劫持 需求 期望网页中的video标签，不在安卓微信中被劫持播放。 代码 可能视频地址失效，换个视频地址，再测试。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...
解决浏览器不支持video问题
05-08
总结，解决浏览器不支持 `<video>` 标签的问题，关键在于提供多格式的视频源，利用 JavaScript 库增强兼容性，以及考虑不支持视频的用户的体验。随着技术的发展，浏览器对 `<video>` 标签的支持正在逐步完善，但仍需...
uniapp video组件H5模式在小米华为浏览器内被遮挡的一个处理方案
applebomb的专栏
09-27 968
今天测试发布的H5视频播放器页面时，突然有报告说播放后无法返回了。还原测试的步骤发现，出现问题的机型是QQ浏览器和小米浏览器。于是开始搜对应的解决方案。
H5页面在手机浏览器上无法播放视频或无法切换视频源的解决方案
热门推荐
旷古的寂寞的博客
01-28 1万+
一、视频无法播放问题 最近做了个播放MP4视频的网页，发现PC端能正常播放视频，但是部分手机浏览器，例如UC浏览器，播放视频要么一直转圈加载，要么报-9324,19000错误。 查了很多资料，基本都是说video标签的参数配置不对或者浏览器版本不兼容，没啥用。 最后发现问题出在网络协议上，H5做的页面在部分手机端的浏览器上只能用http或者websocket协议传输视频数据，不能用https协议。 解决方案就是在video标签中使用完整的http视频链接，即使用http前缀的绝对路径。 <
微信端视频播放时防止被浏览器劫持的问题
阿酷tony
03-25 5629
微信端视频播放时防止被浏览器劫持的问题： 参见： 腾讯的移动浏览器劫持 <Video> 换成它自己的播放器还插广告： https://www.v2ex.com/t/411564 video标签在微信内置浏览器和QQ浏览器（手机端）的怪异现象？https://www.zhihu.com/question/27472010 --------------------- 代码： ...
H5的video 在安卓浏览器上层级问题
qq_23399717的博客
04-04 2880
H5的video 在安卓浏览器上层级问题
终于解决qq浏览器里面播放video会带自己广告的问题了
sinat_38992528的博客
05-29 7770
思路 ： 用videojs 播放完后强制销毁video 用一张图片来替代背景 如果想观看 就强制刷新整个页面 很棒 具体不会可以私了留言 就不贴代码了
手机端原生H5video 和QQ浏览器 兼容性
weibo392的博客
06-21 5413
手机端原生H5video 和QQ浏览器 兼容性
android webview 劫持,微信webview 及第三方浏览器劫持视频问题
weixin_32578161的博客
05-26 1262
视频问题(安卓浏览器，app)安卓手机，大部分浏览器，强制劫持video标签；引起一系列问题；视频播放时及播放后处于置顶状态，导致提示窗等元素被遮挡；视频展示样式发生变化，设置圆角失效；视频的控件无法管理，出现下载，分享等按钮；视频暂停或播放结束时，甚至出现广告浮窗；视频尺寸与展示不一致时，object-fill:fill,cover 不起作用；1 视频问题汇总图.png由于是banner上配置的...
video 播放视频被x5内核浏览器劫持时的处理记录
我是渣渣
09-25 3755
因为业务关系，最近一直做微信相关的东西。一直被教育，过了一段时间，我已经我我已经成成长了， 成长到足够可以处理日常事务，可是，可是我还是太年轻了。。。 查询资料 要做视频播放发现视频在播放的时候调用Android原生的视频播放器导致界面布局失效，网页无法继续糙操作。。。。 然后我找了好久 好久。。。网上各种解决方案， 。。。无效 到目前为止 之确定了只有x5内核会有此问题 此时已过去了半天的时间，翻遍了百度。google，没有办法，只有放大招了，查看官方文档 腾讯x5官方文档 https://x5..
转载--video标签在微信内置浏览器和QQ浏览器（手机端）的怪异现象
weixin_33804582的博客
03-04 919
用H5做了一个新闻信息展示的网页，video标签总是处于最顶层，调节z-index的值不起作用，对于flash也是一样的情况，flash已设置wmode属性。在PC端和手机端大部分浏览器（360、小米内置浏览器、ff、opera、uc等）都没有这个问题，唯独在微信内置浏览器和QQ浏览器上有问题。求大神解答~补充：播放完毕还有广告背景 尊驾...
video标签在uc和QQ浏览器的bug
xxyzjb的专栏
08-19 9757
效果：在页面创建一黑色遮罩，然后视频水平垂直居中播放 问题1：如果hard-code 把video标签和src写死在html里面的话，uc浏览器下视频会很小很小，对css里面设置的宽度100%不起效，解决办法：动态更改src值，或者动态设置video的宽度。 问题2：同事遇到的，如果video默认设置成display：none，在QQ浏览器里面，视频不会播放，解决办法：动态创建video，并且
uniapp打包的H5，在系统自带的浏览器上没问题，国内浏览器video组件会被拦截，操作按钮会有下载功能
lily19970107的博客
11-27 880
其实最后我并没有办法解决这个问题，网上查阅了很多资料，有说联系浏览器的，我们这个就是不出名的小软件，根本搭不上那条线，可能你在操作的时候发现百度浏览器好了，但是还有夸克浏览器等，最后经过项目组沟通，选择只允许在微信浏览器访问，这样问题就好解决多了～这里是我最后的处理，代码不是全的，重点是‘ 只在微信内置浏览器运行’这里的内容，意思是最好放到请求中去，这样能更好的规避没发现的各种神奇的浏览器～这个我之前想的是给他转一下形式，走个迂回路线，但是，不愧是大浏览器，防的死死的～
h5 qq浏览器视频被劫持
03-20
### QQ浏览器 H5 视频劫持问题解决方案 在处理QQ浏览器中H5视频被劫持的问题时，可以采取以下方法来解决问题： #### 方法一：禁用全屏模式 可以通过设置 `playsinline` 属性以及控制播放行为的方式防止视频进入全屏状态。具体实现如下： ```html <video playsinline controls> <source src="example.mp4" type="video/mp4"> </video> ``` 此属性会强制视频保持在页面内显示而不触发全屏模式[^1]。 #### 方法二：监听并调整层级关系 如果某些浏览器仍然强行提升视频层至最顶层，则可通过 JavaScript 实现动态监控和修复机制。例如，在检测到返回按钮不可点击的情况下重新排列 DOM 结构或者手动降低覆盖层的 z-index 值。 ```javascript document.addEventListener('play', function() { const videoElement = document.querySelector('video'); if (navigator.userAgent.indexOf('QQBrowser') !== -1 && !videoElement.classList.contains('fixed-zindex')) { videoElement.style.zIndex = 'auto'; // 调整z-index恢复原有布局顺序 videoElement.classList.add('fixed-zindex'); // 防止重复操作标记类名 } }); ``` #### 方法三：提供替代方案 对于确实存在兼容性障碍的情况（如特定版本的小米/UC等），考虑降级体验策略——即当探测到当前环境不适合正常渲染时切换成其他形式展现内容，比如嵌入第三方插件或跳转专用客户端应用完成观看过程[^3]。 以上三种方式能够有效应对因不同设备特性引发的一系列异常状况，从而保障用户体验一致性。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值