乐趣区

前端培训中级阶段17-多媒体API20190919期

jiezi

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

媒体包括 文字、图片（<img>）、声音（<audio>）、视频（<video>）等。web 可以现实的功能越来越多，表现形式也越来越丰富。

介绍内容

  1. <img> 图片标签
  2. <audio> 音频标签
    <audio> 元素 用于在 Web 上下文中播放音频 。可以用于复杂媒体的隐性目标，或是用户控制播放音频的控制器。
    可以从 JavaScript HTMLAudioElement 对象中访问。
  3. <video> 视频标签
    <video> 元素 用于在 Web 上下文中播放视频 。可以简单地用于呈现视频，可以是 流式视频 的目标。也可以用于连接 媒体 API 和 其他 HTML、DOM API，比如 <canvas>（用于抓取当前帧，调整编辑)
    可以通过 JavaScript HTMLVideoElement 对象访问。

  4. <track> 字幕标签。兼容性感人，我就不多说了。效果地址

    <track> 元素可以被放置在 <audio> 或者 <video> 元素内部，当在媒体播放时，以提供 WebVTT 格式化字幕或标题轨道的参考。可以通过 JavaScript HTMLTrackElement 对象访问。

图片

常用图片类型比对

后缀 支持透明 矢量图 支持压缩 支持动画 支持连续 支持交错
jpg × × √ ×
png √ × √ ×
gif × × √ √
bmp × × × ×
webp × × √ ×

图片所有类型

  1. jpg 联合照片专家组（外语简称 JPEG 外语全称：Joint Photographic Expert Group）
    是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤。
  2. png 便携式网络图形（外语简称 PNG、外语全称：Portable Network Graphics）
    PNG 支持高级别无损耗压缩。PNG 支持 alpha 通道透明度。PNG 支持交错。
  3. bmp 位图 ，windows 系统带的画图工具保存的就是 bmp 格式。是一种 与硬件设备无关 的图像文件格式，使用非常广。它采用 位映射存储格式 ，除了图像深度可选以外， 不支持其他任何压缩，因此，BMP 文件所占用的空间很大。BMP 文件的图像深度可选 lbit、4bit、8bit 及 24bit。BMP 文件存储数据时，图像的扫描方式是按从左到右、从下到上的顺序。
  4. gif 图形交换格式（外语简称：GIF、外语全称：Graphics Interchange Format）
    GIF 文件的数据，是一种基于 LZW 算法 的连续色调 的无损压缩格式 。所以 GIF 的图像深度从 lbit 到 8bit， 最多支持 256 种色彩的图像 。GIF 格式的另一个特点是其在一个 GIF 文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就 可构成一种最简单的动画。另外，GIF 不支持 Alpha 透明通道。
  5. webp (发音 weppy)
    谷歌开发的一种旨在 加快图片加载速度 的图片格式。图片 压缩体积大约只有 JPEG 的 2 /3，节省大量的服务器宽带资源和数据空间。同时提供了 有损压缩 与无损压缩，派生自图像编码格式 VP8。
  6. ico 它是 Windows 的图标文件格式的一种，可以存储单个图案、多尺寸、多色板的图标文件。
  7. svg 目前首选的网页 矢量图 格式。图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。
  8. TPG 由腾讯音视频实验室基于 AVS2 内核自主研发而成。其它常用图片格式相比，同等影像质量下，TPG 图片的体积比 PNG 小 50% 以上，比 GIF 小 90% 以上，比 JPG/JPEG 小 40% 以上。相对 Google 近来推出的 WebP 格式，TPG 文件大小可以减少近 30%。
  9. PCX PCX 在许多基于 Windows 的程序和基于 MS-DOS 的程序间是标准格式。PCX 支持内部压缩。PCX 不支持 Web 浏览器
  10. TIF 标签图像文件格式（中文简称 TIF、外语简称 TIFF、外语全称：TagImage FileFormat）
  11. TGA 已标记的图形（外语全称：Tagged Graphics）TGA 的结构比较简单，属于一种图形、图像数据的通用格式，在多媒体领域有很大影响，是计算机生成图像向电视转换的一种首选格式。
  12. EXIF 可交换的图像文件格式（外语简称 EXIF、外语全称：EXchangeable Image file Format）。除保存图像数据外，还能够存储摄影日期、使用光圈、快门、闪光灯数据等曝光资料和附带信息以及小尺寸图像。
  13. fpx 闪光照片（外语简称 FPX、外语全称：kodak Flash PiX）
  14. psd（Photoshop 图像处理软件的专用文件格式）
    可以支持图层、通道、蒙板和不同色彩模式的各种图像特征，是一种非压缩的原始文件保存格式。扫描仪不能直接生成该种格式的文件。PSD 文件有时容量会很大，但由于可以保留所有原始信息，在图像处理中对于尚未制作完成的图像，选用 PSD 格式保存是最佳的选择。
  15. CDR CorelDRAW 的专用图形文件格式
  16. PCD 照片激光唱片（外语简称：PCD、外语全称：kodak PhotoCD）
  17. DXF 图纸交换格式（外语简称：DXF、外语全称：Drawing eXchange Format）AutoCAD 中的图形文件格式
  18. UFO Ulead Photolmapct 的专用图像格式
  19. EPS 封装式页描述语言（外语简称：EPS、外语全称：Encapsulated PostScript）
  20. AI Adobe 公司的 ILLUSTRATOR 输出格式
  21. HDRI 高动态范围成像（外语简称：HDRI、外语全称：High Dynamic Range Imaging）
  22. RAW RAW 文件包含了原图片文件在传感器产生后，进入照相机图像处理器之前的一切照片信息
  23. WMF（Windows Metafile Format）是 Windows 中常见的一种图元文件格式，属于矢量文件格式。它具有文件短小、图案造型化的特点，整个图形常由各个独立的组成部分拼接而成，其图形往往较粗糙。
  24. Flic FLIC 是 FLC 和 FLI 的统称：FLI 是最初的基于 320×200 分辨率的动画文件格式，而 FLC 则采用了更高效的数据压缩技术，所以具有比 FLI 更高的压缩比，其分辨率也有了不少提高。
  25. EMF（Enhanced Metafile）是微软公司为了弥补使用 WMF 的不足而开发的一种 Windows 32 位扩展图元文件格式，也属于矢量文件格式。

