Overview
The Drupal VideoJS Media block module is an ADA/508 compliant media player that works well with the Media, Media Library, and Layout Builder modules in Drupal core. VideoJS is a very mature, open-source video library primarily sponsored by Brightcove, with a wealth of plugins.
Features
- Compliant with the Americans with Disabilities Act (ADA) standards for video, by providing configurable and themable closed-captions support.
- The VideoJS Media block module creates a custom blocktype with three fields to input a Media file, an optional poster image, and an optional .vtt subtitle file. To please site builders and Content Managers, custom VideoJS Media blocks are videos with controls that fit anywhere a Block can go.
- To please developer/themers, the sole .twig file can be customized. Fields can be added, removed and changed yourself when managed with Drupal Configuration Management.
- Responsive, with no need to input height or width values.
- Besides the default player skin, four more are included. And of course it is easy to customize skins.
- Developed around the core Media and Media Library modules. No contributed modules are necessary.
- Media can be uploaded files or hosted remotely on either YouTube or Vimeo.
- The Picture-in-Picture (PiP) option allows you to watch videos in a window that floats above all other windows.
Recommended modules
Media Library, Layout Builder, both of which are part of Drupal core.
Requirements
The core Media module is required, and NPM must be installed on the server.
Also required are the patches resulting from the thread below, until a patched release of Drupal core becomes available. This issue also limits the module to Drupal 10 websites and above.
Known problems
Support for mp3 audio files requires further logic to be written into the .twig file. Automatic mime detection logic should also be written too. Doing these things will allow for supporting all of the formats that VideoJS supports.
Instructions
Upon installation, from within the module's root folder, you must install NPM related libraries with the 'npm install', or 'npm update' commands. Over time, you'll need to keep these libraries up-to-date using NPM, or (NVM which I've only been studying recently).
Create a new custom VideoJS Media block at /block/add/videojs_media_block. The media field is required, while the poster and subtitle fields are optional.
New VideoJS Media blocks will be listed at /admin/structure/block/block-content. If your website uses a great many videos, you might be able to use Views, exposed filters, taxonomies, etc. to create a better panel for Content Managers to sort through.
Place your custom blocks anywhere at /admin/structure/block or use Layout Builder.
If you're using remotely-hosted video, you might need to create a CORS exception for either YouTube or Vimeo.
Credits
This module wouldn't be possible without the recent development taking place at this thread:
