应使用HTML5的<video>标签嵌入视频，通过src或<source>指定多格式兼容源，添加controls、poster、<track>等属性增强体验，并用CSS实现响应式控制。
如果您希望在HTML页面中显示视频内容，需要使用标准的视频嵌入标签，并正确配置其属性以确保兼容性和播放效果。以下是实现此目标的具体方法：
一、使用<video>标签嵌入本地视频文件
<video>标签是HTML5原生支持的视频容器元素，可直接加载本地或相对路径的视频资源，无需第三方插件。该方式依赖浏览器对视频编码格式的支持，需注意格式兼容性。
1、在HTML文档的主体部分插入<video>标签，设置width和height属性控制显示尺寸。
2、在<video>标签内部添加src属性，指向MP4、WebM或OGV格式的本地视频文件路径，例如：src="videos/demo.mp4"。
立即学习“前端免费学习笔记（深入）”；
3、添加controls属性，使浏览器显示播放、暂停、音量等默认控件。
4、可选添加autoplay属性实现自动播放，但现代浏览器通常禁止无用户交互的自动播放（尤其带声音）。
5、可选添加loop属性使视频循环播放，添加muted属性静音以提升autoplay成功率。
二、通过<source>元素指定多格式备用源
不同浏览器对视频编码格式的支持存在差异，仅提供单一格式可能导致部分用户无法播放。使用<source>子元素可在<video>标签内声明多个备选源，浏览器将按顺序尝试加载首个支持的格式。
1、保留<video>标签基本结构，移除src属性。
2、在<video>标签内部依次添加多个<source>元素，每个元素分别设置src和type属性。
3、第一个<source>推荐使用MP4格式并指定type="video/mp4"，因其兼容性最广。
4、第二个<source>可提供WebM格式并设置type="video/webm"，适用于Firefox和Chrome最新版本。
5、第三个<source>可提供OGV格式并设置type="video/ogg"，用于较老版本的Firefox或Opera。
6、在所有<source>之后添加一段文本内容，作为所有格式均不支持时的降级提示，例如：“您的浏览器不支持视频播放。”
三、嵌入外部平台视频（如YouTube、Bilibili）
对于托管在主流视频平台的内容，应使用平台提供的嵌入代码而非直接引用视频文件URL。这种方式规避了跨域限制、编码兼容性及版权问题，且能复用平台的播放器功能与CDN加速。
1、访问目标视频页面，查找“分享”或“嵌入”按钮，点击后复制iframe代码。
2、将复制的iframe代码粘贴至HTML文档中期望显示的位置。
3、检查iframe的src属性是否包含https协议，HTTP协议在现代HTTPS站点中将被浏览器阻止加载。
4、根据布局需要调整iframe的width和height属性值，或使用CSS控制响应式尺寸。
5、可添加allow属性以启用特定功能，例如allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"。
四、设置视频封面图与文字说明
视频加载前或未播放时，页面应呈现有意义的视觉提示，提升用户体验。poster属性用于指定封面图像，而<track>元素可用于添加字幕或章节信息。
1、在<video>标签中添加poster属性，值为封面图片的相对或绝对路径，例如：poster="images/thumbnail.jpg"。
2、确保封面图尺寸与video元素宽高一致，避免拉伸或留白。
3、在<video>标签内部添加<track>元素，设置kind="subtitles"、srclang="zh"、label="中文"及src指向WebVTT字幕文件。
4、为<track>元素添加default属性，使字幕默认启用；否则用户需手动开启。
5、WebVTT文件必须以UTF-8编码保存，且首行需为WEBVTT标识符。
五、通过CSS控制视频样式与响应式行为
原生<video>标签默认为行内块级元素，其尺寸与行为可通过CSS精细调控，尤其在移动设备上需适配不同屏幕宽度。
1、为video标签设置max-width: 100%和height: auto，防止超出父容器。
2、使用object-fit: cover确保视频内容填满容器且不畸变，替代传统的width/height固定值。
3、为video添加border-radius属性实现圆角效果，配合overflow: hidden裁切边缘。
4、利用@media查询定义断点，在小屏下将video宽度设为100%，高度设为auto，并居中对齐。
5、避免对video直接设置height: 100%而不指定父容器高度，否则可能渲染异常。
