Extensión:TimedMediaHandler/Reproductor VideoJS

Captura de pantalla del nuevo reproductor en pleno uso

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

Está basado en VideoJS y tiene una interfaz de usuario más moderna y rápida con compatibilidad para dispositivos móviles y HTML5.

Usage

Ejemplo del Reproductor de vídeo

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.

The controls in order from left to right are:

•  Play/pause control
•  Volume control
• Playback position
• Remaining playback time
•  Subtitle language selector and subtitle style controls
•  Resolution selector
•  Optional Picture-in-Picture control
•  Fullscreen control
•  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

Problemas conocidos

• Los subtítulos pueden fallar en algunos archivos. Dejamos de admitir la inserción de código wiki dentro de los subtítulos. Se recomienda reescribir estos subtítulos (T224258).
• Audio opens a dialog rather than displayed inline when there is a transcription. Este cambio es deliberado, lo cual nos permitirá a futuro mostrar transcripciones para audio. Por favor véase phab:T246035.

El reproductor de video aún está en desarrollo, pero si encuentra algún problema, infórmelo en la página de discusión o adjúntelo en Phabricator.

Desarrolladores

Developers working on features that use the Video.js player will need to initialize and configure it appropriately. Abajo hay un ejemplo de uso típico.

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