17370845950

TV 浏览器实际支持哪些 HTML5 新标？

主流 TV 端浏览器（如 Tizen Browser、WebOS Browser、Android TV WebView、鸿蒙 ArkTS WebView）对 HTML5 的支持差异极大，但共性如下：

• MediaCapabilities：Tizen 5.5+ / WebOS 6.0+ 支持，用于预判解码能力，避免播放卡顿
• PictureInPictureWindow：仅 Android TV 11+ WebView 和部分 WebOS 版本支持，需显式调用 document.pictureInPictureElement?.requestPictureInPicture()
• mediaSession：Tizen、WebOS、Android TV 均支持基础字段（title、artist、play/pause action），但自定义 action 需检查 navigator.mediaSession.setActionHandler 是否返回 undefined
• remotePlayback：Tizen 6.0+ 支持 HTMLMediaElement.remote 属性，但必须配合 remote.play() 显式触发投屏，不能只靠 UI 按钮

为什么不能依赖猎豹做 TV 兼容测试？

猎豹浏览器最后一次更新是 2018 年，其 Chromium 内核版本停留在 55–57 区间，而 TV 关键 API 多在 Chromium 65+ 引入。常见表现包括：

• 调用 navigator.mediaSession 报错：TypeError: Cannot read property 'metadata' of undefined
• video.webkitEnterFullscreen() 无响应，但 video.requestFullscreen() 在 TV 上反而被禁用（需用 video.webkitSetPresentationMode('fullscreen')）
• MediaSource.isTypeSupported('video/mp4; codecs="avc1.640032"') 返回 false，实则设备硬件可硬解——因内核未同步 TV 端 codec 白名单

TV 端 HTML5 兼容性落地建议

不要写“兼容所有浏览器”的通用代码，而应按平台分发逻辑分支。推荐做法：

• 用 navigator.userAgent + navigator.platform 组合识别平台，例如：
  Tizen → 匹配 /Tizen\/(\d+\.\d+)/；
  WebOS → 匹配 /Web0S\/(\d+\.\d+)/；
  HarmonyOS → 匹配 /HarmonyOS\/(\d+\.\d+)/
• 对 mediaSession 做防御性初始化：

  if ('mediaSession' in navigator) {
    navigator.mediaSession.metadata = new MediaMetadata({ title: 'xxx' });
    if (typeof navigator.mediaSession.setActionHandler === 'function') {
      navigator.mediaSession.setActionHandler('play', () => video.play());
    }
  }

• 全屏控制统一走 video.webkitSetPresentationMode（Tizen/WebOS）或 video.requestFullscreen()（Android TV），并监听 webkitpresentationmodechanged 事件而非 fullscreenchange

最易被忽略的硬伤：TV 端无鼠标事件，但有遥控器焦点流

HTML5 新标本身不处理焦点管理，但 TV 必须依赖 tabindex + focus() + blur() + keydown 中的 ArrowUp/Down/Left/Right 或 Enter。很多团队只加了 mediaSession，却忘了给播放按钮设 tabindex="0"，导致遥控器无法聚焦——这比 API 缺失更致命。