Расширение:TimedMediaHandler/Проигрыватель VideoJS

Скриншот нового проигрывателя

VideoJS Player — видеоплеер для MediaWiki в проектах Викимедиа.

Он базируется на VideoJS и имеет более современный, быстрый пользовательский интерфейс с поддержкой мобильных устройств и HTML5.

Использование

Пример видеоплеера

Пример аудиоплеера

Example audio player with subtitles

Одновременно аудио- и видеоплеер. Вы можете найти примеры обоих плееров на этой странице. После запуска при взаимодействии с видео вы увидите панель управления.

Кнопки управления в перечислении слева направо:

•  Воспроизведение/пауза
•  Управление громкостью
• Пимпочка позиции при воспроизведении
• Оставшееся время воспроизведения
•  Выбор языка субтитров и контроллеры стиля субтитров
•  Селектор разрешения
•  Управление опциональным «Картинка-в-картинке»
•  Управление полноэкранным режимом
•  Инфо-кнопка, которая перенаправляет на страницу описания файла

Управление мышкой и клавиатурой

• 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
• Дважды щелкните на окно проигрывателя, чтобы войти или выйти из полноэкранного режима
• The following keyboard controls are available:

  k / Space

  Play/pause the media playback

  f

  Войти/Покинуть полноэкранный режим

  m

  Заглушить звук

  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

Известные проблемы

Видеоплеер все еще находится в разработке, но если вы обнаружите какие-либо проблемы, сообщите о них на странице обсуждения или сохраните их в Фабрикаторе.

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>