多媒体文档

元信息

目标：理解 HTML 作为文本格式如何纳入图片/音视频等二进制内容——资源外链为主、base64 内联与 SVG 文本化为辅，以及浏览器插件机制到 HTML5 原生音视频标记的演进
关键概念：媒体类型、资源（asset）、外联式、内联式（base64）、SVG、img/audio/video标记、插件
关联阶段：cp1
常见误区：以为图片是"嵌在"HTML 文件里的（外联式是独立文件与主文档关联，内联 base64 才进文档）；以为内联 base64 更高级（体积涨约 1/3、需解码，只适合小图）；以为 alt 属性可有可无（它是图片载入失败与视障场景的文字替代）

什么是多媒体文档？

内容类型	编码类型	媒体格式
文字	文本	txt、html等
图形	二进制	jpg、png、gif 等
声音或音频	二进制	wave、mp3、ape 等
图像或视频	二进制	flash、mp4、avi、ogg 等

在后面的章节中，经常会看到image/jpg这样的媒体类型描述字，这就表示，这是一个图形内容类型，使用jpg的媒体编码格式

资源 asset

HTML 基于文本格式，仅支持文本的标记和处理
在HTML中，一般将这些二进制文件独立存储为一个附件，然后与主文档相关联
在HTML中，将这些属于当前文档然而又独立存储的附件，统称为资源(Asset)

资源不限于二进制文件，其它格式如css、js文本、字体文件等也会以附件的方式进行独立存储

早期Web对多媒体文档的支持

早期的Web由于客户端的硬件能力不足，并不支持各类多媒体类型，通常将其作为普通附件，交由用户下载，然后自己处理，类似如下：

html

<a href='./assets/my.jpg'>
<a href='./assets/my.mp4'>

Web如何支持多媒体资源

随着网络的发展和客户端的硬件升级，HTML标逐渐开始支持各类多媒体资源的标记和处理

HTML标准备新增 <img>、<audio>、<video> 等用于标记不同的多媒体资源类型
浏览器端支持直接在浏览器里进行渲染

对于简单的命令行浏览器或http客户端，它虽然能识别<img>标记，但是可能并无能力去渲染和处理；
对于搜索引擎，它能识别<img>标记，但并不渲染它，而是解析它，因此就有了按图片搜索相似图片或音乐之类的搜索功能

浏览器对多媒体文档的处理逻辑

当在浏览器中打开各种媒体类型的文件时：

对于能够处理的格式，如txt等，直接渲染
对于jpg、png、gif、wav、mp4 等常见格式，且属于公共版权或不涉及商业版权，使用相应的插件进行渲染(各浏览器软件的安装包里一般集成了这些插件)
对于pdf之类涉及版权的类型，则pdf阅读器软件在安装时，会同时安装相应的浏览器插件，并将媒体类型和后缀名向浏览器注册，这样，当点击 <a href="1.pdf"> 时，浏览器将下载、然后直接调用pdf插件打开和渲染该格式
对于不能识别或处理的格式，浏览器将跳出"另存为"的弹窗，交由用户自行处理

图片：外联式

https://www.runoob.com/html/html-images.html

多媒体文档-0

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

图片：内联式

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

内联的原理：相当于将图片文件的二进制内容抽取出来，使用base64格式进行编码以适合网络传输，然后浏览器直接读取<img src="data:image/jpeg;base64,/9j/4... />中的base64字符串在内存中进行渲染

适合小图片，因为能够减少一个图片的 HTTP 请求
由于base64加密，大小增长1/3左右，且需要额外解码速度较慢
IE8以下兼容性不好

图片文件转内联数据工具

SVG 格式

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

最新的方式，是直接将图片格式文本化和语义化，这样，浏览器可以直接对其处理和渲染，这就是可缩放矢量图形(Scalable Vector Graphics)SVG

flash与音频视频

操作系统上需要安装有多媒体播放器，譬如windows下是media player,mac机上是quick time，这些播放器通常并不是默认安装的
除了媒体播放器，同一类音视频文件还有各种各样的编码格式，因此需要同样数目繁多的解码器。譬如类似暴风影音这样的软件包的功能就是在机器上安装一大堆解码器以保证播放器可以解码各种格式

基于上述兼容性的考虑，早期的网站一般采用的是将视频先转换为flash格式，然后嵌入到网页当中。因为各个操作系统和浏览器基本上都安装了flash播放器或插件，所以能顺利的播放flash音视频。即使没有安装，浏览也会提示从网络安装。

简单的理解就是：具有同样后缀名的1.mp4文件，可能使用了不同的编码器

HTML5时代的音频视频

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

随着近年 HTML5 标准的统一和现代浏览器的发展，当前主流的现代浏览器上已经直接支持播放多媒体文件，虽然仍然由于格式及专利方面的原因，仅仅支持mp4、ogg等少量多媒体标准。

HTML5 Video 不但支持播放，而支持播放器的各种控制和相关API，如播放、停止、拖拉进退等

兼容性问题

如果你希望兼容旧浏览器，仍然需要借助flash，由于要考虑到不同浏览器的兼容性等问题，需要编写大量的代码，如<object>标记等等。因此前端开发社区提供了一些封装好的js库可以简化操作,如 video.js等

多媒体文档 ​

元信息 ​

什么是多媒体文档？ ​

资源 asset ​

早期Web对多媒体文档的支持 ​

Web如何支持多媒体资源 ​

浏览器对多媒体文档的处理逻辑 ​

图片：外联式 ​

图片：内联式 ​

SVG 格式 ​

flash与音频视频 ​

HTML5时代的音频视频 ​

兼容性问题 ​

参考 ​

多媒体文档

元信息

什么是多媒体文档？

资源 asset

早期Web对多媒体文档的支持

Web如何支持多媒体资源

浏览器对多媒体文档的处理逻辑

图片：外联式

图片：内联式

SVG 格式

flash与音频视频

HTML5时代的音频视频

兼容性问题

参考