HTML 视频（Video）播放
网页里放视频早已不需要 Flash，HTML5 的 <video> 标签就能原生播放。它和 <audio> 非常相似，本节聚焦 video 的写法、常用属性和 JavaScript 控制，学会它就能做视频展示页、课程播放器。
在网页中播放视频
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>视频示例</title>
</head>
<body>
<h3>示例视频</h3>
<video src="movie.mp4" controls width="480"></video>
</body>
</html>
在浏览器中显示为：一个视频画面窗口，带播放/暂停、进度条、音量调节与全屏控件。
常用属性
- controls：显示播放控制条。
- autoplay：自动播放（带声音时通常被拦截，静音可放行）。
- muted：静音播放。
- loop：循环播放。
- poster：视频播放前显示的封面图。
- width / height：显示宽度与高度。
- preload：预加载策略 auto / metadata / none。
<!-- 自动播放的静音循环广告视频，poster 是封面 -->
<video src="ad.mp4" autoplay muted loop poster="ad-cover.jpg"></video>
多来源与兼容处理
浏览器按顺序选择第一个能播放的来源，全部不支持时显示标签内的提示文字：
<video controls width="480" poster="cover.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
支持的视频格式
| 格式 | 编码 | 说明 |
|---|---|---|
| MP4 | H.264 + AAC | 兼容性最好，最常用 |
| WebM | VP8/VP9 + Vorbis/Opus | 开放格式，文件较小 |
| Ogg | Theora | 较老，兼容性有限 |
用 JavaScript 控制播放
video 与 audio 共用一套媒体 API：方法有 play()、pause()、load()，属性有 currentTime、volume、duration：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>JS 控制视频</title>
</head>
<body>
<video id="mv" src="movie.mp4" width="480"></video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<script>
var video = document.getElementById("mv");
function playVideo() { video.play(); } // 播放
function pauseVideo() {
video.pause(); // 暂停
console.log("暂停在 " + video.currentTime + " 秒");
}
video.addEventListener("ended", function () { console.log("播放完毕，共 " + video.duration + " 秒"); });
</script>
</body>
</html>
在浏览器中显示为：一个无控制条的视频和两个按钮；点"播放"开始，点"暂停"在控制台输出当前位置，播放完毕输出总时长。
小结：<video> 加 src 与 controls 即可播放视频，poster、autoplay、muted、loop、source 能覆盖不同需求，再配合 JS 的 play()、pause() 和事件，就能做出完整的视频播放功能。