外部MP4无法播放主因是服务器不支持HTTP Range请求或MP4编码不符合H.264+AAC标准；需检查响应头Accept-Ranges、状态码206、Content-Type及视频编码格式。
直接用 标签加 src 属性就能加载外部 MP4，但实际跑起来常遇到“黑屏”“报错 404”“点击播放没反应”——根本不是代码写错了，而是服务器配置、跨域策略或编码格式在卡你。
为什么
浏览器对视频资源有严格要求：必须支持 HTTP Range 请求（断点续传）、响应头要带 Accept-Ranges: bytes、不能被防盗链拦截、MP4 文件得是 H.264 + AAC 编码。很多静态托管服务（比如 GitHub Pages、某些 CDN）默认禁用 Range 请求，或者返回 Content-Range 错误，导致视频无法 seek 或直接加载失败。
- 用开发者工具 Network 面板看
video.mp4请求的响应状态码和响应头，重点检查206 Partial Content和Accept-Ranges - 如果返回
200 OK但没Accept-Ranges，多数浏览器会拒绝播放（尤其 Safari 和 Chrome 新版本） - 如果控制台报
DOMException: The element has no supported sources，八成是 MIME 类型不对或服务器拒了跨域请求
正确引用外部 MP4 的最小可行写法
光写 src 不够，必须显式声明 type、加上 controls，并处理跨域问题。否则 Firefox 会静默失败，Chrome 可能报 CORS 错误。
-
crosorigin="anonymous"是硬性要求：没有它，视频无法用 JS 读取帧（比如 canvas 捕获），部分浏览器也会拒绝加载 -
src在上更可靠，便于后续加 WebM 备选格式 - 服务器响应头必须包含
Access-Control-Allow-Origin: *（或指定域名），否则即使视频显示出来，JS 操作也会被拦
MP4 文件本身必须满足的硬性条件
不是所有 .mp4 都能直接播。用 FFmpeg 检查并转码是最稳妥的方式：
立即学习“前端免费学习笔记（深入）”；
ffprobe -v quiet -show_entries stream=codec_name,width,height,profile -of default video.mp4
输出里必须看到：codec_name=h264、profile=Main 或 High（Baseline 太老，部分安卓机不认）、width/height 为偶数。音频必须是 codec_name=ac3 或 aac。
- 常见翻车点：Premiere 导出选了 “HEVC (H.265)” —— 浏览器原生不支持，必须改成 H.264
- 用 HandBrake 转码时，预设选 “Fast 1080p30”，视频编码选 “H.264 (x264)”，音频选 “AAC (FAAC)”
- 不要依赖文件后缀名，.mp4 文件里塞 AV1 编码照样播不了
调试时最该盯住的三个地方
别猜，直接看这三项：
- Network 面板里视频请求的 **Status**：要是
200而非206，立刻换托管服务（Vercel、Cloudflare Pages、S3 + CloudFront 都默认支持 Range） - Response Headers 里的
Content-Type必须是video/mp4，不是application/octet-stream - Console 里有没有
MediaError对象？用video.addEventListener('error', e => console.log(e.target.error))拿到具体错误码（MediaError.MEDIA_ERR_NETWORK就是跨域或 Range 问题）
服务器不支持字节范围请求，再标准的 HTML 写法也白搭；MP4 编码不对，加再多属性也没用。这两处卡住，90% 的“外链视频不播放”问题就定位完了。
