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"完全禁用预加载，由用户触发播放后才开始下载，节省初始带宽。
