Android WebView需调用setMediaPlaybackRequiresUserGesture(false)并确保在loadUrl前设置,配合静音、内联、H.264+AAC编码及preload="metadata",且服务端须支持CORS与Accept-Ranges。

WebView必须显式关闭手势播放限制
Android WebView默认禁止自动播放,哪怕HTML里写了autoplay也无效——这不是bug,是系统级策略。关键在于:从Android 4.4(API 19)起,得用setMediaPlaybackRequiresUserGesture(false)主动关掉它。
- 必须在
WebSettings上设置,且要在loadUrl()之前调用,否则无效 - Android 5.0+ 仅设这一项就足够;4.4需配合
onPageFinished中再确认一次(部分ROM有延迟生效问题) - 别漏掉
setJavaScriptEnabled(true),否则后续JS控制播放会静默失败
HTML video标签要同时满足“静音+内联+格式兼容”
iOS和Android对autoplay的容忍度极低,只靠属性不够,必须三者齐备:静音、内联播放、H.264+AAC编码的MP4。
-
muted和autoplay缺一不可,哪怕你根本没加音频轨道,浏览器也按“可能有声”处理 -
playsinline和webkit-playsinline都要写,否则iOS Safari强制全屏,安卓部分厂商浏览器(如华为、小米)也会拦截 - 别用
preload="auto",移动端反而易触发预加载失败;改用preload="metadata"更稳妥
JS触发play()必须捕获并处理Promise拒绝
现代Android Chrome、新版WebView甚至部分国产浏览器,要求play()必须由用户手势触发,否则返回DOMException: play() failed because the user didn't interact with the document first。
KesionCMS是漳州科兴信息技术有限公司开发的一套万能建站产品,是CMS行业最流行的网站建设解决方案之一。最新版X1.0把主系统及一些辅助系统模块化开发,前后台UI采用HTML5全新架构,方便随时删除(隐藏)安装所需要的模块。应广大用户群体建议,此次版本改动所有涉及编辑器和视频播放的模块,全部采用百度编辑器(ueditor)及ckplayer视频播放器,改进后的视频(flv,mp4等格式视频)
- 不能直接写
video.play(),必须用.catch(e => console.warn("play blocked:", e))兜底 - 推荐监听
canplay或loadeddata事件再调用,比DOMContentLoaded更可靠 - 若页面有遮罩层或首屏无交互区域,可绑定
touchstart到document.body,只触发一次后移除监听
视频资源本身容易被跨域和Range请求卡住
即使HTML和JS都写对了,视频仍黑屏或报net::ERR_CONNECTION_RESET,大概率是服务端配置问题。
立即学习“前端免费学习笔记(深入)”;
- 确保响应头含
Access-Control-Allow-Origin: *(或具体域名),否则fetch或video.src跨域会静默失败 - 用
curl -I [video-url]检查是否返回Accept-Ranges: bytes,缺失则无法拖动、缓冲卡顿,某些安卓WebView直接拒播 - 避免302跳转后的视频URL,跳转过程可能丢失CORS头,尤其CDN回源场景
Accept-Ranges支持和WebView初始化时机——这两处不验证,其他全写对也没用。









