如何在HTML中播放视频？适配.mp4、.mov格式的解决方案

<a>标签仅用于创建跳转链接，它只会触发视频文件的下载或调用系统外部播放器，无法在页面内直接播放视频。要在HTML页面中嵌入并播放视频，应该使用HTML5原生的<video>标签，它完美支持MP4和MOV格式，适配绝大多数现代浏览器。

基础使用示例 #

<video controls width="600">
  <!-- 优先加载兼容性更广的MP4格式 -->
  <source src="你的视频地址.mp4" type="video/mp4">
  <!-- 备选MOV格式 -->
  <source src="你的视频地址.mov" type="video/quicktime">
  <!-- 浏览器不支持HTML5视频时的降级提示 -->
  你的浏览器不支持HTML5视频播放，请更新浏览器后重试。
</video>

关键属性说明 #

• controls：强制显示播放控件（播放/暂停按钮、进度条、音量调节等），省略该属性则需自行编写控制逻辑。
• width：设置播放器宽度（高度会按视频比例自动适配，也可通过CSS精确控制尺寸）。
• <source>标签：可同时提供多种格式的视频文件，浏览器会自动选择第一个支持的格式加载，最大化兼容不同浏览器的格式支持差异。

常用可选属性 #

• muted + autoplay：页面加载后自动播放视频（现代浏览器要求视频静音才能触发自动播放，需搭配muted使用）。
• loop：设置视频循环播放。
• poster：指定视频加载完成前显示的封面图片，提升页面初始体验。

带可选属性的示例：

<video controls width="600" muted autoplay loop poster="视频封面图地址.jpg">
  <source src="你的视频地址.mp4" type="video/mp4">
  <source src="你的视频地址.mov" type="video/quicktime">
  你的浏览器不支持HTML5视频播放，请更新浏览器后重试。
</video>

格式兼容性说明 #

• MP4是Web端最通用的视频格式，几乎所有浏览器都支持。
• MOV格式（QuickTime）在Chrome、Firefox、Safari、Edge等现代浏览器中均可正常播放，但部分旧版浏览器可能存在兼容问题，因此同时提供MP4作为备选是更稳妥的方案。

内容的提问来源于stack exchange，提问作者Nhật Hòa Huỳnh