x5-video-summary

发表于 | 分类于

android x5 内核 webview 同层播放踩坑

  • 最近在做混合APP的视频播放，是基于x5 内核的，踩了不少坑，特此记录下。

介绍

  • 微信、qq 等使用的都是x5内核 webview
  • 腾讯提供了对应的tbs sdk使用x5内核
  • tbs sdk提供了对x5 内核 webview的封装
    • tbs sdk并未内置x5内核，而是通过远程下发的形式下载的
    • 若下载失败，会启用android自带的webview
  • x5 内核会在首次加载webview时尝试下载
  • x5内核有自己的下发灰度规则
    • https://x5.tencent.com/docs/version_plan.html
  • 默认情况下，x5 内核只会在wifi下进行下载和更新
    • 非wifi场景需要设置QbSdk.setDownloadWithoutWifi(true)

##

同层播放

解释

  • 正常情况下，H5 video播放时拥有最高层级，无法在其上覆盖任何图层
  • 通过x5的同层播放，可以实现在video上覆盖其它图层
    • 例如：弹幕、自定义的控制层等

如何开启

  • H5video添加x5-video-player-type='h5-page'属性即可
    • 不要与x5-playsinline同时存在，可以与disablepictureinpicture、playsinline、webkit-playsinline、x-webkit-airplay="allow"等共存
      • 因为x5-playsinline是指定native播放，其优先级大于h5-page
  • 需要webview开启硬件加速
    • AndroidManifest.xml中添加android:hardwareAccelerated="true"

常见问题

视频有声音无画面

  • 检查是否开启硬件加速
  • 检查视频解码库是否下载成功
    • 检查网络情况
    • 检查是否存在网络黑/白名单机制
  • 视频编码是否有问题（部分非 aoc h.264 格式的 mp4 会存在此问题，转换为 aoc h.264 格式即可解决）

点击全屏卡死

  • 检查webview的standardFullScreen的值是否为true，并且没有实现WebChromeClient的onShowCustomView方法
  • 若使用同层播放，点击全屏后，则会进入native的全屏播放器，可能存在不需要的功能，例如分享；此部分无法自定义
    • 解决方法：
      • 可使用css模拟全屏（设置宽高100%）规避此问题
      • 特殊场景，可屏蔽全屏按钮
        • video::-webkit-media-controls-fullscreen-button { display: none; }

未播放时，快速点击视频左侧、右侧区域快进时，播放按钮图标会丢失

  • 开启同层播放，并在其之上添加透明蒙层，点击时隐藏蒙层并播放视频

如何查看当前webview使用的x5 内核版本

  • 原生可调用QbSdk.getTbsVersion获取内核版本号
  • H5则可进入webview，跳转http://soft.imtt.qq.com/browser/tes/feedback.html，页面显示的非000000数字即为内核版本
  • H5可检查navigator.userAgent字符串中TBS/后面的 6 位数字

如何调试、升级 X5 内核版本

  • 访问http://debugtbs.qq.com，进入x5内核调试页面
    • 检测是否安装x5 内核
    • 查看内核版本
    • 可在线升级x5 内核版本
    • 安装本地x5 内核
    • 开启内置vconsole

参考资料

  • 文档
    • https://x5.tencent.com/docs/access.html
  • 如何加载 X5 内核类
    • https://x5.tencent.com/tbs/technical.html#/list/sdk/916172a5-f14e-40ed-9915-eaf74e9acba8/%E5%8A%A0%E8%BD%BDX5%E5%86%85%E6%A0%B8%E7%B1%BB
  • 接入文档
    • https://x5.tencent.com/tbs/guide/sdkInit.html
  • SDK接入问题
    • https://x5.tencent.com/tbs/technical.html#/sdk

PS