안녕하세요. 남산돈가스입니다.
오늘은 HTML5 기반에서 동작되는 웹페이지 환경에서 손쉽게 동영상 플레이어를 제공할 수 있는 Javascript인 video.js에 대해서 알아보려고 합니다.
video.js는 HTML5에서 동영상을 제공하는 <video> 태그를 도와서 자바스크립트로 동적으로 플레이어를 컨트롤 할 수 있게하거나 원하는 인터페이스들을 커스터마이징하여 사용할 수 있도록 제공하기 때문에 일반적인 <video>태그에서 제공되는 동영상 플레이어의 UI나 동작들을 컨트롤하고 싶은 경우 필요에 따라 사용하실 수 있습니다.
그러면 우선 video.js를 사용하기 위한 사전 준비를 소개하겠습니다.
video.js는 여느 js 기반 오픈소스들과 같이 cdn을 제공하기 때문에 인터넷 환경에 있다면 어디서는지 이용이 가능합니다. 만약 인터넷이 제공되지 않는 환경이라면 cdn으로 제공되는 js파일을 로컬 다운로드하여 시스템 내부에 위치해 사용하시면 됩니다. 이 포스팅에선 인터넷 환경이 제공된다고 가정하고 진행하겠습니다.
우선 영상을 제공할 웹페이지를 하나 생성합니다. 저의 경우는 video.html이라고 명명하겠습니다.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>video.js 사용법</title>
</head>
<body>
<video id="myPlayer" class="video-js vjs-default-skin" webkit-playsinline></video>
</body>
</html>
위와 같이 html파일을 생성하고 <body>에서 video 플레이어를 위치할 영역에 <video>태그를 생성합니다. 속성들을 설명드리면,
- id : <video>의 식별자입니다. 뒤에 video.js 스크립트에서 해당 태그를 컨트롤하기 위한 정보입니다.
- class : video-js vjs-default-skin 클래스를 적용하여 video.js가 제공하는 css를 적용할 수 있습니다.
- webkit-playsinline : 이 속성은 ios 웹뷰 환경에서 video플레이어를 웹뷰 인라인형태로 제공할 경우 설정하는 속성입니다.
이제 이 상태에서 video.js를 가져와야합니다. 위에서 언급했듯이 CDN을 제공하고 있기 때문에 CDN 주소를 import 하겠습니다.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video.min.js"></script>
<title>video.js 사용법</title>
</head>
<body>
<video id="myPlayer" class="video-js vjs-default-skin" webkit-playsinline></video>
</body>
</html>
이제 video.js를 사용할 준비가 완료되었습니다. 먼저 말씀드리면 기본적으로 video.js 초기화는 다음과 같습니다.
var player = videojs("video-tag-id", options);
위와 같이 초기화한 뒤 video-tag-id의 위에서 생성한 <video>태그의 id를 입력한 뒤, options 를 조작하면 원하는 동영상 플레이어를 제공할 수 있게됩니다.
var player = videojs("myPlayer", {
sources : [
{ src : "test.mp4", type : "video/mp4"}
],
poster : "test-poster.png",
controls : true,
playsinline : true,
muted : true,
preload : "metadata",
});예제로 옵션들을 설정한 예시입니다. 항목 별로 설명드리면,
- soruces : 제공할 동영상의 경로를 설정하는 부분입니다. Object 배열형태로 입력받으며, Object 는 src에 동영상의 경로 (URL 경로 또는 로컬 파일 경로), type은 src에 설정한 파일의 MIME타입을 입력합니다. 배열로 입력받는 이유는 이 웹페이지를 실행하는 구동환경에 따라 동영상 포맷 등의 충돌이 발생할 경우를 대비하여 여러 포맷의 동영상을 제공할 수 있도록 하기 위함입니다.
- poster : 동영상이 재생되기 전(ready 상태)에서 제공되는 썸네일 이미지의 경로입니다.
- controls : 동영상을 제어하기 위한 컨트롤바를 제공하는지 여부값입니다. controlBar에는 기본적으로 재생/일시정지, 음량조절, 재생바, 남은 시간, 전체화면 버튼 등으로 구성되어 있습니다.
- playsinline : 모바일 브라우저 환경의 경우 동영상 재생 시 모바일 내장 플레이어로 실행이 되기 때문에 웹페이지에서 인라인형태로 제공하고 싶은 경우 true로 설정합니다.
- muted : 동영상 재생 시 최초 음량이 무음상태로 설정하는 지 여부입니다.
- preload : 웹페이지 로드 시 source로 제공 된 동영상 경로를 재생 버튼을 클릭 시 영상을 다운로드 받는 지 재생 전에 미리 일부분을 다운로드 받아 로딩이 없이 제공받을 지 여부를 설정할 수 있습니다. "metadata"의 경우는 동영상의 컨텐츠가 아닌 기본정보만 미리 load하는 방식이고, "auto"의 경우 컨텐츠를 미리 로드하여 로딩이 없이 동영상을 시작할 수 있습니다.
위와 같이 설정한 뒤 페이지를 로드하면
이런식으로 설정한 내용대로 동영상 플레이어가 제공되고 있음을 확인하실 수 있습니다.
추가적으로, 이 컨트롤바의 항목들을 조작하고 싶은 경우
var player = videojs("myPlayer", {
sources : [
{ src : "https://wtnpyesmhqvw68558.cdn.gov-ntruss.com/ibk/ETC/0001/wPiu5twj8ZtdcIuGeTyu.mp4", type : "video/mp4"}
],
poster : "https://wtnpyesmhqvw68558.cdn.gov-ntruss.com/ibk/ETC/0001/DPPWiqhOJcbxr1ZgVHFc.png",
controls : true,
playsinline : true,
muted : true,
preload : "metadata",
controlBar : {
playToggle : false,
pictureInPictureToggle : false,
remainingTimeDisplay : false,
progressControl : false,
}
});위에서 controlBar : { ... } 과 같이 설정을 해주시면 컨트롤바에서 제공되는 항목들을 설정하실 수 있습니다.
playToggle(재생/일시정지), pictureInPictureToggle(pip모드), remainingTimeDisplay(남은 시간), progressControl(재생 바)
이상으로 video.js의 사용법에 대해서 알아보았습니다.
감사합니다.
'Programming' 카테고리의 다른 글
| JWT(JSON Web Token)에 대하여 (0) | 2020.08.18 |
|---|---|
| [Javascript] Set에 대하여 (1) | 2020.08.14 |
| Mac에 RabbitMQ 설치 및 실행하기 (1) | 2020.07.31 |
| [JSON-Server] 코딩없이 Mock Restful API 서버 만들기 (0) | 2020.06.03 |
| Kong API Gateway #2 - Konga & API 등록/요청 (0) | 2020.05.21 |
