在网页中直接播放视频已经成为现代站点常见需求，HTML5提供的video标签让开发者无需安装额外插件就能实现视频嵌入。理解它的基本结构和浏览器兼容规则，是做好网页媒体的第一步。
video标签的基本嵌入方式
最简单的做法是在页面中写一对<video>和</video>标签，并通过src属性指定视频地址。不过为了兼容不同浏览器，更推荐在标签内部使用多个<source>元素。
<video width="640" height="360" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> 您的浏览器不支持HTML5 video标签。 </video>
上面的代码里，controls属性会显示播放控件，浏览器按顺序选择能播放的源文件，若都不支持则展示文字提示。
常用属性说明
- autoplay：页面加载后自动播放，多数移动端会限制此行为。
- muted：静音，常配合autoplay使用以绕过浏览器拦截。
- loop：循环播放。
- poster：指定视频封面图地址。
- preload：设置预加载策略，如metadata或none。
浏览器兼容性处理
不同浏览器支持的视频编码不同，MP4使用H.264编码覆盖最广，WebM在部分开源浏览器中更友好。通过多<source>已基本解决格式问题，但仍需考虑旧版浏览器。
| 浏览器 | MP4(H.264) | WebM |
|---|---|---|
| Chrome | 支持 | 支持 |
| Firefox | 支持 | 支持 |
| Safari | 支持 | 不支持 |
| IE9+ | 支持 | 不支持 |
使用JavaScript做降级方案
当环境完全不支持video时，可用脚本替换为普通链接或Flash备用件。
var video = document.createElement('video');
if (!video.canPlayType) {
// 不支持HTML5视频，插入下载链接
var a = document.createElement('a');
a.href = 'movie.mp4';
a.textContent = '点击下载视频';
document.body.appendChild(a);
}
注意事项
视频文件体积影响加载速度，建议压缩并选择合适的分辨率。另外，跨域视频需服务端配置CORS头，本地调试可使用127.0.0.1或192.168.0.1避免协议问题。
合理运用video标签与多源策略，能让网页视频兼容性与体验得到保障。