README

新的内容元素支持许多功能

支持两种视频格式：mp4和额外的webm
可以通过流体模板、sass、css和javascript自定义
可以通过可选地包含主视频的不同替代内容来实现可用性
- 可切换的字幕（vtt文件）
- 可切换的手语视频（mp4文件，额外的webm文件）
- 可切换的带有音频描述的替代音频轨道（mp3文件）
- 链接到具有文本替代的页面
- 视频下载链接
支持海报图像
支持数据字段、设置和CSS类，这些来自任何标准内容元素，例如 文本 & 媒体。
- 标题（标题、类型、对齐、日期、链接、副标题）
- 文本（ck-editor、视频位置：左、右、上、下）
- 内容元素布局（布局、框架、前间距、后间距）
基于MediaElement.js和A11y插件的视频播放器
通过键盘、鼠标和触摸控制
键盘焦点高亮
带有wai-aria的屏幕阅读器支持
24种前端语言
视频宽度（50%，100%）和视频位置（相对于文本块）
提供全屏模式
自动适应屏幕宽度

安装

该扩展需要像任何其他TYPO3 CMS扩展一样安装。通过以下方法之一获取扩展。

使用Composer安装

安装扩展的推荐方法是使用Composer。在您的基于Composer的TYPO3项目根目录中，只需执行以下操作：

composer req iundd/a11y-me-video

从git获取最新版本

您可以使用git命令从git获取最新版本。

git clone https://github.com/iundd/a11y_me_video.git

从TYPO3扩展仓库（TER）安装

从扩展管理器获取：切换到模块 Admin Tools > Extensions。
切换到 Get Extensions 并搜索扩展密钥 a11y_me_video。
从仓库安装扩展。

从extensions.typo3.org下载

转到 https://extensions.typo3.org/extension/a11y_me_video 并通过下载zip版本获取当前版本

准备：包含静态TypoScript

该扩展需要一些TypoScript代码，必须将其集成。

切换到您的网站的根页面。
切换到 TypoScript模块 并选择 TypoScript记录。
按下 编辑整个模板记录 按钮，并切换到 高级选项 选项卡。
转到 包含TypoScript集。将 Fluid内容元素 和 可用性视频播放器 添加到 已选项目。
为了使某些CSS类正常工作，您还需要选择 Fluid内容元素CSS（可选）

版本控制

该项目使用语义版本控制，这意味着

错误修复更新（例如，1.0.0 => 1.0.1）仅包括小的错误修复或安全相关的内容，不破坏更改，
次要更新（例如，1.0.0 => 1.1.0）包括新功能和较小的任务，不破坏更改，
主要更新（例如，1.0.0 => 2.0.0）包含破坏性更改，这些更改可以是重构、功能或错误修复。

文本替代

配置和自定义

覆盖模板

EXT:a11y_me_video 使用 Fluid 作为模板引擎。

本文档不会提供关于 Fluid 的所有信息，只会介绍您使用它时所需的最重要内容。您可以在网站包教程中的 Fluid 模板部分中获取更多信息。TYPO3 提供的 Fluid ViewHelper 的完整参考可以在Fluid ViewHelper 参考指南中找到。

使用 TypoScript 常量更改模板

像任何基于 Extbase 的扩展一样，您可以在目录 EXT:a11y_me_video/Resources/Private/ 中找到模板。

如果您想更改模板，请将所需的文件复制到您存储模板的目录中。

我们建议您使用网站包扩展。了解如何创建网站包扩展。

plugin.tx_a11ymevideo {
    view {
        templateRootPath = EXT:mysitepackage/Resources/Private/Extensions/a11y_me_video/Templates/
        partialRootPath = EXT:mysitepackage/Resources/Private/Extensions/a11y_me_video/Partials/
        layoutRootPath = EXT:mysitepackage/Resources/Private/Extensions/a11y_me_video/Layouts/
    }
}

CSS 和 Javascript 资产

CSS 和 Javascript 文件通过 fluid 部分集成 Resources/Private/Partials/Assets.html。

