HTML5原生<video>标签可跨设备播放视频，需设置width/height、controls属性，嵌套多个<source>提供MP4/WebM/Ogg格式，添加muted+autoplay实现静音自动播放，并通过CSS和JavaScript实现响应式与自定义控制。
如果您希望在网页中嵌入并播放视频，HTML5 提供了原生的 <video> 标签，无需依赖第三方插件即可实现跨设备兼容的视频展示。以下是实现 HTML5 视频显示的具体步骤与嵌入技巧：
一、基础视频标签结构
HTML5 的 <video> 元素是显示视频的核心容器，它支持多种属性控制播放行为，并可嵌套多个 <source> 标签以提供不同格式的备用资源，确保浏览器兼容性。
1、在 HTML 文件中定位到需要插入视频的位置。
2、输入 <video> 开始标签，设置 width 和 height 属性以定义显示尺寸，例如 width="640" height="360"。
立即学习“前端免费学习笔记（深入）”；
3、添加 controls 属性，使浏览器自动渲染播放、暂停、音量等控件。
4、在 <video> 标签内部嵌套 <source> 标签，分别指定 src 属性为 MP4、WebM 和 Ogg 格式文件路径，并通过 type 属性声明 MIME 类型。
5、在 <video> 标签闭合前添加一段文本内容，作为不支持 <video> 标签的浏览器（如旧版 IE）的降级提示，例如“您的浏览器不支持视频播放”。
二、指定多格式源文件提升兼容性
不同浏览器对视频编码格式的支持存在差异，仅提供单一格式可能导致部分用户无法播放。通过 <source> 元素按优先级顺序声明多个格式，浏览器将自动选择首个支持的资源加载。
1、准备三种格式的同一视频：MP4（H.264 编码）、WebM（VP8/VP9 编码）、Ogg（Theora 编码）。
2、将 MP4 文件置于第一个 <source> 标签中，因其被 Chrome、Safari、Edge 和 Firefox 广泛支持。
3、第二个 <source> 标签指向 WebM 文件，适用于 Firefox、Chrome 和 Opera。
4、第三个 <source> 标签指向 Ogg 文件，主要作为 Firefox 早期版本的后备选项。
5、确保每个 <source> 标签都包含 type 属性，例如 type="video/mp4"、type="video/webm"、type="video/ogg"。
三、启用自动播放与静音策略
现代浏览器普遍限制无用户交互触发的音频自动播放，但允许静音状态下的自动播放。添加 muted 属性可绕过该限制，使视频在页面加载后立即开始播放。
1、在 <video> 标签中添加 autoplay 属性，指示浏览器尝试自动启动播放。
2、必须同时添加 muted 属性，否则 Chrome、Firefox 等主流浏览器将阻止 autoplay 行为。
3、可选添加 loop 属性，使视频循环播放，适用于背景视频或宣传轮播场景。
4、避免单独使用 autoplay 而不加 muted，否则 视频将静默失败且不显示任何错误提示。
四、自定义播放器外观与交互
默认控件样式受限于浏览器，若需统一视觉风格或扩展功能，可通过 JavaScript 操作 <video> 元素的 API 并配合 CSS 隐藏原生控件，构建自定义 UI。
1、在 <video> 标签中移除 controls 属性，防止原生控件覆盖自定义界面。
2、使用 CSS 设置 video 元素为 display: block，并添加自定义按钮容器（如 div）紧邻 video 元素。
3、为播放按钮绑定 click 事件监听器，调用 video.play() 方法启动播放。
4、为暂停按钮绑定 click 事件监听器，调用 video.pause() 方法中断播放。
5、通过 video.currentTime 属性读取和设置当前播放时间，实现进度条拖拽功能。
五、响应式视频嵌入适配移动端
移动设备屏幕尺寸多样，固定宽高会导致视频溢出或留白。采用响应式设计可确保视频在任意视口下保持比例并完整显示。
1、移除 <video> 标签中的 width 和 height 属性，改用 CSS 控制尺寸。
2、为 video 元素设置 max-width: 100% 和 height: auto，使其宽度不超过父容器且维持原始宽高比。
3、包裹 video 元素的父容器应用 aspect-ratio: 16 / 9（或 4 / 3），确保容器自身具备固有比例。
4、添加 @media 查询，在小屏幕下进一步调整 padding 或 margin，避免控件重叠或截断。
5、测试时需确认 全屏按钮在 iOS Safari 中仍可正常唤起原生全屏界面，因部分自定义实现会禁用该功能。
