解决uc浏览器劫持video标签问题

video标签兼容浏览器

uc浏览器 夸克浏览器 。。。。
视频中会已悬浮模式播放 —> 学名叫做浏览器劫持视频
!!!!!!6天整整6天 摸索出来了 废话不多说 上代码

 <video
    id={`js-video-play-${videoIndex}`}
    data-video-id={videoIndex}
    className="my-video"
    preload="true"
    autoPlay={autoPlay}
    playsInline="isiPhoneShowPlaysinline"
    x5-video-player-type="h5-page"
    t7-video-player-type="inline"
    webkit-playsinline="isiPhoneShowPlaysinline"
    loop={autoPlay}
    muted={true}
  >
this.player = videojs(
  document.
### 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]。 以上三种方式能够有效应对因不同设备特性引发的一系列异常状况,从而保障用户体验一致性。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值