HTML5基础教程（九）Video(视频)：HTML5 Video标签，从“石器时代”到“流媒体帝国”的逆袭！-优快云博客

还在怀念Flash？HTML5 Video早已悄无声息地接管了整个视频江湖！本文将带你深入探索这个看似简单却威力无穷的标签，解锁那些你不知道的黑科技玩法。

一、前言：告别Flash，迎接Video新时代

还记得那个需要频繁更新插件、耗电如流水的Flash时代吗？那时在网页上看视频就像在进行一场未知的冒险——不知道何时会卡顿，何时会崩溃。

HTML5 Video的出现彻底改变了这一切。

作为HTML5标准中最受欢迎的功能之一，Video标签让视频播放变得简单而高效。无需插件，原生支持，直接融入网页内容中。但它的能力远不止于此——从基本的播放控制到高级的帧操作，HTML5 Video标签几乎能满足你对网页视频的一切想象。

二、HTML5 Video基础：不只是`<video src="...">`那么简单

2.1 基本语法与属性

一个最简单的Video标签示例：

<video src="movie.mp4" controls>
  您的浏览器不支持HTML5视频标签
</video>

就这么简单！但别被它的简洁欺骗了，Video标签支持多达30多种属性，让我们看看一些最常用的：

<video src="movie.mp4"
       controls
       autoplay
       muted
       loop
       width="640"
       height="360"
       poster="preview.jpg">
  您的浏览器不支持HTML5视频标签
</video>

controls：添加播放控件（播放/暂停、音量、全屏等）
autoplay：自动播放（注意：现代浏览器通常要求同时设置muted）
muted：静音播放
loop：循环播放
poster：视频加载前显示的预览图像

2.2 多格式支持：解决浏览器兼容性难题

不同浏览器对视频格式的支持各不相同，为此我们需要提供多种格式：

<video controls width="640">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持HTML5视频标签
</video>

浏览器会按照顺序选择第一个支持的