音频

HTMLAudioElement 接口提供访问 <audio> 元素的接口。继承了 HTMLMediaElement 接口。

标签属性

标签属性 - 测试地址

  1. autoplay 默认值为 false。如果为true 会自动播放。移动环境中自动播放会失效。
  2. controls 默认值为 false。如果为true 会显示一个控制面板（播放、暂停、进度、声音）。
  3. loop 默认值为 false。如果为true 会循环播放。
  4. muted 默认值为 false。如果为muted 会静音播放。

  5. preload 默认值就是浏览器定义的了（不同浏览器会选择自己的默认值），即使规范建议设置为 metadata。

    1. none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
    2. metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
    3. auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。

对象属性

  1. currentTime 当前播放时间，单位为秒。赋值会使媒体跳到一个新的时间。
  2. duration 媒体以秒为单位的总长度时间，如果媒体不可用，则为 0. 如果媒体可用，但时间长度未知, 值为 NAN. 如果媒体是以 stream 形式传输并且没有预定长度，则值为 Inf。
  3. volume 音量
  4. playbackRate 用来设置或获取当前媒体文件的播放速率

对象方法

  1. pause() 暂停
  2. play() 播放

事件

  1. loadstart 加载过程已经开始，浏览器正在连接到媒体。
  2. durationchange 当准确时长返回时候，会触发 durationchange，此时我们就可以快速显示音频播放时间了。
  3. loadedmetadata 当第一个音频文件字节数据到达时，会触发 loadeddata 事件。虽然播放头已经就位，但还没有准备好播放。
  4. canplay 当媒体文件可以播放的时候会触发 canplay 事件。
  5. canplaythrough 在音频文件可以从头播放到尾时候触发。这种情况包括音频文件已经从头到尾加载完毕了，或者浏览器认为一定可以按时下载，不会发生缓冲停止。
  6. timeupdate 每次 currentTime 属性值发生变化的时候会触发 timeupdate 事件。
  7. volumechange 音量发生变化的时候会触发。包括静音行为。
  8. ratechange 播放速率发生变化的时候会触发
  9. play 事件触发的播放状态一定是一个从暂停到播放。
  10. pause 此事件触发需要一个从播放到暂停的状态变化。
  11. ended 当整个音频文件播放完毕的时触发

媒体事件加载顺序如下：
loadstart → durationchange → loadedmetadata → loadeddata → progress → canplay → canplaythrough

视频

HTMLVideoElement 接口提供了用于操作视频对象的特殊属性和方法。继承了 HTMLMediaElement 接口。

标签属性

同音频标签属性，但会有一些特殊的。

  1. poster（video 标签）封面图的 url。默认为第一帧
  2. width、height

WebRTC API

WebRTC (Web Real-Time Communications) 是一项 实时通讯技术 ，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间 点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

web Audio

一个简单而典型的 web audio 流程如下：

  1. 创建音频上下文
  2. 在音频上下文里创建源 — 例如 <audio>, 振荡器, 流
  3. 创建效果节点，例如混响、双二阶滤波器、平移、压缩
  4. 为音频选择一个目的地，例如你的系统扬声器
  5. 连接源到效果器，对目的地进行效果输出

媒体流处理 API

媒体流处理 API（通常被称为媒体流 API 或流 API）是描述音频或视频数据流的 WebRTC 的一部分。
这个 API 是基于操纵一个 MediaStream 对象代表音频或视频相关数据的流量。通常一个 MediaStrea 是作为一个简单的 URL string 它可以用来引用存储在 DOM 中的数据 File, 或者一个 Blob 对象建立 window.URL.createObjectURL()。

一个 MediaStream 包含零个或更多的 MediaStreamTrack 对象，代表着 各种的声轨和视频轨 。
一个 MediaStreamTrack 可能有一个或更多的 通道 。
通道 代表着 媒体流的最小单元，比如一个音频信号对应着一个对应的扬声器，像是在立体声音轨中的左通道或右通道。

MediaStream 对象有着 单一的输入和输出 。
由 getUserMedia() 创建的 MediaStream 对象是在本地借助用户相机和麦克风的源输入。
非本地的 MediaStream 代表了一个媒体元素, 像是 <video> 元素或是 <audio> 元素，一般是源自网络的流，并通过 WebRTC PeerConnection API 或使用 Web Audio API 获得MediaStreamAudioSourceNode 元素。
MediaStream 对象的输出能链接到一个用户。它可以是一个媒体元素, 像是 <audio> 或者 <video>、WebRTC PeerConnection API 或是 Web Audio API MediaStreamAudioDestinationNode。

微信公众号：前端 linong

参考文献

  1. Web 媒体技术 -MDN
  2. Web_Audio_API
  3. 媒体流处理 API
  4. WebRTC API
  5. HTML audio 基础 API 完全使用指南
退出移动版