HTML的video标签引入YouTube链接和MP4文件均无法播放是什么原因？

核心问题 #

你当前的写法存在根本性使用错误：HTML原生<video>标签仅支持加载原始视频文件流资源（后缀为.mp4/.webm/.ogg等的直链资源），你填入的YouTube链接是普通网页观看地址，本身是HTML页面，不是可直接播放的视频文件，因此无法被识别加载。

分场景问题排查 #

YouTube视频嵌入错误 #

YouTube不开放直接的视频源直链抓取，你不能把普通观看链接直接填入<video>的src属性，正确的嵌入方式是使用YouTube官方提供的<iframe>嵌入方案，将原链接的watch?v=替换为embed/即可，示例代码如下：

<iframe width="400" src="https://www.youtube.com/embed/替换为你的视频ID" controls frameborder="0" allowfullscreen></iframe>

本地MP4文件无法加载的排查方向 #

如果你使用本地MP4文件也无法播放，按以下顺序排查：

• 检查文件路径是否正确：确认相对路径/绝对路径的大小写、文件夹层级和实际文件位置匹配
• 检查视频编码格式：<video>标签兼容的MP4必须为H.264编码视频+AAC编码音频，特殊编码的MP4文件会被浏览器拒绝播放
• 检查访问协议：不要直接双击HTML文件通过file://协议打开，该协议下浏览器会默认限制本地资源加载，建议使用本地静态服务（如VS Code的Live Server插件）启动项目访问
• 检查服务端MIME配置：如果是部署到服务器后无法播放，确认服务器返回的MP4文件Content-Type响应头为video/mp4，否则浏览器会无法识别资源类型

内容的提问来源于stack exchange，提问作者Zakaria Ayadi