例如。

<f:asset.css identifier="a11yMeVideo_PlayerCss" href="EXT:a11y_me_video/Resources/Public/StyleSheets/videoPlayer.min.css"></f:asset.css>

如有必要，您可以将来自网站包扩展的修改过的文件集成在这里。

例如。

<f:asset.css identifier="a11yMeVideo_PlayerCss" href="EXT:my_extension/Resources/Public/StyleSheets/videoPlayer.min.css"></f:asset.css>

更改 CSS

您可以根据自己的需求调整 CSS。您可以使用现有的 CSS 或 SCSS 文件作为基础。将文件复制到您自己的网站包，并使用替代路径包含它们。

您可以在以下位置找到原始文件

EXT:a11y_me_video/Resources/Public/StyleSheets/
EXT:a11y_me_video/Resources/Private/Scss/

示例：更改视频和控件背景颜色（CSS 或 SCSS）

覆盖 CSS

   /* background color video */
   .a11y-me-videoplayer video {
      background-color: #2b3840;
   }

   /* background color controls */
   .a11y-me-videoplayer.active-controls .mejs__controls:not([style*="display: none"])  {
      background-color: #2b3840;
   }

更改 SCSS 变量（EXT:a11y_me_video/Resources/Private/Scss/_variables.scss）

   $a11y-video-outline-color : white;
   $a11y-video-controls-bg   : #2b3840;

注意：控件的前景与背景之间的颜色对比度（至少）必须为 4.5:1。

JavaScript 源代码

覆盖 TypoScript 设置

更改默认标题类型

此设置确定在后台内容模块中选择默认时使用哪种标题类型。

默认标题类型是 2（= h2 标题）。

   tt_content.a11ymevideo_videoplayer {
       variables {
           defaultHeaderType.value = 2
       }
   }

   tt_content.a11ymevideo_videoplayer2 {
       variables {
           defaultHeaderType.value = 2
       }
   }

向页面添加视频播放器模块

选择 A11y 视频播放器 & 文本 或 A11y 视频播放器 & 文本（链接文件资源）

内容元素：A11y 视频播放器 & 文本

可访问的视频播放器（本地文件资源）

选项卡“常规”

此内容元素支持来自任何标准内容元素的数据字段和设置，例如 文本 & 媒体。

标题（带类型、对齐、日期、链接、副标题）
文本（ck-editor）

选项卡“主视频”

语言（控件、字幕）
- 在此处选择视频播放器的控件和字幕文件（如有）的语言。
  
  默认设置表示将自动使用页面的设置。
  
  您可以从列表中选择另一种语言。只有列表中的语言受支持。
视频位置
- 设置视频相对于可选文本的位置。（左、右、下、上）
视频宽度
- 视频可以占用可用容器宽度的 50% 或 100%。
海报图片
- 请提供海报图片。（例如，与 16:9 相同长宽比的良好的视频快照）
主视频 | mp4
- 请使用 H.264 编码器为 mp4 视频编码。所有当前网络浏览器都可以播放它。因此，这是必需的。
主视频 | webm
- 其他替代视频格式。

选项卡“可访问性”|“替代内容”

您可以在此处指定主视频的替代内容。使用它来提高可访问性。

手语视频 | mp4
- 同步手语视频。
  
  典型手语视频在背景中显示原始视频，在前景中显示手语翻译者。
  
  注意：如果手语视频是主视频，请在主视频选项卡中添加手语视频。
手语视频 | webm
- 附加的视频格式（可选）
  
  注意：如果没有指定mp4视频，此视频将被忽略。
音频描述 | mp3
- mp3格式的音频文件。用作替代音频轨道。
  
  音频轨道包含原始声音和叙述者讲述的附加文本。语音和音频间隙可用于描述为盲人和视力受损者提供的重要视觉信息。
文本替代
- 链接到包含文本替代的页面。
选项
- 添加视频下载链接
- 始终显示控制栏（推荐）

标签外观

此内容元素支持来自任何标准内容元素的数据字段和设置，例如 文本 & 媒体。

