在现代 Web 应用中，视频播放器是不可或缺的一部分。然而，对于视力或听力障碍者，访问这些视频的方式可能会受到很大限制。因此，在设计视频播放器时，应该考虑到无障碍性的问题，以便使更多的用户能够获得更好的用户体验。
下面将介绍如何制作无障碍性高的视频播放器，并提供示例代码。
1. 提供可访问的视频控件
在制作视频播放器时，务必提供可访问的视频控件。这些控件应该允许用户使用屏幕阅读器等辅助设备来访问和操作视频。
以下是提供可访问的视频控件的示例 HTML 代码：
<video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <p>Your browser doesn't support HTML5 video. Here is a <a href="movie.mp4">link to the video</a> instead.</p> </video>
其中，<video> 元素包括一个 controls 属性，使其包含可访问的视频控件，包括播放、暂停、调节音量等。
2. 提供字幕
对于听力障碍者，视频字幕可以提供重要的内容信息。因此，在制作视频播放器时，应该提供相应的字幕。
以下是提供字幕的示例 HTML 代码：
<video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <track src="movie.vtt" kind="subtitles" srclang="en" label="English"> <p>Your browser doesn't support HTML5 video. Here is a <a href="movie.mp4">link to the video</a> instead.</p> </video>
其中，<track> 元素定义了一个字幕轨道，包括字幕文件的 URL 和相关元数据。
3. 支持键盘控制
一些用户可能无法使用鼠标或触摸屏设备访问视频播放器。因此，在制作视频播放器时，应该确保支持键盘控制，以便这些用户能够通过键盘来访问和操作视频播放器。
以下是示例 HTML 代码，支持键盘控制：
-- -------------------- ---- -------
------ ---------
------- --------------- -----------------
------- --------------- -----------------
------- ------- ------- ------- ----- ------ ---- -- - -- --------------------- -- --- --------- ------------
--------
---- ------ ----- ---------- ---
--------
----- ----- - --------------------------------
------------------------------ -----
--------------------------------- ---------------
-------- -------------------- -
------ --------------- -
---- --- -- ----
----------------- -- --
------
---- --- -- -----
----------------- -- --
------
---- --- -- -----
----------------------- -- ---------
-- -------------- -
-------------
- ---- -
--------------
-
------
-
-
---------4. 避免自动播放
自动播放的视频可能会打断用户正在进行的任务或聆听的音频。因此，在制作视频播放器时，应该避免默认情况下自动播放，以便用户有机会自主选择播放视频。
以下是示例 HTML 代码，设置默认不自动播放：
<video controls autoplay="false"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <p>Your browser doesn't support HTML5 video. Here is a <a href="movie.mp4">link to the video</a> instead.</p> </video>
5. 提供视频描述
对于视力障碍者，视频描述可以提供重要的内容信息。因此，在制作视频播放器时，应该提供视频描述。
以下是提供视频描述的示例 HTML 代码：
-- -------------------- ---- -------
------ ---------
------- --------------- -----------------
------- --------------- -----------------
------- ------- ------- ------- ----- ------ ---- -- - -- --------------------- -- --- --------- ------------
---- ------ ---
---
---- -- - ----- ----- --- -- ---- - ------- --- -- ------- --- ----- ----- ----- ---- -- --- -------- --------- -------- --- ------ ------ ------- --- ------ --- ------- --- ----- ---- --- -------
----
--------结论
以上是制作无障碍性高的视频播放器的一些提示和示例代码。通过考虑到无障碍性的问题，可以使更多的用户能够获得更好的用户体验，包括那些视力或听力有限的用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674f02b2e884a3e30f2b9264