网络媒体技术
多年来,Web 展示、创建和管理音频、视频和其他媒体的能力一直在不断提高。如今,有大量的 API 可供使用,以及 HTML 元素、DOM 接口和其他功能,使我们不仅可以执行这些任务,还可以将媒体与其他技术结合使用,创造出真正令人惊叹的效果。本文列出了各种 API,并提供了链接到您可能发现有助于掌握它们的文档。
参考
HTML
这些文章涵盖了面向媒体开发人员的 HTML 功能。
<audio>
-
<audio>
元素用于在 Web 上下文中播放音频。这些可以作为更复杂媒体的目标隐式使用,或者使用可见控件来控制用户播放音频文件。可以通过 JavaScript 访问为HTMLAudioElement
对象。 <video>
-
<video>
元素是 Web 上下文中视频内容的端点。它可以用来呈现视频文件,或者作为流式视频内容的目标。<video>
也可以作为一种方式将媒体 API 与其他 HTML 和 DOM 技术(例如<canvas>
(用于帧抓取和处理))链接起来。可以通过 JavaScript 访问为HTMLVideoElement
对象。 <track>
-
HTML
<track>
元素可以放置在<audio>
或<video>
元素中,以提供对 WebVTT 格式字幕或字幕轨道的引用,在播放媒体时使用。可以通过 JavaScript 访问为HTMLTrackElement
对象。 <source>
-
HTML
<source>
元素用于<audio>
或<video>
元素中,以指定要呈现的源媒体。可以使用多个源来以不同的格式、大小或分辨率提供媒体。可以通过 JavaScript 访问为HTMLSourceElement
对象。
API
- 媒体功能 API
-
媒体功能 API 允许您确定应用程序或网站正在运行的设备的编码和解码功能。这使您能够实时做出有关使用哪些格式以及何时使用的决策。
- 媒体捕获和流 API
-
API 参考,使您能够在本地和网络上流式传输、录制和处理媒体。这包括使用本地摄像头和麦克风来捕获视频、音频和静止图像。
- 媒体会话 API
-
媒体会话 API 提供了一种自定义媒体通知的方式。它通过提供元数据来实现这一点,用户代理可以为 Web 应用程序正在播放的媒体显示这些元数据。它还提供操作处理程序,浏览器可以使用这些处理程序访问平台媒体键,例如键盘、耳机、遥控器上找到的硬件键,以及移动设备的通知区域和锁定屏幕上找到的软件键。
- 媒体流录制 API
-
媒体流录制 API 允许您捕获媒体流以处理或过滤数据或将其录制到磁盘。
- Web Audio API
-
Web Audio API 允许您实时或对预先录制好的素材生成、过滤和处理声音数据,然后将音频发送到目标,例如
<audio>
元素、媒体流或磁盘。 - WebRTC
-
WebRTC(Web 实时通信)使能够在两个对等体之间通过互联网流式传输实时音频和视频,以及传输任意数据,而无需中间体。
指南
- 在 HTML 中使用音频和视频
-
使用 HTML
<audio>
和<video>
元素的指南。 - 在 HTML 中使用图像
-
向网站添加响应式、可访问且性能良好的图像的指南。
- 可访问的多媒体
-
在本指南中,我们介绍了 Web 设计师和开发人员如何创建对不同能力的人员可访问的内容。这包括在
alt
属性上使用<img>
元素,从字幕到为屏幕阅读器标记媒体。 - Web 上的媒体类型和格式指南
-
Web 上可用于图像、音频和视频媒体的文件类型和编解码器的指南。这包括对哪些格式适用于哪种内容的建议、最佳实践(包括如何提供回退以及如何优先考虑媒体类型),以及每个媒体容器和编解码器的通用浏览器支持信息。
- 流媒体音频和视频
-
本指南介绍了如何流式传输音频和视频,以及您可以利用哪些技术和方法来确保流的最佳质量和/或性能。
- 媒体和 Web Audio API 的自动播放指南
-
媒体或音频的意外自动播放可能会让用户感到意外。虽然自动播放有其用途,但应谨慎使用。为了让用户控制这一点,许多浏览器现在提供了自动播放阻止的形式。本文是关于自动播放的指南,其中包含有关何时以及如何使用它以及如何与浏览器配合使用以优雅地处理自动播放阻止的提示。
- Web Audio 空间化基础知识
-
在 3D 环境中,可能是渲染到屏幕的 3D 场景或使用耳机体验的混合现实体验,音频的执行非常重要,以便听起来像是来自其源的方向。本指南介绍了如何实现这一点。
其他主题
相关的主题可能也值得关注,因为它们可以以有趣的方式与媒体 API 结合使用。
- Canvas API
-
Canvas API 允许您绘制到
<canvas>
中,处理和更改图像的内容。这可以通过多种方式与媒体结合使用,包括将<canvas>
元素设置为视频播放或摄像头捕获的目标,以便您可以捕获和处理视频帧。 - WebGL
-
WebGL 在现有的 Canvas API 之上提供了一个与 OpenGL ES 兼容的 API,使能够在 Web 上进行强大的 3D 图形处理。通过画布,这可以用来向媒体内容添加 3D 图像。
- WebXR
-
WebXR(已取代现已弃用的 WebVR API)是一种提供对创建虚拟现实 (VR) 和增强现实 (AR) 内容的支持的技术。然后,混合现实内容可以显示在设备的屏幕上或使用护目镜或耳机。
- WebVR 已弃用
-
Web 虚拟现实 API 支持 Oculus Rift 或 HTC Vive 等虚拟现实 (VR) 设备,使开发人员能够将用户的姿势和移动转换为 3D 场景中的移动,然后在设备上呈现。WebVR 已被 WebXR 取代,并且很快将从浏览器中删除。