readystate卡在0或1说明媒体未成功加载，主因是src路径404、mime类型错误、缺少range支持、cors拦截或ios未设playsinline；autoplay失效则因浏览器静默降级，需用户交互后调用play()并确保muted显式设置。
video/audio 元素的 readyState 为什么卡在 0 或 1
readyState 值为 0（HAVE_NOTHING）或 1（HAVE_METADATA）说明媒体资源根本没加载成功，不是播放逻辑问题，而是前置链路断了。常见原因有：
• src 路径 404 或返回非视频 MIME 类型（如 text/html），浏览器直接放弃解析
• 视频服务器未开启 HTTP Range 请求支持，导致大文件无法分片加载，loadedmetadata 永远不触发
• 跨域资源未配 Access-Control-Allow-Origin，请求被静默拦截（Network 面板里状态码是 0，Preview 为空）
• iOS WKWebView 中漏写 playsinline 和 webkit-playsinline，部分机型会拒绝初始化解码上下文，readyState 停在 0
autoplay 失效但控制台无报错的真因定位
没报错 ≠ 播放成功。Chrome/Firefox/Safari 对 autoplay 的处理是“静默降级”：有声时直接禁播，audio.paused 保持 true，play() 返回 pending Promise 但永不 resolve。排查要点：
• 检查 muted 是否显式存在（muted=""、muted="muted" 均可，volume="0" 无效）
• 在移动端，仅 muted 不够——iOS Safari 和微信 WebView 仍要求首次 play() 绑定在 click 或 touchstart 事件内
• 若用 JS 动态设置 muted，必须在 src 加载完成（loadedmetadata 后）再设，否则 Safari 可能忽略
• document.hasFocus() 为 false（如页面切到后台）时，已激活的 audio 也会被暂停，paused 变回 true
Network 面板里视频请求状态码是 0 怎么办
状态码 0 不代表网络断开，而是浏览器主动终止请求。最常见于：
• 混合内容（Mixed Content）：HTTPS 页面加载 HTTP 视频，Safari/iOS WebView 直接屏蔽，Network 面板显示 0 且无 Headers
• CORS 预检失败：视频域名未在响应头中返回 Access-Control-Allow-Origin，预检请求被拒，后续 GET 请求不发起
• WebView 硬件加速未启用（安卓）：某些旧版 WebView 会跳过渲染管线，请求发出去但不回调，表现为 0 + 黑屏
• 视频 URL 包含非法字符（如中文路径未 encode），部分 Android WebView 解析失败，请求不发出
canplay 事件触发但画面仍是黑屏
canplay 只表示“足够数据可开始播放”，不代表帧已解码或渲染就绪。黑屏常因：
• 安卓 WebView 默认关闭硬件加速，需在应用层配置 setLayerType(View.LAYER_TYPE_HARDWARE, null)（原生侧）或确保 Webview 初始化时启用
• 视频编码参数越界：HEVC(H.265) 在多数 Windows Chrome 中无软解能力，即使 canplay 触发，解码器返回空帧
• poster 图像遮挡：若 poster 存在且视频首帧加载慢，用户可能误判为黑屏；实际可监听 playing 事件确认是否真进入播放态
• Canvas 绘制时机错误：用 drawImage(video, ...) 时，video.readyState 或 <code>video.currentTime === 0 未就绪，画布输出空白
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
