76. video 标签：视频播放

本节目标：学会用 video 标签在网页中嵌入视频，掌握常用属性和多源兼容写法。

视频是网页上最常见的多媒体内容。HTML5 的 <video> 标签让我们可以直接在页面里放视频，再也不需要 Flash 了。

最基础的用法

<video src="movie.mp4" controls width="640" height="360"></video>

controls 显示播放控件，width 和 height 设置播放器尺寸。不设置尺寸的话，视频会按原始分辨率显示，可能导致页面布局跳动。

常用属性

属性	作用
`controls`	显示播放控件
`autoplay`	自动播放（需配合 muted）
`loop`	循环播放
`muted`	默认静音
`poster`	视频加载前显示的封面图
`preload`	预加载策略

<video src="movie.mp4" controls width="640" poster="cover.jpg"></video>

poster 属性指定一张图片，在视频加载完成前显示。用户体验比黑屏好很多。

Tip
现代浏览器允许 autoplay 生效的前提是视频必须静音。所以自动播放要这样写：
<video src="movie.mp4" autoplay muted loop></video>

多源兼容

和音频一样，不同浏览器支持的视频格式不同。MP4（H.264）是目前最通用的格式，但为了照顾老版本浏览器，可以提供多种格式。

<video controls width="640" poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  你的浏览器不支持视频播放。
</video>

浏览器从上往下选，用第一个能播放的。

视频格式速查

格式	MIME 类型	说明
MP4	video/mp4	最通用，H.264 编码
WebM	video/webm	Google 主推，Chrome、Firefox 支持
Ogg	video/ogg	Theora 编码，文件较大

Note

实际项目中，准备 MP4 + WebM 两种格式基本够用。MP4 兼容性最好，WebM 作为 Chrome 和 Firefox 的备选。

全屏播放

<video> 自带全屏能力。用户双击视频或点击控制条上的全屏按钮就能全屏。如果你想用代码触发全屏，可以这样：

const video = document.getElementById('myVideo');
video.requestFullscreen();

不过全屏 API 需要用户主动触发（比如点击按钮），不能页面加载就自动全屏。

JavaScript 控制

视频元素的方法和音频类似，还支持更多控制。

const video = document.getElementById('myVideo');

// 播放
video.play();

// 暂停
video.pause();

// 跳转到第 30 秒
video.currentTime = 30;

// 设置音量（0 到 1）
video.volume = 0.5;

// 监听播放结束
video.addEventListener('ended', () => {
  console.log('视频播放完了');
});

小结

<video> 是 HTML5 原生视频方案
用 poster 设置封面图，提升体验
自动播放需要配合 muted
提供 MP4 + WebM 两种格式做兼容
可以用 JavaScript 控制播放、暂停、进度等