Video.js

Video.js
	Video.js를 이용해서 Big Buck Bunny를 재생하는 모습
원저자	Brightcove, Inc.
안정화 버전	v7.21.1 / 2022년 11월 21일
프로그래밍 언어	자바스크립트
라이선스	아파치 2.0 라이선스
웹사이트	videojs.com

Video.js는 HTML5 비디오 플레이어 프레임워크이다. HTML5에서 <video>태그를 사용하여 비디오를 넣는 것은 브라우저마다 플레이어 디자인이 다르게 보이는 등의 문제가 있어서 어느정도 규모가 있는 사이트들이 비디오를 호스팅 할때 <video>태그만을 사용하지 않고, CSS와 JS를 이용하여 플레이어를 만드는데 이러한 것을 하려면 당연히 번거롭다.

이러한 점 때문에 mediaelement.js 등 HTML5 플레이어를 만들어 주는 프레임워크나 라이브러리가 나와 있는데 Video.js도 이러한 역할을 하는 프레임 워크이다.

기능편집

당연하지만 기본 스킨 기준 재생, 일시정지, 볼륨 조정이 있으며, PIP 버튼이 있다는게 특이점. PIP 버튼을 누르면 브라우저의 PIP 기능을 호출한다. 전체화면 모드로 가면 커서가 사라지는 등 기본기를 어느정도 갖췄지만, 화질 선택, 스페이스 바 재생/일시정지 등의 핫키 기능 등 빠진 것이 많다. 물론 플러그인으로 때울 수 있기는 하다.

이 플레이어 역시 마찬가지로 순정 환경에서는 모바일에서 전체화면을 누를 시 화면 방향이 회전하는 기능을 지원하지 않는다. 이를 지원하는 videojs-landscape-fullscreen 플러그인을 적용함으로써 해결할 수 있다.

예시편집

NPM를 사용하지 않고 video.js를 적용하는 예시이다. 문서를 참고하였다.

<!DOCTYPE html>
<head>
  <link href="https://vjs.zencdn.net/7.21.1/video-js.css" rel="stylesheet" />
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="(동영상의 주소)" type="(동영상의 MMIE 코드. 주로 사용하는 MP4의 경우 video/mp4를 넣으면 된다)" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.21.1/video.min.js"></script>
  <!-- 한국어 인터페이스를 지원하는 코드-->
  <script src="https://vjs.zencdn.net/7.21.1/lang/ko.js"></script>
</body>

테마편집

video.js는 4개의 테마를 기본적으로 지원한다.

City편집

빨간 재생바 등 유튜브 플레이어를 어느정도 연상시키지만 재생/일시정지 버튼이 중앙에 있는 등 어느정도 차이도 있다. 현재 Video.js 홈페이지 메인에 나오는 첫 플레이어가 이 테마를 적용시켰다.

fantasy편집

MS IE의 기본 비디오 플레이어를 연상시키는 듯한 UI가 특징인 테마. 보라색이 주 색이다.

forest편집

녹색이 주 색이고 컨트롤러에 배경이 없는 UI가 주 특징인 테마이다. videojs-mobile-ui 플러그인 사용시 충돌하는 문제가 있는데 다음과 같은 CSS를 적용해주면 해결이 가능하다.

.video-js .vjs-touch-overlay .vjs-play-control .vjs-icon-placeholder::before {
    content: '' !important;
    color: initial !important;
    border-radius: initial !important;
    width: 100% !important;
    height: 100% !important;
    background-color: initial !important;
}

Sea편집

파란색이 주 색이고 진행 바를 강조하는 스타일의 테마. 진행바를 강조하지 못해 나머지 볼륨 바와 PIP 호출 버튼이 사라졌다.

플러그인편집

videojs-landscape-fullscreen: 전술했듯 모바일에서 전체화면을 누를 때 가로 모드로 자동으로 회전되도록 하는 플러그인이다.
videojs-hotkeys: 스페이스 바 재생/일시정지 등 키보드 핫키를 지원하게 하는 플러그인.
videojs-mobile-ui: 터치시 탐색 등 모바일 특화된 UI를 지원하는 기능.

사용처편집

미디어위키 확장기능 Timedmediahandler: 동영상 업로드 등의 기능을 제공하는 미디어위키 확장기능인데 자체 플레이어를 사용했으나 최신 환경 호환 문제 등이 발생하며 Video.js 기반 플레이어로 교체하였다. 위키미디어 재단이 운영하는 위키 또한 이 확장기능을 사용한다.
위키미디어 재단이 운영하는 위키: 전술한 타임드미디어핸들러 기반이며 타임드미디어핸들러가 Video.js를 사용하기 때문에 당연히 위키미디어 재단이 운영하는 위키에서도 이를 사용한다.

외부 링크편집

공식 홈페이지