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

Example audio player with subtitles

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

  Spela/pausa uppspelning av media

  f

  Öppna/stänga helskärmsläge

  m

  Stänga av ljudet

  c / s

  Toggle subtitles on / off

  < / >

  Decrease and increase playback speed

  ← / →

  Skip 5 seconds back / forward

  j / l

  Skip 10 seconds back / forward

  Home / End

  Skip to start / end of video

  , / .

  When paused, skip 1 frame back or forward

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

Kända problem

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>