夸克浏览器html5全屏异常_修复夸克全屏html5法【整屏】

夸克浏览器video全屏按钮无响应是因禁用HTML5全屏API，需添加webkit-playsinline和x5-video-player-type="h5-page"属性，并配合x5-video-player-fullscreen="true"，且requestFullscreen()必须由原生click事件同步调用。

夸克浏览器 video 全屏按钮点击无反应

夸克（Quark）浏览器基于 Chromium 内核，但默认禁用部分 HTML5 全屏 API 权限，video 元素点击原生全屏按钮（右下角小方块）常无响应，控制台也无报错——本质是夸克主动拦截了 requestFullscreen() 调用，且不触发 fullscreenchange 事件。

• 必须显式添加 webkit-playsinline 和 x5-video-player-type="h5-page" 属性，否则 iOS/Android 夸克均倾向调起系统播放器而非 H5 全屏
• controls 属性不可省略，否则夸克会隐藏全部 UI，包括全屏按钮
• 避免在 autoplay 未静音时触发全屏，夸克对自动播放策略比 Chrome 更严格

夸克中调用 requestFullscreen() 报错：NotAllowedError

直接执行 videoElement.requestFullscreen() 在夸克里大概率抛出 NotAllowedError: Permission denied，不是权限没申请，而是夸克要求「用户手势上下文」必须严格绑定到原生 click 或 touchend，且不能跨层委托或延迟执行。

• 必须用原生 addEventListener('click', ...) 绑定，jQuery 的 .on('click', ...) 或 Vue 的 @click 在某些版本夸克中失效
• 回调内不能有 setTimeout、Promise.then 等异步跳转，哪怕只延迟 0ms 也会断开手势链
• 推荐写法：

  document.getElementById('fullBtn').addEventListener('click', () => {
    document.querySelector('video').requestFullscreen().catch(e => console.error(e));
  });

夸克 x5-video-player-type 配置项取值差异

夸克使用腾讯 X5 内核扩展属性，x5-video-player-type 是关键开关，不同值决定视频容器行为：

微信 WeLM

WeLM不是一个直接的对话机器人，而是一个补全用户输入信息的生成模型。

下载

• "h5"：启用 X5 自定义 H5 播放器，支持旋转、弹幕，但全屏后可能仍非整屏（顶部状态栏残留）
• "h5-page"：强制整屏 H5 模式，全屏时覆盖整个视口，推荐用于直播/点播页
• "native"：交由系统播放器处理，失去所有 H5 控制权，全屏按钮消失
• 必须配合 x5-video-player-fullscreen="true" 才能生效，单独设 type 不足

整屏适配后页面滚动/缩放异常

启用 x5-video-player-type="h5-page" 后，夸克会强制锁定 viewport 缩放、禁用双指缩放，但若页面本身有 meta[name="viewport"] 冲突（如含 user-scalable=yes），会导致全屏退出后页面卡死或无法滚动。

立即学习“前端免费学习笔记（深入）”；

• 全屏前建议临时重写 viewport：

  const vp = document.querySelector('meta[name="viewport"]');
  if (vp) vp.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');

• 监听 fullscreenchange 事件恢复 viewport（注意夸克该事件触发时机晚于实际退出，建议加 100ms 延迟）
• 避免在全屏状态下操作 body.style.overflow，夸克对 body 滚动锁有独立逻辑，易引发白屏