在HTML中，可以用 <video> 标签插入视频，例如：

<video src="rabbit320.webm" controls>
    <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

其中 src 属性指向想要嵌入网页中的视频资源； controls 属性用于提供浏览器默认的播放控件。

展现效果如下：

注意事项：

• <video> 标签内的内容叫做后备内容，只有当浏览器不支持 <video> 标签的时候，才会显示这段内容，通过我们提供的 <a> 标签，使用户在无法播放时至少可以访问到这个文件。
• 由于不同浏览器对视频格式的支持情况可能不同，应该使用多个播放源以提高兼容性。

提供多个播放源的写法如下：

<video controls>
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

可以看出：这种写法省略了 <video> 标签的 src 属性，转而在 <video> 标签内新增了多个 <source> 标签，用于提供不同格式的内容源。

一般来说，内容源应该至少包括WebM和MP4两种格式，这两种在目前已经足够支持大多数平台和浏览器。

<source> 标签的 type 属性是可选的，但是建议添加上这个属性，浏览器会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

除此以外， <video> 标签还有一些其他特性，看下面这个例子：

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

width 和 height 属性用于控制视频的尺寸；autoplay 属性会使音频和视频内容立即播放；loop 属性可以让音频或者视频文件循环播放；muted 属性会导致媒体播放时，默认关闭声音；poster 属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告；还有一个 preload 属性用来缓冲较大的文件，有 3 个值可选："none" 表示不缓冲，"auto" 表示页面加载后缓存媒体文件，"metadata" 表示仅缓冲文件的元数据。