Extension:TimedMediaHandler/VideoJS Player

Screenshot of the new player in action
PD Note: When you edit this page, you agree to release your contribution under the CC0. See Public Domain Help Pages for more info.
Example video player

The VideoJS Player is the replacement video player for MediaWiki.

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

You can opt-in to use it on Wikimedia wikis as a desktop Beta Feature by going to your preferences.

Known issuesEdit

  • Subtitles may fail on some files. We dropped support for wikicode markup inside of the subtitles. You are advised to rewrite these subtitles (T224258).
  • Video players in gallery modes like “packed”, “packed-hover” etc are not supported yet (T133500 and others).

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.


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

  • 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.
  • It is difficult to make it work correctly on mobile devices.
  • Had been virtually unmaintained for 8 years.


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 ExampleEdit

// 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">

Advanced configuration with Ogv.js supportEdit

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()
    } );
} );