3. Web API

学习成果

• 通用概念

  • 理解不同类型的视频和音频格式。

  • 理解编解码器。

  • 理解与音频和视频相关的关键功能 — 播放、暂停、停止、前后搜索、时长和当前时间。

  注意:

  • 这一套一致性标准并不期望成功的学员能够详细了解 Web 平台所有与视频和音频相关的 API。这一类功能非常多，一次性全部学完既不实际也不特别有用。其中一些功能是为小众用例设计的，鼓励学员在持续学习的过程中，或在有需要时进行更深入的学习。
  • 目前，您需要理解 Web 上视频和音频背后的概念、基本的核心 API 功能以及一些更高级 API 的用途。

• 使用 HTMLMediaElement API 构建基本的自定义媒体播放器

  • 理解这样做的原因 — 您的目标受众可能有一些浏览器默认设置未解决的特定需求。

  • 一个很好的例子是，某些浏览器默认控件的键盘可访问性不高。

  • 另一个例子是，您可能希望在不同浏览器之间实现一致的 UI 设计。

• 使用媒体流/getUserMedia() 从本地设备捕获视频和音频。

• 处理与媒体分发相关的常见错误

  • 使用 <source> 元素处理多种格式。

  • 使用正确的 MIME 类型。

  • 在媒体不受支持时显示回退内容。

• 理解其他视频和音频 API 的用途，包括 Web Audio API、Media Stream Recording API 和 Media Source Extensions API。

资源

• 视频和音频 API

• 音频和视频传输

• 音频和视频操作

• ​​媒体类型和格式指南：图像、音频和视频内容

学习成果

• 使用计时器和 requestAnimationFrame() 设置动画循环

  • 基本语法和用法。

  • 理解为什么 requestAnimationFrame() 比它之前的技术有所改进。

  • 动画循环的常见用例，例如装饰性动画和游戏。

• Web Animations API

  • 基本语法和用法。

  • 理解 Web Animations API 与 CSS 动画属性的关系，以及何时应使用它们。

  • 常见用例。

• Canvas

  • 在概念上理解 <canvas> 元素及其相关 API 的功能。

  • 2D Canvas API 的基本语法和用法。

  • 循环更新 <canvas> 以创建简单的动画或游戏。

资源

• 绘制图形

• Web Animations API

• Canvas 教程

注意:

在此套一致性标准中，最重要的要点是理解通用概念、使用 Web Storage 进行简单的客户端存储任务，以及了解 Cookie 如何被积极和消极地使用。

学习成果

• 理解客户端存储的概念

  • 了解常见的客户端数据存储机制 — Web Storage API、cookies、Cache API 和 IndexedDB API。

  • 关键用例 — 维护重新加载时的状态、持久化登录和用户个性化数据，以及本地/离线工作。

  • 理解与客户端存储相关的负面模式 — 例如，使用 Cookie 进行跟踪/指纹识别。

• 使用 Cookie 存储任意数据，通常由 HTTP 标头控制。

• 使用 Web Storage 进行简单的键值对存储，由 JavaScript 控制。

• 使用 IndexedDB

  • 完整的客户端事务数据库系统。

  • 复杂且很少直接使用。您更可能使用像 dexie.js 这样的库。

• 使用 Cache/Service Workers

  • 理解它们在渐进式 Web 应用 (PWA) 中的基本用法，以及使网站能够离线工作的基本用例。

注意:

IndexedDB 和 Cache API（通常与 Service Workers 一起使用）非常复杂，并且是庞大的主题。现阶段不必详尽理解它们，尽管我们建议您对它们的工作原理有一个基本的了解。

资源

• 什么是 localStorage?, Scrimba 课程合作伙伴

• 客户端存储

• 使用 HTTP Cookie

• 什么是渐进式 Web 应用？