Erweiterung:TimedMediaHandler/VideoJS Player

Bildschirmfoto des neuen Players während der Nutzung

Der VideoJS Player ist der Videoplayer für MediaWiki, der bei den Wikimedia-Projekten verwendet wird.

Der Player nutzt VideoJS und verfügt über eine moderne sowie schnelle Benutzeroberfläche, die auch mit mobilen Endgeräten und HTML5 kompatibel ist.

Verwendung

Beispielvideo im neuen Player

Beispielaudio im neuen Player

Es gibt sowohl einen Audio- als auch einen Videoplayer. Beispiele für beide Player findest du auf dieser Seite. Nach dem Start siehst du eine Kontrollleiste, wenn du mit dem Video interagierst.

Die Bedienelemente sind in der Reihenfolge von links nach rechts:

•  Wiedergabe/Pause
•  Lautstärke
• Abspielposition
• Verbleibende Wiedergabedauer
•  Untertitel-Sprachauswahl und Untertitel-kontrollen
•  Auswahl der Auflösung
•  Optionale Bild-im-Bild-Steuerung
•  Steuerung im Vollbildmodus
•  Info-Schaltfläche, um die Seite mit der Dateibeschreibung aufzurufen

Maus- und Tastatursteuerung

• Klicke auf das Wiedergabesymbol über der Miniaturansicht, um die Wiedergabe der Mediendatei zu starten.
• Klicke mit der rechten Maustaste oder mit der mittleren Maustaste auf die Miniaturansicht, um die Seite mit der Dateibeschreibung zu öffnen.
• Wiedergabe/Pause des Players mit einem einzigen Mausklick innerhalb des Player-Fensters
• Doppelklicke auf das Player-Fenster, um den Vollbildmodus aufzurufen oder zu verlassen.
• Die folgenden Tastatursteuerungen sind verfügbar:

  k / spacebar-key

  Wiedergabe/Pause der Medienwiedergabe

  f-key

  Vollbild aufrufen/verlassen

  m-key

  Stummschalten des Tons

• Der Player ist über die Tabulator-, Eingabe- und Leertaste vollständig über die Tastatur zugänglich.

Bekannte Probleme

• Untertitel werden bei manchen Dateien nicht angezeigt. Die Unterstützung von Wikicode-Markup für die Untertitel wurde eingestellt. Du solltest diese Untertitel daher erneut erstellen (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 T246035.

Der Video Player ist im Entwicklungsstadium. Falls Dir Probleme auffallen, melde sie bitte auf der Diskussionsseite (in englischer Sprache) oder erstelle eine Meldung im Phabricator (ebenfalls in englischer Sprache).

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