Extension:TimedMediaHandler/VideoJS Player

From mediawiki.org
Screenshot of the VideoJS player in action

The VideoJS Player is the video player for MediaWiki on Wikimedia projects.

It is based on VideoJS, and has a modern, fast user interface with compatibility with mobile devices and HTML5.

Usage

Example video player
Example audio player

There is both an audio and video player. You can find examples of both players on this page. Once launched you will see a control bar when interacting with the video.

VideoJS controlbar.png

The controls in order from left to right are:

  • VideoJS play pause control.png Play/pause control
  • VideoJS volume control.png Volume control
  • Playback position
  • Remaining playback time
  • VideoJS subtitle control.png Subtitle language selector and subtitle style controls
  • VideoJS resolution control.png Resolution selector
  • VideoJS picture-in-picture control.png Optional Picture-in-Picture control
  • VideoJS fullscreen control.png Fullscreen control
  • VideoJS file description control.png Info button to take you to the file description page

Mouse and keyboard controls

  • Click the play icon above the thumbnail to begin playback of the media file.
  • Right click or middle click the thumbnail to open the file description page
  • Play/Pause the player with a single mouse click inside the player window
  • Double click the player window to enter or leave fullscreen mode
  • The following keyboard controls are available:
    k / spacebar-key
    Play/pause the media playback
    f-key
    Enter/Leave fullscreen
    m-key
    Mute the audio
  • The player is fully keyboard accessible using tab, enter and spacebar keys

Why?

The player that Wikimedia used since 2010 has several significant downsides, which were limiting us in making further improvements.

  • It does not work correctly on mobile devices, which are the majority of our readers now.
  • Not widely used by others.
  • Written before HTML5 video was standardised.
  • Uses its own subtitling system.
  • Written to be compatible with Internet Explorer 6 and used the JavaScript standards of those times.
  • Written before our own JavaScript stack was developed.
  • Had been virtually unmaintained since 2011.

Known issues

  • When a wiki is being switched, for several days you might notice that some pages will show the old player and other pages the new player. This is expected and caused by caching. No action or bug report is required for this.
  • Subtitles may fail on some files. We dropped support for wikicode markup inside of the subtitles. You are advised to rewrite these subtitles (T224258).
  • Audio opens a dialog rather than displayed inline when there is a transcription. This is a deliberate change, that will in future allow us to display transcriptions for audio. Please see phab:T246035.

The video player is still in development, but if you find any problems, please report these on the talk page or file them in Phabricator.

Developers

Developers working on features that use the Video.js player will need to initialize and configure it appropriately. Below is an example of typical usage.

Basic Configuration Example

This is outdated and should be reworked to make use of our player wrappers, which apply consistent options and settings for videojs playback.
// The first argument can be a string ID or a <video> element
var player = videojs( 'my-player-id', {
    controls: true,
    autoplay: false,
    poster: "https://path/to/poster/image"
    sources: [ /* array of source files in various sizes and formats */ ]
} );

The sources can also be provided in the HTML ‎<video> element instead of in JS:

<video class="video-js">
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>

Advanced configuration with Ogv.js support

If you need cross-platform playback of OGG or WebM files (many files in Commons are in these formats), you can use the Ogv.js plugin for Video.js, which is also included in TimedMediaHandler. Example configuration:

var player;

// Load the appropriate modules in ResourceLoader
mw.loader.using( 'ext.tmh.videojs-ogvjs' ).then( function () {
    // Load ogvjs if necessary; when this promise resolves,
    // all necessary code has been loaded
    return mw.OgvJsSupport.loadIfNeeded();
} ).then( function () {
    player = videojs( 'my-player-id', {
        controls: true,
        autoplay: false,
        poster: 'https://path/to/my/image',
        sources: [ /* array of sources */ ],
        
        // Ogv.js-specific configuration
        ogvjs: {
            base: mw.OgvJsSupport.basePath()
        }
    } );
} );