乐闻世界logo
5月29日 22:54

WebView 中视频播放有哪些坑？如何处理全屏和自动播放？

WebView 中视频播放有哪些坑？如何处理全屏和自动播放？

WebView 内嵌视频的核心问题集中在全屏切换、自动播放限制、硬件加速三方面。

自动播放：多数浏览器禁止带声音自动播放。Android 需设置 mediaPlaybackRequiresUserGesture = false（API 17+），iOS WKWebView 设置 mediaTypesRequiringUserActionForPlayback = []。静音视频自动播放限制更宽松。

全屏播放：HTML5 video 全屏时 Android 需实现 onShowCustomView / onHideCustomView 回调，将视频 SurfaceView 提升到原生层展示。iOS 的 video 默认支持内联全屏，playsinline 属性控制是否内联。

硬件加速：Android 必须在 Manifest 中开启 hardwareAccelerated，否则视频黑屏有声音无画面。

关键注意事项：

  • 同层渲染：视频层级高于 WebView，会遮挡其他 HTML 元素，需同层渲染方案（腾讯 X5 内核支持）
  • 内存释放：页面销毁前必须调用 video.pause() 释放解码器
  • Cookie 传递：视频 CDN 鉴权 Cookie 可能未同步到 MediaPlayer
  • 画中画：Android 8+ 支持 PiP，需在 onUserLeaveHint 中 enterPictureInPictureMode

追问

  1. 视频黑屏有声音怎么排查？ — 检查硬件加速是否开启，SurfaceView 层级是否被覆盖
  2. 如何实现视频内联播放？ — iOS 加 playsinline 属性，Android 设置 setMediaPlaybackRequiresUserGesture
  3. 同层渲染原理是什么？ — X5 内核将视频帧绘制到 WebView 纹理上，统一渲染层级
  4. 视频 Cookie 鉴权失败怎么办？ — 从 WebView CookieManager 读取，通过 Header 传给 MediaPlayer
标签：Webview