Video.js (HTML5 Video Player)

Video.js is an HTML5 video and audio player. This module integrates Video.js 10 with Drupal field formatters so file and media fields can be displayed as a Video.js player.

Requirements

The Video.js library (videojs/cdn 10.0.0 or later) is required unless CDN loading is enabled.

Recommended modules

a

• Media (Drupal core) Used for the "Video.js Media Remote Video" formatter.
• Token: Provides a token browser when configuring custom poster or thumbnail URLs.

Installation

Install as you would normally install a contributed Drupal module. For further information, see Installing Drupal Modules.

The module can load Video.js from a CDN if enabled at Administration > Configuration > Media > Video.js. To install the library locally, see:

Module ReadmeVideoJS Docs

Configuration

1. Add a file field (video or audio) to an entity type.
2. In Manage display, choose one of the Video.js formatters:
   • Video.js Video for file/video fields.
   • Video.js Player with fallback sources to use multiple field values as fallback sources in a single player.
   • Video.js Audio for audio file fields.
   • Video.js Media Remote Video for oEmbed remote video fields (ON MEDIA TYPES ONLY!) (YouTube and Vimeo).
3. Configure player settings such as skin, preload, autoplay, loop, muted, poster, and thumbnail.

Video.js Video vs. Player with fallback sources

Both formatters work on file and video fields, but they handle multiple field values differently:

• Video.js Video renders one player per file. If the field allows multiple uploads, each video appears as its own separate player on the page. This should usually be used.

• Video.js Player with fallback sources renders one player for all files in the field. Every uploaded file becomes a source element inside that single player. The browser (via Video.js) tries the sources in order and plays the first format it supports. Use this when the uploads are alternative encodings of the same video, for example MP4, WebM, and Ogg versions of one recording.

Both formatters share the same player settings (skin, preload, autoplay, poster, thumbnail, and so on).

Submodules

Video.js Klaro (videojs_klaro)

Integrates Klaro Cookie & Consent Management with the Video.js remote video formatter. When enabled, it intercepts the videojs_remote template preprocess and applies Klaro contextual consent to supported remote video platforms (e.g. YouTube, Vimeo).

Currently supported provider Vimeo, Youtube

Requirements:

• The Klaro module must be installed and configured with services matching the remote video platforms in use.

Installation:

Enable videojs_klaro at Administration > Extend alongside the main videojs module. No additional configuration is required beyond setting up Klaro services for the relevant video platforms.

Supporting this module

Support DROWL's ♥ FOSS work on this module on OpenCollective!

Drupal and this module are FOSS. However, it takes dedicated people to develop and maintain. And they need YOU to give back!

We're committed to building and maintaining Drupal modules that benefit the entire community.

Supporting us on OpenCollective helps us continue to improve, innovate and contribute to Drupal's future. Every pledge makes a difference!

If this module has helped you, we would be very grateful for your donation to support its further development and maintenance.

Support our FOSS development ♥️

You can also speed up the development of features or bugfixes you'd love to see, by sponsoring and giving back!

Sponsor a feature or bugfix 🚀

Let's make Drupal even better, together!

10.x development proudly sponsored by German Drupal Friends & Companies:

webks: websolutions kept simple (https://www.webks.de)
and
DROWL: Drupalbasierte Lösungen aus Ostwestfalen-Lippe (OWL), Germany (https://www.drowl.de)

Older branches development proudly sponsored by Webotics.io and Dev-Branch