关于多媒体的定义不再赘述，图像、音视频、电影、动画都属于多媒体。
第一代浏览器仅支持单一字体、单一颜色的文本，之后的浏览器开始支持多种字体，多种颜色以及图像。
各主流浏览器对音频、视频、动画的处理方式都不尽相同，支持的格式也多种多样，某些格式需要插件才能工作。
自HTML5问世以来，多媒体的处理进入了一个新的时代，一切变得更加方便和容易了。
常见视频格式
MP4是一种新兴的互联网视频格式，YouTube推荐使用，收到HTML5、Flash Player的支持。
| 格式 | 后缀名 | 描述 |
|---|---|---|
| MPEG | .mpg .mpeg |
MPEG，由“动态图像专家组”（Moving Pictures Expert Group）开发，第一种流行于网络的视频格式，受到所有浏览器的支持，但不受HTML5支持。 |
| AVI | .avi | AVI (Audio Video Interleave)，由微软开发，常用于摄影机与电视，可在Windows电脑上播放。 |
| WMV | .wmv | WMV (Windows Media Video)，由微软开发，常用于摄影机与电视，可在Windows电脑上播放。 |
| QuickTime | .mov | QuickTime，由苹果公司开发，常用于摄影机与电视，可在苹果电脑上播放。 |
| RealVideo | .rm .ram |
RealVideo，由Real Media开发，一种低带宽流式视频格式，现在仍用于在线视频和互联网电视。 |
| Flash | .swf .flv |
Flash，由Macromedia开发，通常需要借助flash player插件才能在浏览器中播放。 |
| Ogg | .ogg | Theora Ogg，由Xiph.Org基金会开发，受到HTML5支持。 |
| WebM | .webm | WebM，由网络巨头Mozilla, Opera, Adobe, Google合作开发，受到HTML5支持。 |
| MPEG-4 or MP4 |
.mp4 | MP4，由“动态图像专家组”Moving Pictures Expert Group基于QuickTime开发，常用于新式摄影机、电视机，受到所有HTML5浏览器的支持，受到YouTube推荐。 |
注意，只有MP4、WebM、Ogg受到HTML5标准的支持。
音频格式
MP3是用于压缩录制音乐的最新格式，MP3已经成为数字音乐的代名词。
| 格式 | 后缀名 | 描述 |
|---|---|---|
| MIDI | .mid .midi |
MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。 |
| RealAudio | .rm .ram |
RealAudio，由Real Media开发，低带宽音频流。 |
| WMA | .wma | WMA (Windows Media Audio)，由微软开发，常用于Windows设备上的音乐播放器。 |
| AAC | .aac | AAC (Advanced Audio Coding)，由苹果公司开发，iTunes的默认格式，支持苹果设备。 |
| WAV | .wav | WAV，由IBM和Microsoft，可在Windows, Macintosh, Linux操作系统中播放，受到HTML5支持。 |
| Ogg | .ogg | Ogg，由Xiph.Org基金会开发，受到HTML5支持。 |
| MP3 | .mp3 | MP3文件实际上是MPEG文件的音频部分，MP3是音乐播放器中最流行的格式，高压缩率与高品质的结合，受到所有浏览器的支持。 |
| MP4 | .mp4 | MP4是一种视频格式，但也可以用于音频。 |
只有MP3、WAV、Ogg受到HTML5标准的支持。
在HTML中播放视频
在HTML5出现之前，只能通过插件在浏览器中播放视频。HTML5的<video>元素指定了一种在Web页面中嵌入视频的标准方式。
支持<video>元素的浏览器最早版本如下:
| 元素 | Chrome | IE | Firefox | Safari | Opera |
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
用法：
<video width="320" height="240" controls autoplay>
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
你的浏览器不支持video标签。
</video>controls属性：添加视频控制按钮，如播放、暂停、音量、下载。
autoplay属性：自动播放，在移动设备比如iPad、iPhone中这个属性不能正常工作。
总是指定width、height是个好习惯。
<source>元素指定视频源，可指定多个可替代源供浏览器选择，浏览器通常会选择第一个可识别源。
<track>元素，指定视频字幕，详见https://www.w3schools.com/tags/tag_track.asp。
“你的浏览器不支持video标签”这行文本只会在浏览器不支持该标签时显示。
浏览器对三种格式的支持情况如下：
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
可见MP4的支持情况最好，所以可能的话，尽量使用MP4格式。
各格式对应的type值：
| 文件格式 | type值 |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
在HTML中播放音频
与视频一样，在HTML5出现之前，只能通过插件在浏览器中播放音频。HTML5的<audio>元素指定了一种在Web页面中嵌入音频的标准方式。
支持<audio>元素的浏览器最早版本如下:
| 元素 | Chrome | IE | Firefox | Safari | Opera |
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
用法：
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
你的浏览器不支持audio标签。
</audio>浏览器对各格式的支持情况：
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
可见MP3的支持最完善，所以可能的话音频尽量使用MP3格式。
各格式对应的type值：
| 文件格式 | Media Type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
完整的HTML5 Audio/Video DOM参考：https://www.w3schools.com/tags/ref_av_dom.asp
HTML插件
插件的作用是拓展浏览器的功能，一个典型的例子是Java小应用程序（Java applets），插件可以通过<object>或<embed>标签添加到网页中，插件的用途有很多，比如展示地图、扫描病毒、验证银行卡号等。
<object>元素
<object>受到所有浏览器的支持，用来定义一个嵌入的对象，可用于在网页中嵌入插件（比如Java applets、PDF阅读器、Flash播放器）。
<object width="400" height="50" data="bookmark.swf">
你的浏览器不支持此标签
</object>也可以用来在HTML中嵌入HTML：
<object width="100%" height="500px" data="example.html">
</object>如何你乐意的话也可以用来插入图片：
<object data="car.jpeg">
</object><embed>元素
大多数主流浏览器都支持这个标签，<embed>也是用来定义嵌入的对象的。
浏览器对<embed>的支持已经有很长一段时间了，但直到HTML5出现之前，<embed>都没能正式进入HTML规范。
<embed width="400" height="50" src="bookmark.swf">
<embed width="100%" height="500px" src="example.html">
<embed src="car.jpeg"><embed>无闭合标签，所以是不能添加替代文本的。
在自己的网站中插入视频的更佳实现
除非你的网站是专门的视频网站，否则直接将视频放置到服务器上然后调用是不明智的选择。
将视频上传到服务器上不仅会使你的服务器流量骤增，压力增大，而且受限于服务器有限的带宽，也会给用户带来不流畅的观影体验。
所以最佳的实践应当是将需要的视频上传到视频服务网站，比如大陆的腾讯视频、优酷等。至于如何上传，不再赘述。此类视频网站都直接提供了嵌入视频的代码，复制即可。
如何在网页中插入腾讯视频？
点击视频下方的分享按钮，复制代码插入网页即可。
<iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=a00239c307x&tiny=0&auto=0" allowfullscreen></iframe>此处我们选择通用代码，通用代码支持在移动设备上播放。
如何在网页中插入优酷视频？
方法同上：
<iframe height=498 width=510 src='http://player.youku.com/embed/XMjc5NzcyNzU4NA==' frameborder=0 'allowfullscreen'></iframe>在网页中插入音乐也可以这样，比如直接在网易云音乐的音乐库中找到所需音乐，复制代码即可。
如何在网页中插入网易云音乐？
点击曲目，点击封面下方的“生成外链播放器”，复制相关代码即可。
此处赋值iframe代码：
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=21725725&auto=1&height=66"></iframe>效果如下：