HTML5 标签通过 src 或 指定视频源，添加 controls 启用默认控件，autoplay 需配合 muted 才生效，preload 控制加载策略，支持多格式回退与尺寸设置。
如果您希望在网页中嵌入视频并控制其播放行为，HTML5 提供了原生的 标签，通过设置 src 属性指定视频地址，并添加 controls 属性启用浏览器默认控件。以下是具体实现方式：
一、基础语法：使用 src 属性指定视频源
src 属性用于直接定义视频文件的 URL 路径，支持本地路径或远程链接，浏览器将据此加载并准备播放媒体资源。
1、在 HTML 文件中插入 标签。
2、为 标签添加 src 属性，值为视频文件的完整路径或相对路径。
立即学习“前端免费学习笔记（深入）”；
3、确保视频格式为浏览器广泛支持的类型，如 MP4（H.264 编码）。
4、可选：添加 width 和 height 属性设定显示尺寸，避免页面布局抖动。
二、启用内置控制栏：添加 controls 属性
controls 是一个布尔属性，只要存在即生效，无需赋值；它会向用户暴露播放、暂停、音量、进度条等标准操作界面。
1、在 标签内直接写入 controls 关键字。
2、注意不要写作 controls="true" 或 controls="false"，该属性无值即启用，省略即禁用。
3、若需自定义 UI，则应移除 controls 并通过 JavaScript 操作 play()、pause() 等方法。
三、提供多格式回退：使用 source 元素替代 src
不同浏览器对视频编码格式的支持存在差异，单独依赖 src 可能导致部分用户无法播放；使用多个
1、移除 标签上的 src 属性。
2、在 标签内部依次添加多个
3、每个 src 和 type 属性，例如 type="video/mp4" 或 type="video/webm"。
4、在所有 标签时的降级提示，如 您的浏览器不支持视频播放。
四、设置自动播放与静音：autoplay 与 muted 的组合应用
现代浏览器普遍限制无交互前提下的自动播放，若需实现自动启动，必须同时启用 muted 属性，否则将被策略阻止。
1、在 标签中添加 autoplay 属性。
2、必须同步添加 muted 属性，且不可省略其存在。
3、可选：添加 loop 属性使视频循环播放，增强背景视频效果。
4、注意：仅当 muted 存在时，autoplay 才可能生效；单独使用 autoplay 将被大多数桌面及移动端浏览器忽略。
五、预加载策略：使用 preload 属性控制资源加载时机
preload 属性影响浏览器是否以及如何预先获取视频数据，适用于优化首帧呈现速度或节省带宽。
1、可选值包括 auto、metadata 和 none。
2、preload="auto" 表示建议浏览器下载整个视频，适合小体积或关键内容。
3、preload="metadata" 仅加载时长、尺寸、封面等元信息，是多数场景下的推荐值。
4、preload="none" 告知浏览器暂不加载，直到用户触发播放，适用于低带宽环境或非首屏视频。
