video标签跨域读取帧数据必须设置crossorigin="anonymous"且服务端返回Access-Control-Allow-Origin响应头，否则Canvas会被污染导致getImageData()等操作报错。
HTML文档结构本身不决定多媒体能否正常工作，但错配的结构或缺失的关键属性会直接导致video、audio标签静默失败、跨域报错或回退失效——问题往往不出在媒体文件本身，而在<head>声明、<body>嵌套逻辑或资源加载时序上。
为什么video标签放对位置却 still 不播放？
常见现象是视频控件显示正常，点击播放无反应，控制台无报错。根本原因常是：video元素被包裹在未闭合的<div>或<p>中，触发浏览器自动纠错（如把<video>移出<p>），导致DOM引用丢失；或controls属性存在但src为空且未用<source>补全。
- 确保
video直接位于<body>或语义明确的块级容器内（如<section>），避免嵌套在<p>、<span>等内联上下文中 - 若用
<source>，必须省略src属性，否则浏览器忽略<source>列表 - 添加
preload="metadata"可避免首次加载时黑屏等待，尤其对大视频有效
crossorigin="anonymous"到底该加在哪？
当用JavaScript读取video帧数据（例如Canvas绘图）、或调用video.captureStream()时，若视频来自跨域CDN，不加此属性会触发SecurityError: The canvas has been tainted by cross-origin data。它不是加在<script>上，而是必须加在<video>标签本身。
- 仅当JS需访问像素/流数据时才必需；纯播放可不加
- 值只能是
"anonymous"（推荐）或"use-credentials"；写成crossorigin（无值）会被浏览器当作"anonymous"，但显式写出更可靠 - 对应CDN服务端需返回
Access-Control-Allow-Origin: *响应头，否则仍失败
<track>字幕不显示？检查三个硬性条件
即使<track kind="subtitles">已写入，字幕也常不出现。这不是样式问题，而是浏览器强制校验的运行时约束：
立即学习“前端免费学习笔记（深入）”；
-
video必须有src或至少一个<source>，且已成功加载元数据（readyState >= 1） -
<track>必须在video开始播放前插入DOM；动态appendChild后需手动调用video.textTracks[0].mode = "showing" - VTT文件必须以
text/vttMIME类型返回，且首行必须是WEBVTT（大小写敏感），否则整个轨道被忽略
用<picture>还是<video>做背景？性能差异在哪
两者都能“当背景用”，但渲染机制完全不同：<video>是真实媒体元素，持续解码+GPU纹理上传；<picture>只是静态图像切换。实际项目中容易忽略的是内存与功耗代价：
- 循环播放的
video背景会持续占用GPU内存，iOS Safari可能在后台标签页强制暂停，导致视觉中断 -
<picture>配合srcset和sizes可实现零解码开销的响应式切换，但无法做时间轴控制 - 若需淡入/缩放动画，
video需额外用requestVideoFrameCallback同步帧率，而<picture>直接走CSS动画更稳定
真正卡住人的从来不是“怎么写标签”，而是浏览器如何根据结构规则解析它们——比如<source>的顺序影响格式 fallback，crossorigin缺失导致 Canvas 读取失败，或者<track>因 MIME 类型不对被静默丢弃。这些点不跑一遍真环境，光看文档很难意识到。
