HTML5 Video(视频)

在 HTML5 之前，网页播放视频要靠 Flash 等插件；HTML5 的 <video> 标签让浏览器原生播放视频，无需任何插件，还提供统一的播放控制 API。学习它，视频展示、课程播放、广告贴片都能轻松实现。

最简单的用法

<video> 标签配上 src 和 controls（显示播放控件）即可播放。开始和结束标签之间的文字，会在浏览器不支持视频时显示。

<video src="movie.mp4" controls width="480" height="320">
    您的浏览器不支持 video 标签。
</video>

在浏览器中显示为：一个带播放/暂停、进度条、音量控件的视频播放器。

多格式兼容：source 子标签

不同浏览器支持的视频格式不同：Chrome/Edge/Firefox 支持 MP4、WebM，旧版还要 Ogg。用多个 <source> 让浏览器依次尝试，直到找到能播的格式，把 src 从 <video> 上拿掉。

<video controls width="480">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持 video 标签。
</video>

常用属性

属性	作用
controls	显示控件
autoplay	自动播放
muted	静音播放
loop	循环播放
poster	封面图地址
preload	预加载策略：auto/metadata/none
width / height	播放器宽高

注意：浏览器普遍禁止带声音的自动播放，autoplay 常需配合 muted 才生效。

JavaScript 控制播放

video 元素是 DOM 对象，可以用 JS 控制：play() 播放、pause() 暂停；属性 paused 判断状态、duration 总时长、currentTime 当前秒数、volume 音量（0~1）。

<video id="mv" src="movie.mp4" width="480"></video>
<button onclick="document.getElementById('mv').play()">播放</button>
<button onclick="document.getElementById('mv').pause()">暂停</button>
<script>
var v = document.getElementById("mv");
v.addEventListener("ended", function () {
    alert("播放结束，当前时间：" + v.currentTime);
});
</script>

在浏览器中显示为：点击"播放"开始播放视频，播放完弹出"播放结束"提示。

易错点

① width 与 height 不要随意只设一个，会按原比例还是拉伸要看另一个是否设置，建议都设置或都不设置；② autoplay 不静音会被拦截；③ 视频文件大，别忘记给 poster 封面并考虑 preload="metadata" 减少首屏流量；④ 服务端需返回正确的 MIME 类型（video/mp4 等）。

小结：用 <video> + 多个 <source> 做跨浏览器播放，配合 controls/autoplay/poster 等属性和 play()/pause() 方法即可完成网页视频功能。