泛在可用媒体播放器

来源：Demuxed 2021 主讲人：Christian Pillsbury 内容整理：付一兵 在本次演讲中，作者概述了制作一个基于浏览器的泛在可用媒体播放器的主要考虑因素。核心是要求语义一致，对非技术用户和视频开发者都有意义，并为常见的使用案例建立一些最佳实践和参考实现。

目录

• 什么是泛在可用媒体播放器
• 键盘交互
• Accessible Rich Internet Applications（ARIA）
• 播放器设计与细节
• 后续探索

什么是泛在可用媒体播放器

我们期望的媒体播放器应该是能被尽可能多的用户使用，不管他们处于何种环境，而不是假设每个用户以完全相同的方式与媒体播放器交互。如何实现？我们分解成了三个步骤。

键盘交互

• 组件应被用户感知到
• 确保选项卡导航有效且有意义
• 控件对于用户来说是可理解的

有很多类似键盘的辅助技术模拟键盘交互或者依赖键盘交互，这就是为什么这一点很重要，人们可能会使用嘴棒、头棒，甚至用眼睛跟踪的虚拟键盘。此外，屏幕阅读器和语音识别工具等其他辅助技术的一些核心功能也将依赖键盘交互和实现。

Accessible Rich Internet Applications（ARIA）

ARIA是对 HTML 的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术，是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用的一套机制。ARIA 的核心是一系列属性，允许屏幕阅读器和其他辅助技术识别组件并与之交互，与 role 和 aria label 属性配合使用。苹果公司的 Voiceover screen reader 就是一个很好的实际例子。

当你解决以上两步时，应该用一些内置或第三方的工具来测试。

不同平台的测试工具

播放器设计与细节

对播放器的控制都是类似的，无论媒体格式、时代、物理设备、地区，甚至有国际标准。我们实际上可以使用标准的视觉和点击设计来推断合适的泛在可用设计，因为它们实际上都是从物理设计中提取的。

Media Chrome 是最初由 Steve Heffernan 开发的组件，无论使用的是哪种特定的播放器或UI框架，它们都将起作用。使用苹果的 Voiceover screen reader 同样可以展示如何通过 Media Chrome使用标签和键盘交互，并获得一系列反馈。

这些组件的设计实际上是基于是物理设计的隐喻，以按钮为例，多数组件都被设计为按钮，但这可能会产生误导，可能不会告诉你足够的信息，因为按钮起作用有很多种形式，像瞬时开关，锁定开关，交替开关，这些控制方法被对应到控制不同的功能，以符合人们的心理预期。

• 瞬时按钮

在播放器中，当你向前或向后搜索时，它们是瞬时按钮，因为你点击它们，一个动作发生，再次点击它们，同样的动作发生。因此，通过ARIA来表示的方法是将它们标识为按钮(role = "button")，并将标签具体标识为动词(aria-label = "VERB")。

• 开关按钮

一个锁定按钮的例子是关闭字幕按钮，我们可以确定这是一个锁按钮是因为它在视觉上表现为按下或未按下，一般来说，锁定按钮代表的是打开或关闭的东西。因此在这种情况下，我们想要使用的不是按钮角色，而是开关角色（role = "switch"），不是使用“向前搜索30秒（seek forward 30 seconds）”这样的动词，而是使用“封闭字幕（closed captions）”这样的名词。(aria-label = "NOUN", aria-checked = "true|false")

• 交替按钮

交替按钮不是表示某事物处于开启或关闭状态，其中一些可以建模为全屏打开、全屏关闭或静音打开、静音关闭，但我实际上认为这不那么直观，这不是物理设计实际告诉我们的。因此，如果你把播放和暂停作为一个具体的例子来看这些图标，你会看到的不是按钮代表按下或未按下的东西，而是一个变化的图标，这意味着将要采取的行动正在变化，并由该图标代表。例如，当按钮有播放图标时，如果我按下它，这意味着它将播放视频。然后显示暂停按钮图标。如果我按下它，它将暂停视频。所以，在这种情况下，我们想把它也表示为一个按钮，但在这里，我们希望它仍然使用动词，就像我们对一个瞬间按钮，但不是一个动词，它将以一种与所表示的图标对应的方式改变。

• 交替锁定按钮

播放速率控制的建模更像是一个交替锁定按钮。它与旧设备的菜单按钮类似，可以让你按一个菜单，然后进入一个菜单状态。比如说，一个汽车音响，你按下一个按钮，它会显示“base”，你再按一次按钮，它会显示“fade”，你再按一次按钮，它会显示“balance”。同样，这些都是名词而不是动词，但它们也会随着时间的推移而变化，如当前播放速率1.25，当前播放速率1.5，等等。

这是一种深入的研究，但我们一直在探索和实现除按钮外类似的原理。我们还添加了一些仅显示组件，例如确保加载指示器实际上是活动区域。之所以这么做是因为用户，尤其是没有视力的用户可能不知道他们的视频停止发声的原因。许多播放器无法向用户指示播放器正在后台加载。

后续探索

• 更好的跨浏览器一致性
• 播放速率建模为旋转按钮
• 用户帮助和帮助菜单
• 用更多的辅助技术和设备来测试

最后附上演讲视频：

http://mpvideo.qpic.cn/0bc35mab2aaa6uamhxzfefrfb26ddxvqahia.f10002.mp4?dis_k=51ba51685e7d9ed3eb9cf53e1f7cc9a0&dis_t=1649675134&vid=wxv_2299428034837577730&format_id=10002&support_redirect=0&mmversion=false