需用HTML5 video元素实现视频嵌入与交互：一、src属性指定单一视频地址；二、controls属性启用原生控制栏；三、source元素提供多格式备选源；四、width/height或CSS设置响应式尺寸；五、poster属性添加封面图。
如果您希望在网页中嵌入视频并使其具备播放、暂停、音量调节等基础交互功能，则需要正确使用 HTML5 的 <video> 元素及其属性。以下是实现视频源加载与控制栏显示的具体操作方式：
一、使用 src 属性指定视频地址
src 属性用于直接为 <video> 元素提供一个视频文件的 URL，浏览器将自动加载并准备播放该资源。此方式适用于单一视频源且格式兼容主流浏览器的情形。
1、在 HTML 文件中插入 <video> 标签，并在其开始标签内添加 src 属性。
2、将视频文件路径（本地相对路径或远程绝对 URL）作为 src 的值，例如 "movie.mp4" 或 "https://example.com/video.webm"。
立即学习“前端免费学习笔记（深入）”；
3、确保视频文件格式为 MP4（H.264 编码）、WebM（VP8/VP9）或 Ogg（Theora），以提升跨浏览器兼容性。
二、启用 controls 属性显示原生控制条
controls 属性是一个布尔属性，添加后浏览器会渲染默认的播放控件界面，包括播放/暂停按钮、进度条、音量滑块和全屏按钮等，用户可直接操作而无需额外编写 JavaScript。
1、在 <video> 标签中添加 controls 关键字，无需赋值，例如 <video controls>。
2、若需初始静音或自动播放，可额外添加 muted 或 autoplay 属性，但注意多数浏览器要求 autoplay 必须配合 muted 才能生效。
3、避免仅依赖 controls 属性实现全部交互需求，其样式不可自定义，且部分移动端浏览器可能隐藏部分控件。
三、通过 <source> 元素提供多格式备选源
当单一 src 无法覆盖所有浏览器对编码格式的支持差异时，可使用 <source> 子元素列出多个视频源，浏览器将按顺序尝试加载首个支持的格式，提高播放成功率。
1、移除 <video> 标签的 src 属性，改用内部嵌套的 <source> 元素。
2、为每个 <source> 添加 src 和 type 属性，type 值必须准确对应 MIME 类型，例如 type="video/mp4" 或 type="video/webm"。
3、在最后一个 <source> 后添加一段文本内容（如“您的浏览器不支持 video 标签”），作为所有源均失败时的降级提示。
四、设置宽高与响应式尺寸
显式声明 width 和 height 属性可防止页面布局因视频加载延迟而发生跳动，同时结合 CSS 可实现适配不同屏幕的响应式效果。
1、在 <video> 标签中添加 width 和 height 属性，数值单位为像素，例如 width="640" height="360"。
2、若需保持宽高比并随容器缩放，可移除 width 和 height 属性，改用 CSS 设置 max-width: 100%; height: auto;。
3、为适配移动设备，建议添加 poster 属性指定封面图，并确保视频本身采用 16:9 或 4:3 等常见宽高比编码。
五、添加 poster 封面图增强用户体验
poster 属性用于在视频未播放前显示一张静态图片，替代默认黑屏，有助于提升页面视觉完整性与加载感知。
1、在 <video> 标签中添加 poster 属性，值为封面图像的路径，例如 poster="cover.jpg"。
2、确保封面图分辨率与视频尺寸一致，推荐使用 JPEG 或 PNG 格式，文件体积尽量压缩至 100KB 以内 以加快加载。
3、若未设置 poster，部分浏览器会在加载初期显示空白区域或首帧画面，但行为不统一，存在兼容风险。
