菜鸟教程
教程 html tutorial

插入视频

HTML 使用 <video> 标签来在网页中插入和播放本地或网络视频，为用户提供更丰富的多媒体体验。

基本语法

html 
<video src="video.mp4" controls></video>
  • src：视频文件路径（可为本地或网络地址）
  • controls：显示播放控件（播放、暂停、音量等）

常用属性

  • autoplay：页面加载后自动播放（通常需配合 muted 才能生效）
  • loop：循环播放
  • muted：静音播放
  • poster：设置视频封面图片
  • width 和 height：设置视频尺寸

示例

html 
<video
  src="video.mp4"
  width="640"
  height="360"
  controls
  poster="thumbnail.jpg"
></video>

多格式兼容（推荐方式）

为了兼容不同浏览器，可以使用多个 <source> 标签：

html 
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  您的浏览器不支持视频播放。
</video>

视频格式支持

常见的视频格式及兼容性：

格式 类型 支持浏览器
MP4 video/mp4 全面支持
WebM video/webm Chrome、Firefox 等
Ogg video/ogg 部分浏览器支持

通过 <video> 标签嵌入视频，不仅提升网页的表现力，也让内容更加生动直观，广泛应用于课程演示、产品介绍、新闻播放等场景。

相关内容