Tillägg:TimedMediaHandler/VideoJS Player

Skärmdump på när den nya spelaren används

VideoJS Player är videospelaren för MediaWiki på Wikimedias projekt.

Den baseras på VideoJS, och har ett modernt, snabbt gränssnitt med stöd för mobila enheter och HTML5.

Användning

Exempelspelare

Exempelljudspelare

Det finns både en ljud- och videospelare. Det finns exempel på båda spelarna på den här sidan. När den startats får man se en kontrollruta när man interagerar med videon.

Kontrollerna från vänster till höger är:

•  Spela/pausa
•  Volym
• Uppspelning
• Kvarvarande speltid
•  Språkväljare och stilalternativ för undertexter
•  Upplösning
•  Valfri bild-i-bild
•  Helskärm
•  Informationsknapp som tar dig till filsidan

Mus- och tangentbordskontroll

• Klicka på ikonen för att spela ovanför miniatyren för att spela upp mediefilen.
• Högerklicka eller mellanklicka på förhandsvisningen för att öppna filsidan
• Spela/pausa spelare genom att klicka med musen inuti spelarens fönster
• Dubbelklicka inuti spelarfönstret för att öppna eller stänga helskärmsläge
• Följande tangentbordsgenvägar finns:

  k / mellanslag

  Spela/pausa uppspelning av media

  f-tangenten

  Öppna/stänga helskärmsläge

  m-tangenten

  Stänga av ljudet

• Spelaren kan helt styras från tangentbordet med tangenterna tab, enter och mellanslag

Kända problem

• Undertext kanske saknas i vissa filer. Vi avslutade stöd för wikitext i undertexten 2022. Vi råder dig att skriva om de här undertexterna (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. Se T246035.

Videospelaren utvecklas fortfarande, men om du upplever några problem, får du gärna rapportera dem på diskussionssidan eller skicka in dem till Phabricator.

Utvecklare

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