移动端H5【video】浏览器劫持视频播放

最新推荐文章于 2025-03-18 13:29:03 发布
最新推荐文章于 2025-03-18 13:29:03 发布
阅读量2.9k 收藏 10
点赞数 7
文章标签： 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75568521/article/details/136292795
版权

<video>: 视频嵌入元素 - HTML（超文本标记语言） | MDN<video>标签的属性

  • src ：视频的属性
  • poster：视频封面，没有播放时显示的图片
  • preload：预加载
  • autoplay：自动播放
  • loop：循环播放
  • controls：浏览器自带的控制条
  • width：视频宽度
  • height：视频高度

在H5页面开发中会使用视频，现在是使用videojs组件进行开发，但是在部分浏览器，如夸克，QQ浏览器中，视频会被浏览器劫持，不仅样式会有变化，且视频的层次会变得特别高。H5网页在手机上查看，出现的问题进行处理：

  1. 小米手机端自带浏览器打开网页，视频被劫持视频显示播放失败且页面空白。
  2. 苹果手机显示视频被劫持并全屏播放的问题和视频的层次会变高。下面是解决方法：

方法一：使用第三方播放器，一般插件做过封装以上两个问题都可以解决。下面推荐两个插件

插件下载 | MuiPlayer

最低0.47元/天 解锁文章
Vue3 - 详细实现安装西瓜视频 xgplayer 插件详细配置及使用教程，利用西瓜视频播放器播放 mp4、flv、hls 格式视频文件及视频推流（直播或监控摄像头画面），支持移动端H5及PC网站！
王二红
08-04 1万+
vue3，nuxt3，西瓜视频，xgplayer，插件组件，xgplayer-hls，xgplayer-flv，xgplayer-mp4，播放视频点播和直播视频流，监控实时播放推流，倍速播放，在线flv在线推流地址，HLS播放，vue3西瓜播放器，vue如何使用西瓜视频插件做直播推流回流，视频点播，flv在线视频流播放，截图功能，自定义播放器样式，截屏，监控视频，vue3使用西瓜播放器播放flv、hls、mp4视频，截屏按钮，直播流，报错，黑屏，加载失败，苹果ios不兼容，重连，怎么改样式，很卡，详细教程，
Vue2 - 详细实现安装西瓜视频 xgplayer 插件详细配置及使用教程，利用西瓜视频播放器播放 mp4、flv、hls 格式视频文件及视频推流（直播或监控摄像头画面），支持移动端H5及PC网站！
王二红
08-04 4633
vue2，nuxt2，西瓜视频，xgplayer，插件组件，xgplayer-hls，xgplayer-flv，xgplayer-mp4，播放视频点播和直播视频流，自定义播放器样式，截屏，监控视频，vue使用西瓜播放器播放flv、hls、mp4视频，截屏按钮，直播流，报错，黑屏，加载失败，苹果ios不兼容，重连，怎么改样式，很卡，详细教程，监控实时播放推流，倍速播放，在线flv在线推流地址，HLS播放，vue西瓜播放器，vue如何使用西瓜视频插件做直播推流回流，视频点播，flv在线视频流播放，截图功能，利用
QQ浏览器劫持html5的视频video标签的问题（怎么解决？）
热门推荐
阿酷tony
12-12 1万+
无解，暂无解决办法，哪位朋友知道告之一下，感激 QQ浏览器真的不讲一点规则，强制劫持视频video标签，这已经很 XX 了吧？还在视频结束时加载他们自己的广告，这... 就无语了。 相信开发html5视频播放器的朋友，都会遇到这个问题。 参见： 腾讯的移动浏览器劫持 &lt;Video&gt; 换成它自己的播放器还插广告： https://www.v2ex.com/t/411564 ...
web移动端、UC浏览器、夸克浏览器等、video视频无法被其他元素覆盖、浏览器劫持视频播放
KenThomas的博客
07-10 1100
移动端、UC浏览器、夸克浏览器等才不会出现video视频无法被其他元素覆盖、浏览器劫持视频播放的问题。video标签muted要默认为true。点击后设置muted为false。大多数web移动端也是这么处理的。muted为true默认静音。添加一个“取消静音”的按钮。
HTML5 Video标签详细教程
最新发布
wscfan的博客
03-18 1686
HTML5引入的video标签为网页提供了原生视频播放功能，无需依赖Flash等第三方插件。它使得在网页中嵌入和控制视频内容变得简单而强大。本教程将详细介绍video标签的使用方法、属性、事件以及相关技术。
解决uc浏览器劫持video标签问题
smile_y_y的博客
05-15 2081
解决uc视频悬浮播放 ，video标签被浏览器劫持 ，vide0适配
uniapp video组件H5模式在小米华为浏览器内被遮挡的一个处理方案
applebomb的专栏
09-27 587
今天测试发布的H5视频播放器页面时，突然有报告说播放后无法返回了。还原测试的步骤发现，出现问题的机型是QQ浏览器和小米浏览器。于是开始搜对应的解决方案。
video标签在h5中被劫持问题
weixin_52901235的博客
11-26 840
video标签在h5中被劫持问题 注：如果出现跨域问题需要在服务器上设置一下不让跨域。
移动端HTML5＜video＞ 浏览器劫持视频播放 视频激活播放后强制全屏 视频无法被其他元素覆盖
weixin_45461674的博客
11-21 8564
浏览器劫持视频播放、视频无法被其他元素覆盖 Html5 video 多媒体标签 <video id="loginVideo" muted autoplay loop :src="require('./assets/login.mp4')" ></video> 登录页加入视频作为背景，加入了video标签，设置定位，层级，谷歌浏览器调试完美展示，由于做的是H5网页，移至手机上查看（红米A8）。手机端
android webview 劫持,微信webview 及第三方浏览器劫持视频问题
weixin_32578161的博客
05-26 1119
视频问题(安卓浏览器，app)安卓手机，大部分浏览器，强制劫持video标签；引起一系列问题；视频播放时及播放后处于置顶状态，导致提示窗等元素被遮挡；视频展示样式发生变化，设置圆角失效；视频的控件无法管理，出现下载，分享等按钮；视频暂停或播放结束时，甚至出现广告浮窗；视频尺寸与展示不一致时，object-fill:fill,cover 不起作用；1 视频问题汇总图.png由于是banner上配置的...
H5的video 在安卓浏览器上层级问题
qq_23399717的博客
04-04 2448
H5的video 在安卓浏览器上层级问题
微信端视频播放防被浏览器劫持
milli236的博客
07-12 3898
微信浏览器的坑，包括移动的浏览器都有可能自动拦截。设置属性： &lt;video id="mainvideo" src="static/video/Mate10.mp4" autoplay width="100%" x5-playsinline="" webkit-playsinline="" preload="auto"&a
移动端video转canvas总结
CrazBarry的博客
05-10 3907
前言 公司一个客户要求我们参照http://game.flyh5.cn/resources/game/lq_game/2018_9_xmt_c/main.html?v=1557026481做一个病毒式H5供宣传，打开一看就是那些场景应用的H5，主要流程就是一开始有几张照片，点不同照片播放不同视频，播放完视频上传图片生成海报。 我看了看他们的源码是使用白鹭egret+eui做的，动画效果还是不...
解决浏览器不支持video问题
05-08
解决浏览器不支持video问题
QQ浏览器劫持video标签加载自己的广告（怎么解决？）
专注企业级视频应用，企业视频直播、MR虚拟直播、教育培训连麦直播
03-14 4773
QQ浏览器劫持video标签加载自己的广告（怎么解决？） QQ浏览器真的不讲一点规则，强制劫持视频video标签，这已经很 XX 了吧？还在视频结束时加载他们自己的广告，这... 就无语了。 相信开发html5视频播放器的朋友，都会遇到这个问题。 参见： 腾讯的移动浏览器劫持 &lt;Video&gt; 换成它自己的播放器还插广告：https://www.v2ex.com/t/411564...
微信端视频播放时防止被浏览器劫持的问题
阿酷tony
03-25 5539
微信端视频播放时防止被浏览器劫持的问题： 参见： 腾讯的移动浏览器劫持 <Video> 换成它自己的播放器还插广告： https://www.v2ex.com/t/411564 video标签在微信内置浏览器和QQ浏览器（手机端）的怪异现象？https://www.zhihu.com/question/27472010 --------------------- 代码： ...
浏览器各种奇葩劫持，怎么破？
mixley的专栏
01-18 3608
浏览器各种奇葩劫持，怎么破？    作为手残党，自有电脑来平均每个月都需要装一次系统，然后就遇到了各种用盗版系统（GHO）的悲催事件，其中比较抓狂的就是浏览器劫持。    话说GHO装机时被劫持是比较常见，还有其他的原因造成的也很多，一般的劫持呢，大部分人都是视若无睹的嘛，毕竟有的人觉得用360搜索也是用，用百度搜索也是用，用hao123，hao360都是用。但是作为手残党怎么能让一个小小的浏览器...
video 播放视频被x5内核浏览器劫持时的处理记录
我是渣渣
09-25 3630
因为业务关系，最近一直做微信相关的东西。一直被教育，过了一段时间，我已经我我已经成成长了， 成长到足够可以处理日常事务，可是，可是我还是太年轻了。。。 查询资料 要做视频播放发现视频在播放的时候调用Android原生的视频播放器导致界面布局失效，网页无法继续糙操作。。。。 然后我找了好久 好久。。。网上各种解决方案， 。。。无效 到目前为止 之确定了只有x5内核会有此问题 此时已过去了半天的时间，翻遍了百度。google，没有办法，只有放大招了，查看官方文档 腾讯x5官方文档 https://x5..
HTML5中video元素详解
liu_chenglong的博客
06-25 4784
属性说明controls显示标准的 HTML5 视频/音频播放器控制条、控制按钮。autoplay让文件自动播放。loop让文件循环播放。preload属性是用来缓存大体积文件的。它有三个可选值：“none” 不缓存、“auto” 缓存、“metadata” 只缓存文件元信息poster视频封面这个属性在 ios 10中设置有用，其他的目前还不起作用，让视频在小窗内播放，也就是不是全屏播放IOS微信浏览器支持小窗内播放启用H5播放器，是wechat安卓版特性。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值