videojs_mediablock

Overview

The VideoJS Mediablock module is an ADA/508 compliant, Responsive media player that works well with the Media and Media Library modules in Drupal core. VideoJS is a very mature, open-source video library primarily sponsored by Brightcove, with a wealth of plugins.

Without the use of a mediaplayer as this module provides, by default, visitors to your website will experience audio/video media displayed using whatever internet client-browser is in-use, and under its own negotiated terms. This module provides Drupal site builders and developers complete control while delivering ease-of-use to content managers.

Features

• Coming soon: A companion analytics module that works with both Google Analytics and Matomo.
• New: Support for every format the VideoJS library supports
• New: Inclusion of Mobile UI for Video.js.
• New: A demonstration web page
• New: The poster image field is now a Media Library image field
• Compliant with the Americans with Disabilities Act (ADA) standards for video, by providing configurable, themable, and multilingual closed-captions support.
• The VideoJS Mediablock module creates a custom blocktype with three fields to input a Media file, an optional poster image, and an optional subtitle file.
• Responsive, with no need to input height or width values. Simply input a media source -- possibly YouTube.
• Support for Drupal's Single Directory Component theming.
• Remote hosting is supported as well as local server hosting.
• Videos hosted on YouTube are supported.
• Several hosting options managed via a single AJAX interface.
• Views support
• DrupalCMS support
• Granular permissions to restrict any of these Media fields
• Locally hosted audio
• Locally hosted video
• Remotely hosted audio
• Remotely hosted video
• YouTube
• Multi-player support, in that only a single player on a page can play at any one time. Clicking any player makes it active and pauses all other players.
• Hotkeys:
• Space bar toggles play/pause.
• Right and Left Arrow keys seek the video forwards and back.
• Up and Down Arrow keys increase and decrease the volume.
• M key toggles mute/unmute.
• F key toggles fullscreen off and on.
• Double-clicking with the mouse toggles fullscreen off and on.
• Number keys from 0-9 skip to a percentage of the video. 0 is 0% and 9 is 90%.
• Mobile UI for Video.js.
• Touch controls:
• Double-tap the left side of the player to rewind ten seconds
• Double-tap the right side of the player to fast-forward ten seconds
• Single-tap the screen to show a play/pause toggle
• Fullscreen control:
• Rotate to landscape to enter Fullscreen
• Lock to fullscreen on rotate
• Always lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)
• Besides the default player theme, four more are available. And of course it is easy to customize media player themes.

  For example, https://www.thrashermagazine.com uses a custom media player theme for their older videos. Like this one. Please note, https://www.thrashermagazine.com is using a completely different, commercial media player, not this free, open-source Drupal VideoJS Mediablock module.

• Do you prefer using Fields instead of Blocks? Then use this module with the very popular Block Field module.
• Developed around the core Media and Media Library modules.

Required modules

Drupal core modules: Media Library, Config, Field, Block Content, Serialization

Drupal contrib module: File Upload Secure Validator

Other Requirements

NPM must be installed on the server.

The php library fileinfo must be installed on the server.

Drupal 10.3 or higher is necessary, OR this patch is required for Drupal versions 10.0 - 10.2. More information about the patched issue is here:

• Issue 3062376: Template suggestions for custom block view modes

Instructions

Differences between Drupal 10 & Drupal 11

Drupal 10.0, 10.1, and 10.2 must be patched or this module will not
function. Drupal 10.3 and Drupal 11 do not need to be patched.

Drupal 10 requires the Drupal core SDC (experimental) module to be
installed for any custom theming. There is no SDC module in Drupal 11
because that code has been implemented directly into core Drupal.

Installation

Upon installation, from within the module's root folder, you must install NPM related libraries with the 'npm install', 'npm clean install', or 'npm update' commands. Over time, you'll need to keep these libraries up-to-date using NPM.

Navigate to /admin/config/media/file_upload_secure_validator. Copy the following lines to ensure filetype upload security, adding them to the bottom of the list:

video/quicktime,video/mp4,video/x-m4v,video/ogg,video/webm,video/x-flv,video/x-f4v

audio/x-aac,audio/x-flac,audio/x-mpeg,audio/mpeg,audio/mp4,audio/ogg,application/x-ogg,audio/vorbis,audio/x-wav

text/vtt,text/plain

Usage

Create a new custom VideoJS Mediablock at /block/add/videojs_mediablock. The media field is required, while the poster and subtitle fields are optional.

Note: If you are using Drupal CMS, you might be accessing this module at /block/add.

Drupal CMS has no content blocks by default, whereas Drupal core has a
Basic content block by default and this module forces users to choose
between those two options on the /block/add path in Drupal core.

New VideoJS Mediablocks will be listed at /admin/structure/block/block-content.

Place your custom blocks anywhere at /admin/structure/block or use Views or Layout Builder.

To use with Drupal Views:

1. Create a Content Block view.
2. Filter using VideoJS Mediablocks or taxonomies or both as desired.
3. Change the format from Content block view mode to Fields.
4. Add a Rendered Entity field
5. Delete all un-used, undesirable fields from the view, such as the default description field.

Theming VideoJS Mediablock with Single Directory Components

To custom theme the VideoJS Mediablock module (which uses Single Directory Components) from your theme directory:

1. Create a directory structure in your theme that mirrors the module's components
2. Override specific component player files with your custom versions

Basic Steps

1. In your theme directory, create a folder structure like:

   your-theme/
   └── components/
       └── videojs_mediablock/
           └── player/

2. Copy only the specific component player files you want to modify from the module to your theme

3. Make your customizations in these files

4. Drupal will automatically use your theme's versions of these components instead of the module's originals

This approach allows you to maintain clean separation between the module and your custom theme while precisely targeting just the components you want to change.

• Interactive mediaplayer theme playpen

Roadmap

• 2.2.x will be supported for a while if anyone submits an issue.
• 2.3.x is the current stable version.
• The 2.4.x branch supports every streaming format and media type the VideoJS library supports. It also includes a better smartphone user interface and updates upstream NPM libraries for security reasons.

You can buy me a coffee ☕ if you're so inclined -- I'll be grateful.