Ionic TV应用HTML5视频播放器在Android 11.0 ARM设备卡停00:00

问题背景 #

开发的LAN托管视频Ionic TV应用，在全新Android 11.0 ARM架构电视上，绝大多数视频卡在00:00无法播放，仅约20%能正常运行。视频通过HandBrake采用H264编码，在Android/Google TV 11.0 x86模拟器、从Android 10升级到11的旧电视、iOS设备（通过另一Web应用）均能正常播放，排除编码本身问题。应用仅使用带监听事件的HTML5 video标签，代码如下：

<video *ngIf="show"
    #videoPlayer
    preload="metadata"
    crossorigin="anonymous"
    poster="./assets/images/poster.png"
    (loadedmetadata)="onMetadataLoad($event)"
    (timeupdate)="onTimeUpdate($event)"
    [src]="showSource" type="video/mp4">
</video>

排查与解决方向 #

• ARM硬件解码兼容性差异：x86模拟器依赖软件解码，而ARM电视用硬件解码，部分H264编码参数可能触发硬件解码器bug。用MediaInfo对比能播和不能播的视频，重点检查：
  • H264 Profile（Baseline/Main/High）与Level
  • 参考帧数量
  • 切片编码模式
    若发现差异，用HandBrake重新编码无法播放的视频，匹配能播放视频的参数。
• MP4容器元数据优化：ARM设备WebView对MP4的moov atom位置敏感，若moov在文件尾部可能导致加载卡顿。用ffmpeg命令将moov移到文件开头：

  ffmpeg -i 原视频.mp4 -movflags faststart 优化后视频.mp4
  

• WebView适配调整：全新ARM电视的WebView版本可能与模拟器/升级设备不同，尝试：
  • 更新Ionic到最新稳定版
  • 在Android原生配置中，设置WebView的setMediaPlaybackRequiresUserGesture(false)，并尝试切换硬件加速开关
  • 给video标签添加webkit-playsinline属性
• 预加载与播放触发调整：将preload="metadata"改为preload="auto"，或在loadedmetadata事件触发后手动调用videoPlayer.play()，同时验证LAN传输速度是否稳定。
• 跨域配置验证：暂时移除crossorigin="anonymous"属性测试，若能播放则检查LAN服务器的CORS响应头是否符合ARM设备WebView的要求。

内容的提问来源于stack exchange，提问作者SuicideKing