HTML5 video 标签无法播放视频可能因路径错误、格式不支持或缺少必要属性；需正确使用绝对路径、相对路径、网络 URL，配合 source 元素多格式适配及 preload 属性优化加载。
如果您在 HTML5 中使用 video 标签引入视频但无法正常播放，则可能是由于视频路径错误、格式不支持或缺少必要属性。以下是实现本地与网络视频引入的具体方法：
一、使用绝对路径引入本地视频文件
通过 video 标签的 src 属性指定本地视频的绝对路径，适用于 开发环境 或本地测试，需确保路径正确且视频格式被 浏览器 支持。
1、将 MP4 格式视频文件（如 video.mp4）放置在项目根目录或指定子目录下。
2、在 HTML 文件中插入 video 标签，并在 src 属性中填写从网站根目录开始的完整相对路径，例如：src=”videos/video.mp4″。
立即学习 “ 前端免费学习笔记（深入）”；
3、为保障兼容性，建议同时添加 controls 属性以显示播放控件，例如：controls。
二、使用相对路径引入本地视频文件
相对路径基于当前 HTML 文件所在位置计算，适合项目结构清晰、资源集中管理的场景，避免因部署路径变动导致失效。
1、确认 HTML 文件与视频文件的层级关系，例如视频位于同级目录下的 media 文件夹中。
2、在 src 属性中使用相对路径，如：src=”./media/demo.webm”。
3、为提升跨浏览器兼容性，可配合 source 元素提供多种格式备选，例如 MP4、WebM 和 OGG。
三、引入网络视频（HTTP/HTTPS 远程地址）
直接引用托管在 CDN 或公开服务器上的视频 URL，要求目标服务器允许 跨域 访问（CORS），否则可能触发媒体加载失败。
1、获取视频的完整可访问 URL，例如：https://example.com/videos/intro.mp4。
2、将该 URL 填入 video 标签的 src 属性，如：src=”https://example.com/videos/intro.mp4″。
3、若视频托管平台启用 CORS 限制，需确保响应头包含：Access-Control-Allow-Origin: *，否则 JavaScript 操作（如 drawImage）可能被阻止。
四、通过多个 source 元素适配不同格式与浏览器
单一 src 可能因浏览器对 编码 格式支持差异而无法播放，使用多个 source 元素可让浏览器自动选择首个可解析的格式。
1、在 video 标签内部按优先级顺序依次添加 source 标签。
2、每个 source 标签分别指定不同格式的视频路径，例如：src=”movie.mp4″ type=”video/mp4″。
3、后续 source 可提供：src=”movie.webm” type=”video/webm” 和 src=”movie.ogv” type=”video/ogg”。
五、设置 preload 属性优化加载行为
preload 属性控制视频资源的预加载策略，影响页面首次加载时的性能表现与用户体验，尤其在移动设备或弱网环境下尤为关键。
1、设置 preload=”auto” 让浏览器自主决定是否预加载全部内容。
2、设置 preload=”metadata” 仅加载视频元信息（时长、尺寸、封面帧），适用于需快速展示控制栏但暂不播放的场景。
3、设置 preload=”none” 完全禁用预加载，由用户触发播放后才开始下载，节省初始带宽。
