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/html 10.0.0 or later) is required unless CDN loading is enabled.

Recommended modules

• 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 instead choose one of the following installation paths:

Composer (recommended)

Add the Video.js library to your project's composer.json (merge the repositories and require entries with your existing configuration):

{
  "repositories": [
    {
      "type": "package",
      "package": {
        "name": "videojs/html",
        "version": "10.0.0-beta.31",
        "type": "drupal-library",
        "extra": {
          "installer-name": "videojs--html"
        },
        "dist": {
          "type": "zip",
          "url": "https://github.com/videojs/v10/releases/download/@videojs/html@10.0.0-beta.31/videojs-html-10.0.0-beta.31.zip"
        }
      }
    }
  ],
  "require": {
    "videojs/html": "10.0.0-beta.31"
  }
}

Then run composer update videojs/html.

Composer Merge Plugin

Alternatively, merge this module's composer.libraries.json with wikimedia/composer-merge-plugin:

1. Require the merge plugin if it is not already installed: composer require wikimedia/composer-merge-plugin

2. In your project composer.json, include this module's composer.libraries.json (ships the videojs/html dependency). Adjust the path if the module lives elsewhere, for example:

   "extra": {
     "merge-plugin": {
       "include": [
         "web/modules/contrib/videojs/composer.libraries.json"
       ]
     }
   }
   

3. Run composer update videojs/html.

Manual installation

1. Download Video.js (videojs--html).
2. Extract it into libraries/videojs--html so assets live under libraries/videojs--html/ and package.json is present.

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.