HTML5视频怎么添加？video标签支持哪些格式？

HTML5视频通过<video>标签添加，该标签支持MP4（H.264编码）、WebM（VP8/VP9编码）和Ogg（Theora编码）三种主流格式。 以下是具体实现方法、格式兼容性及优化策略的详细说明：

使用<video>标签嵌入视频时，需通过<source>子标签提供多格式视频源，并配置基础属性。示例代码如下：

• 关键属性：

  controls：显示浏览器默认播放控件（播放/暂停、音量、全屏等）。

  width/height：定义播放器尺寸，单位为像素。

  poster：指定视频加载前或播放前显示的封面图路径。

  <source>标签的src和type：分别指定视频文件路径和MIME类型（如video/mp4）。

不同浏览器对视频格式和编码的兼容性存在差异，需提供多种格式以确保覆盖主流浏览器：

• MP4（H.264编码）：

  视频编码：H.264（AVC）。

  音频编码：AAC。

  兼容性：Safari、IE、Chrome、Firefox、Edge等主流浏览器均支持。

• WebM（VP8/VP9编码）：

  视频编码：VP8或VP9。

  音频编码：Vorbis或Opus。

  兼容性：Chrome、Firefox、Opera等基于Chromium或Gecko引擎的浏览器支持较好。

• Ogg（Theora编码）：

  视频编码：Theora。

  音频编码：Vorbis。

  兼容性：早期Firefox和Opera版本支持，现代浏览器已逐渐淘汰。

注意：即使文件后缀为.mp4，若内部编码非H.264（如AV1、MPEG-4 Visual），也可能导致播放失败。建议使用工具（如FFmpeg）检查或重新转码视频文件。

若视频在部分浏览器中无法播放，需从以下方面排查：

1. 格式与编码不兼容：

   未提供浏览器支持的格式（如仅提供MP4但浏览器仅支持WebM）。

   视频内部编码不符合标准（如MP4文件使用非H.264编码）。

2. MIME类型配置错误：

   <source>标签的type属性与视频实际类型不匹配（如误写为video/mpeg）。

   服务器未正确配置MIME类型响应头（如未将.mp4文件声明为video/mp4）。

3. 浏览器限制：

   自动播放策略：现代浏览器要求自动播放的视频必须静音（需配合muted属性）。

   跨域问题：视频文件与网页不同源且未配置CORS（跨域资源共享）。

除基础属性外，<video>标签还支持以下功能：

• 播放控制：

  autoplay：视频加载后自动播放（需配合muted以绕过浏览器限制）。

  loop：视频播放结束后自动循环。

  muted：默认静音播放。

  preload：控制预加载行为（none不加载、metadata仅加载元数据、auto预加载全部）。

• 移动端适配：

  playsinline：在iOS Safari中内联播放（避免强制全屏）。

• JavaScript API：

  通过DOM操作控制播放行为，例如：const video = document.getElementById('myVideo');video.play(); // 播放video.pause(); // 暂停video.volume = 0.5; // 设置音量video.currentTime = 30; // 跳转到30秒

为提升视频加载速度和流畅度，可采取以下措施：

1. 视频压缩与转码：

   使用工具（如HandBrake、FFmpeg）压缩视频，平衡质量与文件大小。

   针对不同设备输出多版本（如低码率移动端版、高码率桌面端版）。

2. 响应式设计：

   通过CSS限制视频最大宽度（如max-width: 100%），避免在小屏幕上溢出。

3. CDN加速：

   使用CDN分发视频文件，减少用户与服务器之间的物理距离，降低延迟。

4. 懒加载：

   对非首屏视频实施懒加载，仅在用户滚动至视口时加载资源。

5. 封面图优化：

   提供低分辨率的poster图片，快速填充视频区域，避免空白等待。

通过合理配置格式、属性及优化策略，可确保HTML5视频在各类设备和浏览器中实现兼容播放与流畅体验。