在网页中添加视频、声音、动画等可以改善用户体验。 在HTML5之前，向网页添加多媒体的唯一方法是使用第三方插件（例如Adobe Flash等）。
HTML5 提供对多媒体的本机支持。 您只需通过视频元素即可将视频、电影或音频资源嵌入到网页中，通过音频元素将音频资源嵌入到网页中，省时省力。
1. 视频
在HTML5时代，在网页中嵌入视频是非常简单的。 您只需要一个 video 元素并设置其 src 属性来链接到视频 URL。 这太简单了
<video src="media/vedio.mp4"></video>
在IE8中打开这个网站，网站不但一片空白，而且什么也没有，为什么呢？
原始video是HTML5引入的最新元素，并非所有浏览器都支持，IE8及以下版本很难识别video标签。 如果浏览器无法识别视频标签，它将忽略它，就好像没有一样。 这是网站上出现空白的触发器。
这个问题很容易解决，只需在视频标签之间放入文字信息即可，不支持视频标签的老浏览器，会在视频标签之间显示文字信息，提醒用户该浏览器不支持视频，就这么简单！
<video src="media/vedio.mp4">
你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
在IE8上打开，确实显示了提示文字，这个不少，至少用户知道自己的浏览器无法播放视频，是时候换浏览器了。
我下载了最新版本的Opera浏览器25.0，打开，还是一片空白！ Opera浏览器显然支持video标签，那为什么呢？
这还得从视频的编码格式说起。 视频元素支持三种视频格式：Ogg、MP4、WebM。
Ogg是带有Theora视频编码和Vorbis音频编码的文件，后缀为.ogg； MP4是H.264视频编码和AAC音频编码的MP4文件，后缀为.mp4； WebM 是 VP8 视频编码和 Vorbis 音频编码文件，后缀为 .webm。
至于Opera浏览器，它可以支持ogg，但不支持mp4。 由于Opera支持视频标签，所以视频标签之间的文字信息不会显示，但它不支持ogg，所以无法播放，最终页面出现空白。 现在做什么？
尽管有办法，我们可以从互联网上下载图像并将其放在视频播放窗口中。 如果视频无法播放，则会显示此图像。 不是更好吗？ 从网上下载一张漂亮的眉毛图片，简称为beauty.jpg。 如何将此图像添加到视频窗口？
video标签有一个poster属性，专门用于在视频窗口中放置图片。 海报是视频的占位符。 无论如何，只要视频尚未播放（视频下载过程中、视频不存在、不支持视频类型、或者用户点击播放按钮之前），就会显示图像。 您可以将其视为视频播放前插入的海报或海报。
<video src="media/vedio.mp4" poster = "img/beauty.jpg">
你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
在Opera浏览器上刷新一下，果然有一个帅哥在对我微笑。 虽然视频没有播放下来，但是这次的气氛却非常的高涨。
那我就不能只看小可爱们三天了。 我还得找到播放视频的方法。 由于Opera浏览器不支持mp4，所以我们需要ogg来代替，所以肯定不会有问题。
我想了想，这个方法不太好，如果某个浏览器只支持ogg而不支持mp4怎么办。 如今，除了质量之外，一切都缺乏。 只需在互联网上搜索，您就会找到解决方案。
在video元素中添加source元素可以解决这个问题。 在source元素中，通过src属性指定视频的地址，通过type属性指定视频的类型，以帮助浏览器决定是否播放视频。 此外，您可以向视频元素添加任意数量的源元素，以将不同的源元素链接到不同的视频文件。
在这种情况下，当浏览器找到video元素时，它会首先检查它是否定义了src属性。 如果不是，则检查源元素。 浏览器将一次浏览一个视频源，直到找到一个可以播放的视频源。 一旦找到，就会播放，其他视频源将被忽略。 我们只需添加两个源，一个是mp4，另一个是ogg。 现在视频肯定会被播放。
<video poster = "img/beauty.jpg">
<source src="media/vedio.mp4" type="video/mp4">
<source src="media/vedio.ogg" type="video/ogg">
你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
我又刷新了Opera浏览器。 只有那个女孩对我微笑，但视频仍然没有播放。 唉，太蠢了，忘记添加播放视频的控件了。
在video标签中，通过添加controls属性为视频添加播放控件，方便用户进行播放、暂停操作、音量控制等。
<video poster = "img/beauty.jpg" controls>
（此处略去500字…）
</video>
我又在Opera浏览器上刷新了一下，效果果然不一样了。 这次除了看到帅哥，还看到了视频控。 戳了一下键盘上的播放键，哈哈，是的，我确实看到了美妙的曲子。 我们的ogg文件终于播放了，一起欣赏吧O(∩_∩)O。
听了一会儿，我突然想到，不是html加载视频，我只是点了播放键，等了很久才看到声音。 我可以按播放按钮立即播放吗？
原来视频还需要下载和缓存。 点击播放按钮后，会先缓存，然后再播放。 页面加载时可以缓存吗？ 这样用户点击播放后就不用等待了。
这实际上是可能的。 在video标签中，可以通过添加preload属性为视频添加预加载功能，在页面加载的同时加载视频。
<video poster = "img/beauty.jpg" controls preload>
（此处略去500字…）
</video>
关于preload属性，罗嗦一点，可以设置为元数据，这样浏览器只预加载视频的基本信息，比如规格、时长、一些关键帧等。 在这种情况下，浏览器可以在开始播放之前提前估计视频的显示规格。
现在一切都OK了！ 看看mp4能否正常播放。 下载最新版本的Google Chrome 38.0浏览器，打开网页，然后按播放按钮。
等等，等等，不对，只有声音没有图像。 明明是mp4格式的文件？ 我用暴风影音试了一下，有图！
在网上苦苦寻找，花了整整586秒才终于找到答案。 MP4 视频需要 h.264 编码格式来生成图像。
我找到了一个h.264编码格式的mp4并尝试了一下。 是的，确实有图像！ 看了半天，原来是一部关于鬼的电影。 我胡言乱语了一会儿，一个字也没听懂。 那么O(∩_∩)O~可以提供英文字幕，让你不用费心去听！
在 HTML5 中，通过向 video 元素添加 track 元素来向视频添加字幕。 字幕文件有两种格式：WebVTT 和 TTML。 WebVTT即网络视频文本轨道（WebVideoTextTrack），是UTF-8编码格式的文本文件； TTML是定时文本标记语言（TimedTextMarkupLanguage），它是XML格式的文件。 这两个文件的具体格式超出了我们讨论的范围。
视频元素支持添加多个轨道元素，不同的轨道元素链接到不同的字幕文件。 用户可以在字幕之间切换。
<video poster = "img/beauty.jpg" controls preload>
<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="cn_track.vtt" kind="captions" srclang="zh" label="简体中文">
</video>
track元素中，src属性指定了字幕文件的URL； srclang属性指定字幕文件的语言类型，如果kind属性值为“subtitles”，则该属性为必填项； label属性指定字幕标签，每个字幕元素必须设置一个唯一的标签，对于重复的标签，切换字幕时会显示该标签的名称； kind指定字幕内容类型，只能是subtitles、captions、descriptions、chapters、metadata之一； default属性指定是否为默认字幕，如果没有指定，则不会手动显示字幕。
不仅仅是字幕，我还想对视频有太多的控制，比如允许视频手动播放、循环播放、默认静音、视频窗口的大小等等，这可以吗？
这已经不是事了。 video 元素已经提供了相关属性。 只需根据需要设置相应的属性即可。 该属性及其含义如表23所示：
哦，原来如此简单！ 就是这样。 所有在网页中嵌入视频的代码都在这里，为你打包好了！
<video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>
<source src="media/vedio.mp4">
<source src="media/vedio.ogg">
<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="cn_track.vtt" kind="captions" srclang="zh" label="简体中文">
你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
我张嘴一看html加载视频，只有7行代码。 然而，仅仅这7行代码，就能把他毁得一塌糊涂。
见一切都完成了，他望着天空，长长地出了一口气，变得那么轻松、悠闲。 此时，他闭上了眼睛，徜徉在自己的梦境世界里！
2. 音频
有了在网页中嵌入视频的经验，在网页中嵌入音频也是小菜一碟。 只需将视频元素替换为音频元素即可。
但需要理解的是，音频仅支持 OggVorbis、mp3 和 wav 等音频格式。 还要知道，由于音频没有图片，所以没有宽度、高度和海报属性，其他属性都支持，但与视频含义相同。
在网页中嵌入音频的代码如下：
<audio controls preload autoplay loop muted>
<source src="media/audio.mp3">
<source src="media/audio.wav">
<source src="media/audio.ogg">
你的浏览器已经老掉牙了，不支持audio，还不赶快使用现代浏览器O(∩_∩)O~！
</audio>
