HTML5通过<video>标签嵌入视频，支持src属性或<source>多格式兼容；本地视频需HTTP服务访问，网络视频须符合CORS和HTTPS要求；不支持时可添加备用文本提示。
如果您希望在网页中嵌入视频内容，HTML5 提供了原生的 <video> 标签来直接加载本地文件或远程视频资源。以下是实现该功能的具体方法：
一、使用 <video> 标签基础结构引入视频
HTML5 的 <video> 标签支持通过 src 属性指定视频路径，可指向本地相对路径或完整网络 URL。浏览器会自动加载并渲染支持格式的视频。
1、在 HTML 文件中插入 <video> 标签，并设置 width 和 height 属性以控制显示尺寸。
2、为 <video> 添加 src 属性，值为本地视频文件路径（如 ./videos/demo.mp4）或网络地址（如 https://example.com/video.mp4）。
立即学习“前端免费学习笔记（深入）”；
3、添加 controls 属性，使浏览器显示播放、暂停、音量等默认控件。
二、通过 <source> 元素提供多格式兼容方案
不同浏览器对视频编码格式的支持存在差异，仅依赖单一 src 可能导致部分设备无法播放。使用 <source> 子元素可按顺序尝试多个格式，提升兼容性。
1、在 <video> 标签内部移除 src 属性。
2、依次添加多个 <source> 标签，每个设置 src 和 type 属性，例如：type="video/mp4"、type="video/webm"、type="video/ogg"。
3、确保至少一个 <source> 指向浏览器支持的格式，否则视频区域将显示空白或错误提示。
三、嵌入本地视频文件的路径注意事项
本地视频需放在与 HTML 文件可访问的同一服务器上下文中；直接双击打开 HTML 文件时，部分浏览器（如 Chrome）会因安全策略拒绝加载 file:// 协议下的视频资源。
1、将视频文件置于项目目录下，例如 ./media/intro.mp4。
2、在 <video> 中使用相对路径引用：src="./media/intro.mp4"。
3、若本地测试失败，应启动本地 HTTP 服务（如 Python 的 python -m http.server），通过 http://localhost:8000 访问页面。
四、引用网络视频资源的限制与处理
从第三方网站直接引用视频可能受跨域策略（CORS）或服务端防盗链机制限制，导致视频无法加载或控制条灰显。
1、确认目标视频 URL 支持跨域访问，响应头中包含 Access-Control-Allow-Origin: * 或对应域名。
2、避免引用仅限特定平台播放的链接（如未公开的 YouTube 嵌入地址、腾讯视频加密 m3u8 地址）。
3、对于 HTTPS 页面，禁止混用 HTTP 视频源，否则现代浏览器将阻止加载并报 Mixed Content 错误。
五、添加备用内容与错误反馈
当浏览器不支持 <video> 标签或所有 <source> 均不可用时，标签内部的文本内容将作为降级显示内容。
1、在 <video> 开始标签后、结束标签前插入普通文本，例如：您的浏览器不支持视频播放，请升级或更换浏览器。
2、可在其中嵌入 <a> 链接指向视频下载页或替代播放页面。
3、不建议在此处放置其他 HTML 媒体标签（如 <object> 或 Flash 代码），因其已无实际兼容价值且违反语义化原则。
