1. 视频基础概念

常见视频格式

  • MP4：最常用的格式，兼容性最好
  • WebM：高质量、压缩率好，适合网络传输
  • Ogg：开源格式，但兼容性不如MP4

HTML为何需要视频支持

以前网页中播放视频需要使用Flash插件，但HTML5的<video>标签可以直接在浏览器中播放视频，无需额外插件，更安全高效。

视频基础结构

一个基本的视频标签包括：

  • 视频文件源（src属性）
  • 播放控件（controls属性）
  • 备用内容（当浏览器不支持时显示）

2. <video>标签详解

这是HTML5新增的标签，用于在网页中嵌入视频内容。

基本写法

<video src=“movie.mp4” controls>
  <p>您的浏览器不支持HTML5视频，请下载<a href=“movie.mp4”>视频文件</a></p>
</video>

核心属性

  • src：视频文件路径
  • controls：显示播放控件（播放/暂停按钮等）
  • width/height：设置视频尺寸
  • autoplay：页面加载后自动播放
  • loop：播放结束后自动重播
  • muted：默认静音播放
  • poster：视频封面图片

3. 多格式支持方案

浏览器对各种视频格式的支持不同，为了确保所有用户都能观看，我们需要提供多个格式的视频源。

使用<source>标签

<video controls width=“600”>
  <source src=“movie.mp4” type=“video/mp4”>
  <source src=“movie.webm” type=“video/webm”>
  <source src=“movie.ogg” type=“video/ogg”>
  您的浏览器不支持HTML5视频
</video>

浏览器会从上到下尝试加载视频文件，直到找到它能支持的格式。

type属性说明

  • video/mp4：MP4视频
  • video/webm：WebM视频
  • video/ogg：Ogg视频

4. JavaScript控制视频

使用JavaScript可以自定义视频播放控制逻辑。

基本控制方法

  • play()：播放视频
  • pause()：暂停视频
  • load()：重新加载视频

实用属性

  • currentTime：获取/设置当前播放位置（秒）
  • duration：获取视频总时长（秒）
  • volume：音量（0.0到1.0）
  • paused：是否处于暂停状态
  • ended：是否播放结束

常用事件

  • play：视频开始播放时触发
  • pause：视频暂停时触发
  • ended：视频播放结束时触发
  • timeupdate：当前播放位置改变时触发