HTML5视频在混合应用WebView中需正确配置硬件加速与video标签属性以避免卡顿。Android需在Manifest启用accelerated、禁用软件图层并考虑SurfaceView；video须设playsinline等属性；iOS需配置WKWebView允许内联播放、静音及禁用全屏，且video必须含playsinline、webkit-playsinline和muted。
HTML5视频在混合应用WebView中默认可能不启用硬件加速，导致播放卡顿、发热或耗电增加。关键在于正确配置WebView的渲染策略和视频标签属性，同时适配不同平台（Android/iOS）的限制。
Android WebView硬件加速开关
Android 4.0+ 默认开启硬件加速，但需确认应用级别和WebView实例级别均启用：
- 在 AndroidManifest.xml 中为对应 Activity 添加：
android:hardwareAccelerated="true"（全局默认为 true，但显式声明更稳妥） - 若使用自定义 WebView，确保未调用 setLayerType(LAYER_TYPE_SOFTWARE, null) 禁用图层
- 对于 Android 7.0+，可额外启用 SurfaceView 后端提升视频性能：
在创建 WebView 后调用 webView.setVideoSurfaceViewEnabled(true)（需 API 26+，部分厂商定制系统可能不支持）
WebView中video标签的关键属性设置
仅开启硬件加速不够，video 元素本身需配合特定属性触发 GPU 渲染路径：
- 必须添加 playsinline 属性（iOS WKWebView 强制要求，Android Chrome 内核也依赖它启用内联硬件解码）
- 建议添加 webkit-playsinline 和 x5-playsinline（兼容微信 X5 内核）
- 避免使用 controls 属性时叠加过多自定义 DOM 控件——复杂 overlay 可能触发软件合成，改用原生控件或精简 CSS 变换
- 设置 preload="auto" 并配合 autoplay（需用户手势触发后才真正生效）可提前建立 GPU 解码上下文
iOS WKWebView 的特殊处理
iOS 对 video 硬件加速控制更严格，且默认全屏播放。需针对性配置：
立即学习“前端免费学习笔记（深入）”；
- 务必在 WKWebViewConfiguration 中启用：
mediaTypesRequiringUserActionForPlayback = []（允许自动播放音频/视频） - 在 HTML 中 video 标签必须含：
playsinline webkit-playsinline muted（muted 是 iOS 自动播放前提） - 禁用 allowsInlineMediaPlayback = false（即设为 true），否则仍会跳转全屏
- 避免对 video 元素使用 transform: translateZ(0) 或 will-change——iOS 15+ 可能导致解码器降级到 CPU
调试与验证方法
是否真正启用硬件加速不能只看设置，需实测验证：
- Android：打开 Chrome DevTools → 远程调试 WebView → Rendering 面板勾选 “FPS meter”，播放时观察是否稳定 60fps；同时检查 “Layers” 面板中 video 是否为独立 GPU Layer
- iOS：Xcode → Debug → View Debugging → Rendering → 显示 “Color Composited Layers”，video 区域应呈绿色（GPU 合成），非红色（CPU 合成）
- 通用：监听 video.webkitDecodedFrameCount（iOS）或 video.getVideoPlaybackQuality()（Android Chrome），数值持续增长说明解码正常
