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

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

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

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

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

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

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

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

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

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

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

• 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 / spacebar-key

  Play/pause the media playback

  f-key

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

  m-key

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

• The player is fully keyboard accessible using tab, enter and spacebar keys

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

• Субтитры могут не отражаться у некоторых файлов. Мы отказались от поддержки разметки вики-кода внутри субтитров. Рекомендуется переписать эти субтитры (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.

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

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