第31话

电影院

HTML5 Video 视频
掌上影院
🎥
既然声音都有了,怎么能没有画面?是时候展示真正的技术了!
🦖
<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>
📏
强烈建议设置 widthheight!不然视频加载出来时,页面会像跳舞一样抖动(布局偏移)。
放映员手册 (属性)
controls

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

poster

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

autoplay

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

preload

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