Gadget:TimedMediaHandler/VideoJS Player

Noul video player în acțiune

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

Acesta utilizează VideoJS și are o interfață mai modernă și mai rapidă, care este compatibilă cu dispozitivele mobile și cu HTML5.

Usage

Un exemplu

Example audio player without subtitle popup

Example audio player with subtitles

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

  Play/pause the media playback

  f

  Enter/Leave fullscreen

  m

  Mute the audio

  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

• The player is fully keyboard accessible using Tab ↹, ↵ Enter and Space keys

Probleme cunoscute

Video player-ul este în curs de dezvoltare, așa că dacă găsiți vreo problemă cu acesta, vă rugăm să o raportați pe pagina de discuție sau să completați formularul de pe Phabricator.

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>