布局
框架
之前的空间
之后的空间

所有设置都是可选的。

后端预览

内容元素：A11y视频播放器 & 文本（链接文件资源）

可访问的视频播放器。播放器使用链接文件资源，例如外部链接。

选项卡“常规”

此内容元素支持来自任何标准内容元素的数据字段和设置，例如 文本 & 媒体。

标题（带类型、对齐、日期、链接、副标题）
文本（ck-editor）

选项卡“主视频”

语言（控件、字幕）
- 在此处选择视频播放器的控件和字幕文件（如有）的语言。
  
  默认设置表示将自动使用页面的设置。
  
  您可以从列表中选择另一种语言。只有列表中的语言受支持。
视频位置
- 设置视频相对于可选文本的位置。（左、右、下、上）
视频宽度
- 视频可以占用可用容器宽度的 50% 或 100%。
海报图片
- 请提供海报图片。（例如，与 16:9 相同长宽比的良好的视频快照）
主视频 | mp4
- 请使用 H.264 编码器为 mp4 视频编码。所有当前网络浏览器都可以播放它。因此，这是必需的。
主视频 | webm
- 其他替代视频格式。

选项卡“可访问性”|“替代内容”

您可以在此处指定主视频的替代内容。使用它来提高可访问性。

手语视频 | mp4
- 同步手语视频。
  
  典型手语视频在背景中显示原始视频，在前景中显示手语翻译者。
  
  注意：如果手语视频是主视频，请在主视频选项卡中添加手语视频。
手语视频 | webm
- 附加的视频格式（可选）
  
  注意：如果没有指定mp4视频，此视频将被忽略。
音频描述 | mp3
- mp3格式的音频文件。用作替代音频轨道。
  
  音频轨道包含原始声音和叙述者讲述的附加文本。语音和音频间隙可用于描述为盲人和视力受损者提供的重要视觉信息。
文本替代
- 链接到包含文本替代的页面。
选项
- 添加视频下载链接
- 始终显示控制栏（推荐）

标签外观

此内容元素支持来自任何标准内容元素的数据字段和设置，例如 文本 & 媒体。

布局
框架
之前的空间
之后的空间

所有设置都是可选的。

后端预览

示例文件

抱歉。旧示例文件已不存在。为了更好地理解媒体文件的内容要求，您可以在以下网站上找到一个类似的视频播放器：

https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreie-videos-fuer-alle.

主视频、手语视频和带音频描述的mp3文件必须同步。这意味着它们都具有相同的时序，因此您可以随时轻松切换它们。

典型手语视频在背景中显示原始视频，在前景中显示手语翻译者。

音频描述用作替代音频轨道。音频轨道包含原始声音和叙述者讲述的附加文本。语音和音频间隙可用于描述为盲人和视力受损者提供的重要视觉信息。

MediaElement.Js

基于MediaElement.js和A11y Plugin.js（Aktion Mensch插件）的视频播放器

MediaElements.js
- 主页
- https://github.com/mediaelement/mediaelement
A11y插件（Aktion Mensch插件）

iundd / a11y-me-video

维护者

详细信息

README

新的内容元素支持许多功能

安装

使用Composer安装

从git获取最新版本

从TYPO3扩展仓库（TER）安装

从extensions.typo3.org下载

准备：包含静态TypoScript

版本控制

配置和自定义

覆盖模板

使用 TypoScript 常量更改模板

CSS 和 Javascript 资产

更改 CSS

示例：更改视频和控件背景颜色（CSS 或 SCSS）

JavaScript 源代码

覆盖 TypoScript 设置

更改默认标题类型

向页面添加视频播放器模块

内容元素：A11y 视频播放器 & 文本

选项卡“常规”

选项卡“主视频”

选项卡“可访问性”|“替代内容”

标签外观

后端预览

内容元素：A11y视频播放器 & 文本（链接文件资源）

选项卡“常规”

选项卡“主视频”

选项卡“可访问性”|“替代内容”

标签外观

后端预览

示例文件

MediaElement.Js