Extension:TimedMediaHandler/VideoJS Player

동작 중인 새 플레이어의 스크린샷

VideoJS Player는 미디어위키용 위키미디어 프로젝트에서의 비디오 플레이어입니다.

이것은 VideoJS에 기반해 있으며, 모바일 기기와 HTML5가 호환이 되면서 현대화되고, 빠른 사용자 인터페이스를 가지고 있습니다.

사용법

예시 비디오 플레이어

예시 오디오 플레이어

오디오 및 비디오 플레이어가 모두 있습니다. 이 페이지에서 두 플레이어의 예시를 볼 수 있습니다. 시작을 하면 비디오와 상호 작용할 때 제어 막대를 보게 됩니다.

왼쪽에서 오른쪽 순서로 컨트롤이 위치합니다:

•  재생/일시정지 제어
•  음량 제어
• 재생 위치
• 남은 재생 시간
•  자막 언어 선택기와 자막 스타일 컨트롤
•  해상도 선택기
•  선택적 PIP (픽처 인 픽처) 컨트롤
•  전체 화면 제어
•  파일 설명 문서로 방문하는 정보 버튼

마우스 및 키보드 제어

• 미디어 파일의 재생을 시작하려면 섬네일 위의 재생 아이콘을 클릭하십시오.
• 파일 설명 문서를 열려면 섬네일에 마우스 오른쪽 버튼 또는 마우스 가운데 버튼을 클릭하십시오
• 플레이어 창 안에서 한 번의 마우스 클릭으로 플레이어를 재생/일시정지합니다
• 전체 화면에 들어가거나 빠져나오려면 플레이어 창을 두 번 클릭하십시오
• 다음의 키보드 컨트롤을 사용할 수 있습니다:

  k / spacebar-key

  미디어를 재생/일시정지

  f-key

  전체 화면 들어가기/나가기

  m-key

  음소거

• 플레이어는 탭, 엔터, 스페이스바 키를 사용하여 온전히 키보드로 접근 가능합니다

알려진 문제

• 몇몇 파일들에서 자막이 작동하지 않을 수 있습니다. 우리는 자막에서의 위키 문법을 지원하지 않습니다. 이런 자막들을 재작성하는 것을 권장합니다 (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()
        }
    } );
} );