第31话：电影院 - HTML 漫画大冒险

掌上影院

🎥

既然声音都有了，怎么能没有画面？是时候展示真正的技术了！

🦖

<video> 标签就是你的放映机。支持 MP4, WebM, Ogg 格式。

开始放映

<video width="320" height="240" controls poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器太旧了，居然不支持 Video 标签？
</video>

📏

强烈建议设置 width 和 height！不然视频加载出来时，页面会像跳舞一样抖动（布局偏移）。

放映员手册 (属性)

controls

必须有！不然用户怎么暂停？难道要看到地老天荒？

poster

海报图。视频加载前显示的封面。选一张帅气的！

autoplay

自动播放。同样，通常需要配合 muted 才能生效。

preload

预加载。auto (全部), metadata (只加载时长等信息), none (省流量)。