3. Web API

学习成果

• 一般概念
  • 了解不同类型的视频和音频格式。
  • 了解编解码器。
  • 了解与音频和视频相关的关键功能——播放、暂停、停止、快进快退、时长和当前时间。

  注意:

  • 这套合格标准并不期望学生能够详细了解 Web 平台的所有与视频和音频相关的 API。此类别中有很多功能，并且预先学习所有功能既不实用也不特别有用。某些功能适用于利基用例，鼓励学生作为持续学习的一部分或在需要时了解更多。
  • 目前，您需要了解 Web 上视频和音频背后的概念、基本的核心 API 功能以及一些更高级 API 的用途。

• 使用 HTMLMediaElement API 构建基本的自定义媒体播放器
  • 了解为什么要这样做——您的目标受众可能有一些浏览器默认设置无法满足的特定需求。
  • 一个很好的例子是，一些浏览器默认控件的键盘可访问性不是很好。
  • 另一个例子是，您可能只是希望在不同浏览器中获得一致的 UI 设计。
• 使用媒体流/getUserMedia() 从本地设备捕获视频和音频。
• 处理与媒体传送相关的常见错误
  • 使用 <source> 元素处理多种格式。
  • 使用正确的 MIME 类型。
  • 如果媒体不受支持，则显示备用内容。
• 了解其他视频和音频 API 的用途，包括 Web Audio API、媒体流录制 API 和媒体源扩展 API。

资源

• 视频和音频 API
• 音频和视频传送
• 音频和视频处理
• 媒体类型和格式指南：图像、音频和视频内容

学习成果

• 使用计时器和 requestAnimationFrame() 设置动画循环
  • 基本语法和用法。
  • 了解为什么 requestAnimationFrame() 比之前的版本有所改进。
  • 动画循环的常见用例，例如装饰性动画和游戏。
• Web 动画 API
  • 基本语法和用法。
  • 了解 Web 动画 API 如何与 CSS 动画属性相关联，以及何时应该使用每个属性。
  • 常见用例。
• 画布
  • 从概念上了解 <canvas> 元素和相关 API 能够实现什么。
  • 2D Canvas API 的基本语法和用法。
  • 循环 <canvas> 更新以创建简单的动画或游戏。

资源

• 绘制图形
• Web 动画 API
• 画布教程

注意:

在这套合格标准中，需要理解的主要内容是一般概念、使用 Web 存储执行简单的客户端存储任务以及 Cookie 如何以积极和消极的方式使用。

学习成果

• 了解客户端存储的概念
  • 了解常见的客户端数据存储机制——Web 存储 API、Cookie、缓存 API 和 IndexedDB API。
  • 关键用例——在重新加载之间维护状态、持久化登录和用户个性化数据以及本地/脱机工作。
  • 了解与客户端存储相关的负面模式——例如使用 Cookie 进行跟踪/指纹识别。
• 使用 Cookie 存储任意数据，通常由 HTTP 标头控制。
• 使用 Web 存储进行简单的键值对存储，由 JavaScript 控制。
• 使用 IndexedDB
  • 完整的客户端事务数据库系统。
  • 复杂且很少直接使用。您更有可能使用像 dexie.js 这样的库。
• 使用缓存/服务工作线程
  • 了解它们在渐进式 Web 应用 (PWA) 中使用的基本思想以及使站点脱机工作的基本用例。

注意:

IndexedDB 和缓存 API（通常与服务工作线程一起使用）很复杂，并且构成了巨大的主题。在此阶段详尽地了解它们不是必需的，但我们建议您了解它们的工作原理。

资源

• 什么是 localStorage？，Scrimba 课程合作伙伴
• 客户端存储
• 使用 HTTP Cookie
• 什么是渐进式 Web 应用？