插入视频

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

基本语法

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

常用属性

  • autoplay:页面加载后自动播放(通常需配合 muted 才能生效)
  • loop:循环播放
  • muted:静音播放
  • poster:设置视频封面图片
  • widthheight:设置视频尺寸

示例

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

多格式兼容(推荐方式)

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

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