PHPackages                             iundd/a11y-me-video - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. iundd/a11y-me-video

ActiveTypo3-cms-extension[Image & Media](/categories/media)

iundd/a11y-me-video
===================

Accessible video player based on MediaElement.js, A11y Plugin and Fluid. The new content elements support mp4, webm, subtitles, sign language video, audio description, poster image and text alternative. Please support accessibility for all.

3.0.0(1y ago)122.3k↓27.3%1[1 issues](https://github.com/iundd/a11y_me_video/issues)GPL-2.0-or-laterPHP

Since May 15Pushed 1y ago1 watchersCompare

[ Source](https://github.com/iundd/a11y_me_video)[ Packagist](https://packagist.org/packages/iundd/a11y-me-video)[ RSS](/packages/iundd-a11y-me-video/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (16)Versions (20)Used By (0)

Accessible video player based on MediaElement.js, A11y Plugin and Fluid.
========================================================================

[](#accessible-video-player-based-on-mediaelementjs-a11y-plugin-and-fluid)

### The new content element supports many features:

[](#the-new-content-element-supports-many-features)

- supports two video formats: mp4 and additional webm
- customizable through fluid templates, sass, css and javascript
- supports accessibility by being able to **optionally** include different alternatives to the main video
    - switchable subtitles (vtt file)
    - switchable video with sign language (mp4 file, additional webm file)
    - switchable alternative audio track with audio description (mp3 file)
    - link to a page with text alternative
    - video download links
- supports poster image
- supports data fields, settings and CSS classes, which are known from any standard content elements e.g. *Text & Media*.
    - header (header, type, align, date, link, subheader)
    - text (ck-editor, video position: left, right, above, below)
    - content element layout (layout, frame, space before, space after)
- video player based on MediaElement.js and A11y plugin
- control via keyboard, mouse and touch
- keyboard focus highlight
- screen reader support with wai-aria
- 24 frontend languages
- video width (50%,100%) and video position (relative to text block)
- full screen mode available
- automatically adapts to the screen width

---

[![video player in frontend view!](Documentation/Images/VideoPlayerFrontend2.png)](Documentation/Images/VideoPlayerFrontend2.png)

---

URL**Repository**[https://github.com/iundd/a11y\_me\_video](https://github.com/iundd/a11y_me_video)**Read online****TER**[https://extensions.typo3.org/extension/a11y\_me\_video](https://extensions.typo3.org/extension/a11y_me_video)Installation
------------

[](#installation)

The extension needs to be installed like any other TYPO3 CMS extension. Get the extension by one of the following methods.

### Installation using composer

[](#installation-using-composer)

The recommended way to install the extension is by using [Composer](https://getcomposer.org/). In your composer based TYPO3 project root, just do

```
composer req iundd/a11y-me-video
```

### Latest version from git

[](#latest-version-from-git)

You can get the latest version from git by using the git command:

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

### Installation from TYPO3 Extension Repository (TER)

[](#installation-from-typo3-extension-repository-ter)

- **Get it from the Extension Manager:** Switch to the module `Admin Tools > Extensions`.
- Switch to `Get Extensions` and search for the extension key **a11y\_me\_video**.
- Install the extension from the repository.

### Download from extensions.typo3.org

[](#download-from-extensionstypo3org)

- Go to [https://extensions.typo3.org/extension/a11y\_me\_video](https://extensions.typo3.org/extension/a11y_me_video)and get the current version by downloading the zip version

### Preparation: Include static TypoScript

[](#preparation-include-static-typoscript)

The extension requires some TypoScript code, which must be integrated.

1. Switch to the root page of your site.
2. Switch to the **TypoScript module** and select the **TypoScript record**.
3. Press the **Edit the whole template record** button and switch to the tab **Advanced Options**.
4. Go to **Include TypoScript sets**. Add **Fluid Content Elements** and **Accessible Video Player** to **Selected Items**.
5. For some css classes to work, you also need to select **Fluid Content Elements CSS (optional)**

[![screen shot of including static TypeScript!](Documentation/Images/TemplateInclude.png)](Documentation/Images/TemplateInclude.png)

### Versioning

[](#versioning)

This project uses [semantic versioning](https://semver.org) which means that

- **bugfix updates** (e.g. 1.0.0 => 1.0.1) just include small bugfixes or security relevant stuff without breaking changes,
- **minor updates** (e.g. 1.0.0 => 1.1.0) include new features and smaller tasks without breaking changes and
- **major updates** (e.g. 1.0.0 => 2.0.0) contain breaking changes which can be refactorings, features or bugfixes.

Textalternative

Configuration und Customisation
-------------------------------

[](#configuration-und-customisation)

### Overriding templates

[](#overriding-templates)

**EXT:a11y\_me\_video** is using Fluid as template engine.

This documentation won't bring you all information about Fluid but only the most important things you need for using it. You can get more information in the section [Fluid templates of the Sitepackage tutorial](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/FluidTemplates/). A complete reference of Fluid ViewHelpers provided by TYPO3 can be found in the [Fluid ViewHelper Reference](https://docs.typo3.org/other/typo3/view-helper-reference/main/en-us/)

#### Change the templates using TypoScript constants

[](#change-the-templates-using-typoscript-constants)

Like any Extbase based extension, you can find the templates in the directory `EXT:a11y_me_video/Resources/Private/`.

If you want to change a template, copy the desired files to the directory where you store the templates.

We suggest that you use a sitepackage extension. Learn how to create a [sitepackage extension](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/).

```
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 and Javascript Assets

[](#css-and-javascript-assets)

CSS and Javascript files are integrated via the fluid partial `Resources/Private/Partials/Assets.html`.

e.G.

```

```

If necessary, you can integrate your own modified files from your site package extension here.

e.G.

```

```

#### Change CSS

[](#change-css)

You can adapt the CSS to your own needs. You can use the existing CSS or SCSS files as base. Copy the file to your own site package and include them with the alternative path.

You can find the original files here:

- EXT:a11y\_me\_video/Resources/Public/StyleSheets/
- EXT:a11y\_me\_video/Resources/Private/Scss/

##### Example: Change background color of video and controls (css or scss)

[](#example-change-background-color-of-video-and-controls-css-or-scss)

override 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;
   }
```

change scss variables (EXT:a11y\_me\_video/Resources/Private/Scss/\_variables.scss)

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

```

**Note**:The color contrast (foreground to background) for controls must be at least 4.5:1.

- [Contrast Checker](https://webaim.org/resources/contrastchecker)
- [WCAG Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)
- [WCAG Criterion 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast)

##### Javascript Sources

[](#javascript-sources)

JavaScript source file(s)DescriptionEXT:a11y\_me\_video/Resources/Public/JavaScript/Vendor/mediaelement/build/mediaelement-and-player.jsMediaElements.js playerEXT:a11y\_me\_video/Resources/Public/JavaScript/Vendor/mediaelement/build/lang.advanced/\*.jsextended language files for playerEXT:a11y\_me\_video/Resources/Public/JavaScript/Vendor/mediaelement-plugins/dist/a11y/a11y.jsa11y plugin for subtitles und audio descriptionEXT:a11y\_me\_video/Resources/Public/videoPlayer.jsstarts init mediaelement players & some fixes### Override TypoScript settings

[](#override-typoscript-settings)

#### Change default header type

[](#change-default-header-type)

This setting determines which heading type is used when selecting *default* in the backend content module.

The default header type is 2 (= h2 header).

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

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

```

[![screen shot of header type!](Documentation/Images/HeaderType.png)](Documentation/Images/HeaderType.png)

Add video player module to a page
---------------------------------

[](#add-video-player-module-to-a-page)

Select **A11y Video Player & Text** or **A11y Video Player & Text (linked file resources)**:

[![create new content element!](Documentation/Images/NewContentElement.png)](Documentation/Images/NewContentElement.png)

Content-Element: A11y Video Player & Text
---------------------------------------------

[](#content-element-a11y-video-player--text)

Accessible video player (local file resources)

### Tab General

[](#tab-general)

This content element supports data fields und settings, which are known from any standard content elements e.g. *Text & Media*.

- Header (with Type, Align, Date, Link, Subheader)
- Text (ck-editor)

[![screen shot of tab general!](Documentation/Images/VideoPlayerTabGeneral.png)](Documentation/Images/VideoPlayerTabGeneral.png)

### Tab Main Video

[](#tab-main-video)

- Language (controls, subtitles)
    - Select the language of the controls and the subtitles file (if available) of the video player here.

        The *Default* setting means that the settings on the page are used automatically.

        You can choose another language from the list. Only the languages in the list are supported.
- Video position
    - Set the position of the video relative to the optional text. (left, right, below, above)
- Video width
    - The video can take up 50% or 100% of the available container width.
- Poster image
    - Please provide a poster image. (e.g. a good video snapshot with the same aspect ratio 16:9)
- Main video | mp4
    - Please use the codec H.264 for the mp4 video. All current web browsers can play this. This video is therefore mandatory.
- Main video | webm
    - Video in additional alternative video format. (optional)

[![screen shot of tab main video!](Documentation/Images/VideoPlayerTabMainVideo.png)](Documentation/Images/VideoPlayerTabMainVideo.png)

### Tab Accessibility | Alternatives

[](#tab-accessibility--alternatives)

Here you can specify alternatives to the main video. Use it to improve accessibility.

- Video with sign language | mp4
    - Synchronous video with sign language.

        A typical sign language video shows the original video in the background and the sign language interpreter in the foreground.

        Note: If the sign language video is the main video, then please use the Main Video tab for the sign language video.
- Video with sign language | webm
    - Video in additional alternative video format (optional)

        Note: This video will be ignored if you don't specify a mp4 video.
- Audio description | mp3
    - Audio file in mp3 format. Used as an alternative audio track.

        The audio track contains the original sound and additional text spoken by a narrator. Speech and audio gaps can be used to describe additional important visual information for blind and visually impaired people.
- Text alternative
    - Link to a page with text alternative.
- Options
    - Add links for video download
    - Always show control bar (recommended)

[![screen shot of tab accessibility and alternatives!](Documentation/Images/VideoPlayerTabAccessibility.png)](Documentation/Images/VideoPlayerTabAccessibility.png)

### Tab Appearance

[](#tab-appearance)

This content element supports data fields und settings, which are known from any standard content elements e.g. *Text & Media*.

- Layout
- Frame
- Space Before
- Space After

All settings are optional.

[![screen shot of tab accessibility and alternatives!](Documentation/Images/VideoPlayerTabAppearance.png)](Documentation/Images/VideoPlayerTabAppearance.png)

### Backend Preview

[](#backend-preview)

[![screen shot of backgend preview!](Documentation/Images/VideoPlayerBEPreview.png)](Documentation/Images/VideoPlayerBEPreview.png)

---

---

Content-Element: A11y Video Player & Text (linked file resources)
---------------------------------------------------------------------

[](#content-element-a11y-video-player--text-linked-file-resources)

Accessible video player. The player uses linked file resources, for example external links.

### Tab General

[](#tab-general-1)

This content element supports data fields und settings, which are known from any standard content elements e.g. *Text & Media*.

- Header (with Type, Align, Date, Link, Subheader)
- Text (ck-editor)

[![screen shot of tab general!](Documentation/Images/VideoPlayer2TabGeneral.png)](Documentation/Images/VideoPlayer2TabGeneral.png)

### Tab Main Video

[](#tab-main-video-1)

- Language (controls, subtitles)
    - Select the language of the controls and the subtitles file (if available) of the video player here.

        The *Default* setting means that the settings on the page are used automatically.

        You can choose another language from the list. Only the languages in the list are supported.
- Video position
    - Set the position of the video relative to the optional text. (left, right, below, above)
- Video width
    - The video can take up 50% or 100% of the available container width.
- Poster image
    - Please provide a poster image. (e.g. a good video snapshot with the same aspect ratio 16:9)
- Main video | mp4
    - Please use the codec H.264 for the mp4 video. All current web browsers can play this. This video is therefore mandatory.
- Main video | webm
    - Video in additional alternative video format. (optional)

[![screen shot of tab main video!](Documentation/Images/VideoPlayer2TabMainVideo.png)](Documentation/Images/VideoPlayer2TabMainVideo.png)

### Tab Accessibility | Alternatives

[](#tab-accessibility--alternatives-1)

Here you can specify alternatives to the main video. Use it to improve accessibility.

- Video with sign language | mp4
    - Synchronous video with sign language.

        A typical sign language video shows the original video in the background and the sign language interpreter in the foreground.

        Note: If the sign language video is the main video, then please use the Main Video tab for the sign language video.
- Video with sign language | webm
    - Video in additional alternative video format (optional)

        Note: This video will be ignored if you don't specify a mp4 video.
- Audio description | mp3
    - Audio file in mp3 format. Used as an alternative audio track.

        The audio track contains the original sound and additional text spoken by a narrator. Speech and audio gaps can be used to describe additional important visual information for blind and visually impaired people.
- Text alternative
    - Link to a page with text alternative.
- Options
    - Add links for video download
    - Always show control bar (recommended)

[![screen shot of tab accessibility and alternatives!](Documentation/Images/VideoPlayer2TabAccessibility.png)](Documentation/Images/VideoPlayer2TabAccessibility.png)

### Tab Appearance

[](#tab-appearance-1)

This content element supports data fields und settings, which are known from any standard content elements e.g. *Text & Media*.

- Layout
- Frame
- Space Before
- Space After

All settings are optional.

[![screen shot of tab accessibility and alternatives!](Documentation/Images/VideoPlayerTabAppearance.png)](Documentation/Images/VideoPlayerTabAppearance.png)

### Backend Preview

[](#backend-preview-1)

[![screen shot of backgend preview!](Documentation/Images/VideoPlayer2BEPreview.png)](Documentation/Images/VideoPlayer2BEPreview.png)

Examples File
-------------

[](#examples-file)

**Sorry. The old example files no longer exist. For a better understanding of the content requirements for the media files, you will find a similar video player on the following website:**

.

The main video, the sign language video and the mp3 file with audio description must be in sync. This means that they all have the same timeline, so that you can easily switch between them at any time.

A typical sign language video shows the original video in the background and the sign language interpreter in the foreground.

The audio description is used as an alternative audio track. The audio track contains the original sound and additional text spoken by a narrator. Speech and audio gaps can be used to describe additional important visual information for blind and visually impaired people.

MediaElement.Js
---------------

[](#mediaelementjs)

Video player based on MediaElement.js and A11y Plugin.js (Aktion Mensch Plugin):

- MediaElements.js
    - [Homepage](https://www.mediaelementjs.com)
    -
- A11y Plugin (Aktion Mensch Plugin)
    - [Videos für alle (german)](https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreier-videoplayer)
    -
    -

###  Health Score

31

—

LowBetter than 68% of packages

Maintenance13

Infrequent updates — may be unmaintained

Popularity29

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 93.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~56 days

Recently: every ~64 days

Total

15

Last Release

671d ago

Major Versions

1.0.9 → 2.0.02023-10-26

1.0.10 → 2.0.12024-06-10

2.0.2 → 3.0.02024-07-10

### Community

Maintainers

![](https://www.gravatar.com/avatar/b0de6c70ef01e2c4aeee1f16e5b678e5db9f8d2affaa36958f945ac2ac7c6d88?d=identicon)[iundd](/maintainers/iundd)

---

Top Contributors

[![iundd](https://avatars.githubusercontent.com/u/104452583?v=4)](https://github.com/iundd "iundd (31 commits)")[![creativekallol](https://avatars.githubusercontent.com/u/37875495?v=4)](https://github.com/creativekallol "creativekallol (2 commits)")

---

Tags

videoaccessibilityTYPO3 CMScontent elementsVideo player

###  Code Quality

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/iundd-a11y-me-video/health.svg)

```
[![Health](https://phpackages.com/badges/iundd-a11y-me-video/health.svg)](https://phpackages.com/packages/iundd-a11y-me-video)
```

###  Alternatives

[fluidtypo3/vhs

This is a collection of ViewHelpers for performing rendering tasks that are not natively provided by TYPO3's Fluid templating engine.

1954.1M49](/packages/fluidtypo3-vhs)[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

63991.3k4](/packages/netresearch-rte-ckeditor-image)[typo3/testing-framework

The TYPO3 testing framework provides base classes for unit, functional and acceptance testing.

675.0M775](/packages/typo3-testing-framework)[bk2k/bootstrap-package

Bootstrap Package delivers a full configured frontend theme for TYPO3, based on the Bootstrap CSS Framework.

357891.4k72](/packages/bk2k-bootstrap-package)[in2code/in2publish_core

Content publishing extension to connect stage and production server

40135.8k](/packages/in2code-in2publish-core)[pagemachine/typo3-formlog

Form log for TYPO3

23225.3k6](/packages/pagemachine-typo3-formlog)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)