Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 UTC on 18 March 2024, to get $100 off your ticket.
Synopsis
- Video.js is a HTML5-based video player with a built-in Flash fallback for older browsers. This means that videos can be played on nearly all devices and operating systems, provided the right codecs are used.
- This module is a support module for Video.js. It doesn't contain Video.js itself, but integrates it with the File, Link and Video modules after you've installed it.
- Video.js (HTML5 Video Player) connects the file field to the Video.js library.
This page is based on my experience with videojs-7.x-3.x-dev and video-js-4.10.2.
What you need
To test all the features of Video.js, you need three video related files.
- Video file of format MP4 or similar. See Video.js (HTML5 Video Player) - Video file.
- A still image, a "poster" image, to display before the video starts. See Video.js (HTML5 Video Player) - Poster image.
- A WebVTT text track file with a transcription of the speech from the video. See Video.js (HTML5 Video Player) - Text track.
Installation
- I started with drupal 7.32 straight into an empty directory on my ultrabook, an empty database, and a standard install.
- I downloaded and installed the libraries-7.x-2.2 module then created the
sites/all/libraries
directory. - Next I downloaded the Video.js library and expanded the downloaded file into
sites/all/libraries
, giving mesites/all/libraries/video-js/video.js
. - The Video.js add-on module is next. Install in the usual Drupal add-on module way. There is a link from the Video.js entry in the Modules list to the configuration page.
- The README file from the download is displayed in https://www.drupal.org/node/2371415.
Configuration
The configuration page, admin/config/media/videojs
, shows the following settings.
Video.js location
- Set Video.js location to
Libraries API
for testing with the Javascript library you installed in the previous steps. This has the advantage of working when you are offline. (I am in a train inside a tunnel in a remote part of Australia.) - You have the option to specify a different location or to use the Video.js CDN.
Player defaults
You can set these now or forget them. You can set most of these in your video field and fields have their own defaults.
- Player width:
640
- Player height:
360
- Auto-play files on page load
- Loop playback
- Hide controls
- Default subtitle track: No default track
- When you are using VTT subtitle tracks, select which one should be activated by default.
- Preload behavior: Automatic preload
Use caution when combining this option with multiple players on the same page.
Create a content type
- OK, I have an empty site and created a content type with the name
Video
. Save the result and add fields. - I added a field with the label
Video
, the field typeFile
, and I let the widget default toFile
. Save. - In Field settings, I switched on Enable Display field, Files displayed by default, and Public files. I changed Allowed file extensions from
txt
tomp4, webm, mov, ogv
as recommended in the README file. Save field settings.
Poster image
- Your video can have a static image displayed until the video starts. Video.js mentioned a "poster" image. I added an image field, named Video poster, using the defaults for an image field.
- I also use the Imagefield Crop module and will test with that.
Video Text Tracks
- Your video can have a transcript (captions) in the VTT, Video Text Tracks, format. Video.js accepts the VTT file through a field of format File. I added a File field named Video text track.
- Switch on the display and description fields for this file. You will use one of them for the VTT language. I changed Allowed file extensions from
txt
totxt, vtt
.
Comments
Something is missing
I followed these instructions - I think - to the letter. I got to the last part describing the creation of the field that the video is loaded into... and because suspicious. A "file" field... really?
My suspicions where confirmed. The result is as expected; a file DOWNLOAD link. Not a displayed video.
There is absolutely no connection between the field created in the content type and video.js - that I can see.