（抖开爆米花包装袋）同学们，上节课我们给网页装上了随身听，现在要给浏览器开个电影院啦！准备好用代码投喂爆米花了吗？

8.2 视频(video)

8.2.1 会动的魔术贴

还记得以前网页放视频要装Flash吗？就像在网页里装了个DVD机。现在用<video>标签，就像给浏览器安了个投影仪：

<video src="videos/cat.mp4" controls width="600"></video>

（试试换成你家主子的视频，立刻拥有云吸猫网站！）

8.2.2 放映机功能大全

视频标签的魔法属性比电影院遥控器还丰富：

<video controls 
       autoplay 
       muted 
       loop
       poster="popcorn.jpg" 
       preload="metadata"
       width="800"
       height="450"
       playsinline
       controlsList="nodownload">
  <source src="movie.mp4" type="video/mp4">
</video>

（autoplay的正确打开方式：必须配合muted，就像先捂住观众的嘴再开始表演）

8.2.3 格式江湖风云录

浏览器对视频格式的支持就像电影院排片表：

多格式备案方案（像买连排电影票）：

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track label="中文字幕" kind="subtitles" srclang="zh" src="subs.vtt">
  您的浏览器年龄可能比《泰坦尼克号》还大
</video>

8.2.4 实战：创建爆米花影院

<style>
  .cinema {
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 0 30px #ffd700;
  }
</style>

<div class="cinema">
  <video controls poster="popcorn.jpg" style="width:100%">
    <source src="movie-night.mp4">
    <source src="movie-night.webm">
    <track label="English" kind="subtitles" srclang="en" src="subs.vtt">
    <p>建议升级浏览器，就像看电影要带3D眼镜</p>
  </video>
</div>

8.2.5 避坑指南

1. 移动端自动播放策略：iOS需要添加playsinline属性
2. 视频比例失调？用CSS锁定宽高比：video { width: 100%; height: auto; aspect-ratio: 16/9; /* 电影宽银幕比例 */ }
3. 字幕文件要使用WebVTT格式，就像给电影加弹幕
4. 大视频文件记得用preload="metadata"，别让用户等得爆米花都凉了

（神秘电流声）嘀——下节课我们将召唤会动的皮卡丘！猜猜哪个HTML5标签能放电？