autoplay 必须与 muted 配合才生效，controls 控制原生控件显示，muted 影响初始音量，preload 仅为提示，loop 在 iOS 全屏下需 playsinline 才有效。
video 标签哪些属性真正影响播放行为
浏览器是否自动播放、能否控制、是否静音，全由几个关键布尔属性决定，不是所有文档里列的属性都实际起效。
最常被误用的是 autoplay：现代浏览器（Chrome 66+、Safari 11+）强制要求它必须配合 muted 才能生效，否则会被静音拦截甚至完全阻止。单独写 autoplay 在多数桌面/移动环境里等于没写。
-
controls：显示原生控件；设为false后，play()、pause()等 JS 方法仍可用，但用户无法直接操作 -
muted和autoplay是强绑定对，缺一不可；muted还会影响volume的初始值（设为 0） -
preload只是提示，不是指令："none"表示不预加载，"metadata"仅拉取时长/尺寸等信息，"auto"由浏览器决定——移动端 Safari 默认忽略"auto"，只按需加载 -
loop在 iOS 上有兼容问题：若视频未设置playsinline，全屏播放时 loop 不生效
如何用 JS 监听并接管播放状态变化
原生 video 元素暴露的事件比想象中更细，但部分事件触发条件容易被忽略，比如 canplay 并不代表能流畅播放，只是“已有足够数据解码首帧”。
真正适合做 UI 同步的状态点是 playing（开始播放）、pause（用户暂停）、ended（播完），而 timeupdate 虽然高频，但默认每 250ms 触发一次，不适合做毫秒级进度条拖拽反馈。
立即学习“前端免费学习笔记（深入）”；
- 监听
loadeddata比canplay更稳妥——它表示第一帧图像已就绪，此时调用play()不会因解码未完成而失败 -
waiting和playing配合可识别卡顿：进入waiting后 500ms 未恢复playing，大概率是缓冲不足 - 移动端需监听
webkitbeginfullscreen/webkitendfullscreen（Safari）或fullscreenchange（标准），否则全屏切换时自定义控件位置错乱
自定义控件 DOM 结构与样式隔离要点
自定义播放器不是把原生控件藏掉再画一套 UI 就完事，核心难点在于事件穿透、焦点管理、以及移动端 touch/mouse 混合事件处理。
最易踩的坑是直接给 video 设置 pointer-events: none ——这会让所有 JS 事件监听失效（包括 timeupdate），正确做法是用一个绝对定位的透明遮罩层盖住 video，再把自定义按钮放在遮罩之上。
- 进度条拖拽必须同时支持
mousedown+mousemove（PC）和touchstart+touchmove（移动），且要preventDefault()防止页面滚动 - 音量滑块在 iOS 上无法用
input[type="range"]原生控件——Safari 会禁用其交互，得用div+transform: scaleX()模拟 - 全屏按钮触发
requestFullscreen()前，先检查document.fullscreenEnabled，iOS 需额外加webkitEnterFullscreen()兼容
video 元素的隐藏陷阱：跨域、CORS 与 MSE
当视频源是跨域 URL（如 CDN 地址）且需要 JS 读取帧数据（截图、WebGL 渲染）、或调用 getVideoPlaybackQuality() 时，crossorigin 属性不是可选项，而是硬性前提。
设为 crossorigin="anonymous" 后，服务端响应头必须包含 Access-Control-Allow-Origin，否则 video 会静默失败——既不报错，也不触发 error 事件，只卡在 networkState === 0（NETWORK_EMPTY）。
- 使用 MediaSource Extensions（MSE）动态拼接视频片段时，
video.src必须为空字符串，再通过video.src = URL.createObjectURL(mediaSource)赋值，直接赋值 blob URL 会导致 iOS Safari 崩溃 - HLS 或 DASH 流媒体不能直接丢给
video.src，必须用hls.js或dash.js解析后喂给 MSE，否则 Chrome 会报DOMException: The element has no supported sources - 某些安卓 WebView（如微信内置）对
playsinline支持不稳定，即使写了也可能强制全屏，需配合x5-video-player-type="h5-page"等私有属性
