Video.js
 | |
 Video.js를 이용해서 Big Buck Bunny를 재생하는 모습 | |
| 원저자 | Brightcove, Inc. |
|---|---|
| 안정화 버전 | v7.21.1
/ 2022년 11월 21일 |
| 프로그래밍 언어 | 자바스크립트 |
| 라이선스 | 아파치 2.0 라이선스 |
| 웹사이트 | videojs |
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를 사용하기 때문에 당연히 위키미디어 재단이 운영하는 위키에서도 이를 사용한다.