Video.js (HTML5 Video Player)

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 me sites/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 type File, and I let the widget default to File. Save.
• In Field settings, I switched on Enable Display field, Files displayed by default, and Public files. I changed Allowed file extensions from txt to mp4, 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 to txt, vtt.