Video.js 사용법 - 자바스크립트로 동영상 재생

동영상 콘텐츠는 웹사이트의 사용자 경험을 풍부하게 만들거나, 정보 전달의 효과를 극대화하는 등 다양한 목적으로 활용된다. 이런 중요한 동영상 콘텐츠를 웹에 효과적으로 삽입하고 관리하기 위해 다양한 방법들이 사용된다. 그 중에서도 Video.js는 많은 웹 개발자들에게 애용되는 도구 중 하나이다. 이 글에서는 Video.js의 기본적인 개념부터 세부 사용법, 그리고 "HTML 태그를 이용한 기본 동영상 삽입"과의 차이점까지 살펴 볼것이다.

Video.js란?

Video.js는 웹에서 동영상 콘텐츠를 통합하고 관리하기 위한 자바스크립트와 HTML5 기반의 라이브러리이다.

웹에서 동영상을 표시하기 위해 고안되었으며, 다양한 플랫폼 및 브라우저에서 일관된 동영상 재생 환경을 제공하고자 하는 목표를 가지고 있다.

Video.js의 장점

  1. 크로스 브라우저 호환성: Video.js는 다양한 웹 브라우저와 장치에서 동작하도록 설계되어 있다. 따라서 사용자는 별도의 플러그인이나 외부 도구 없이도 동영상을 재생할 수 있다.
  2. 커스터마이저블 스킨: Video.js는 완전히 커스터마이징 가능한 스킨을 제공한다. 이를 통해 웹사이트의 디자인 및 브랜딩에 맞게 동영상 플레이어의 디자인을 변경할 수 있다.
  3. 플러그인 지원: Video.js는 다양한 플러그인을 지원하며, 이를 통해 동영상 플레이어의 기능을 확장하거나 변경할 수 있다.
  4. 오픈소스: Video.js는 오픈소스 라이브러리로, 웹 커뮤니티와 개발자들의 활발한 참여와 지원을 받고 있다.

Video.js의 단점

  1. 학습곡선: 비록 Video.js가 사용자 친화적이라고 할지라도, 처음 사용하는 사용자에게는 초기 설정이나 플러그인 통합 등에서 약간의 학습곡선이 있을 수 있다.
  2. 용량: 복잡한 기능과 플러그인을 추가할수록 웹페이지의 로딩 시간이 증가할 수 있다.

Video.js 설치

CDN을 통한 설치

CDN(Content Delivery Network)을 이용하면 간편하게 Video.js를 웹페이지에 추가할 수 있다. HTML 파일의 <head> 태그와 <body>태그의 끝부분에 아래 코드를 삽입한다.

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

<body>
  <script src="https://vjs.zencdn.net/8.5.2/video.min.js"></script>
</body>

npm을 통한 설치

npm(Node Package Manager)을 이용하면 로컬 개발 환경에서 Video.js를 설치하고 관리할 수 있다. 아래의 명령어를 터미널에서 실행하여 Video.js를 프로젝트에 추가할 수 있다.

bash
npm install --save-dev video.js

Video.js 사용

HTML에 동영상 추가하기

먼저, 웹 페이지에 동영상을 추가해야 한다. HTML 파일에서 아래와 같은 코드를 작성한다.

html
<video id="my-video" class="video-js" width="640" height="360" controls preload="auto" data-setup='{}'>
    <source src="경로/동영상이름.mp4" type="video/mp4" />
</video>

이 코드는 640x360 크기의 비디오 플레이어를 생성한다. source 태그의 src에는 동영상 파일의 경로를 넣는다.

Video.js 컨트롤

Video.js를 이용하여 동영상을 컨트롤 하려면 먼저 Video.js를 초기화해야 한다. 웹 페이지의 스크립트 부분(예: <script> 태그 내부 또는 별도의 JS 파일)에 아래 코드를 추가해보자.

javascript
var player = videojs('my-video');

이 코드는 my-video라는 ID를 가진 동영상 요소를 Video.js 플레이어로 초기화한다.

재생, 일시 정지, 볼륨 조절

Video.js를 통해 제공되는 API를 사용하면, 비디오의 재생, 일시 정지 및 볼륨 조절과 같은 다양한 기능을 쉽게 구현할 수 있다.

javascript
let player = videojs('my-video');

// 비디오 재생
player.play();

// 비디오 일시 정지
player.pause();

// 볼륨 조절 (0.5로 설정)
player.volume(0.5);

이벤트 핸들러 추가하기

비디오 플레이어에 이벤트 핸들러를 추가하여 사용자와의 상호 작용을 관리할 수 있다.

javascript
player.on('play', function() {
    console.log('비디오가 재생되었다.');
});

player.on('pause', function() {
    console.log('비디오가 일시 정지되었다.');
});
---

Video.js의 다양한 옵션 설정

Video.js는 사용자와 개발자 모두를 위한 풍부한 옵션 설정을 제공한다. 이러한 옵션은 동영상 재생의 품질, 사용자 인터페이스, 네트워크 동작 및 사용자 경험에 관련된 다양한 범주로 나눌 수 있다.

  1. 재생 품질 관련: 재생 해상도, 프레임 비율, 볼륨 조절 등 동영상과 오디오의 품질을 최적화하는 설정이다.
  2. 사용자 인터페이스 관련: 플레이어의 버튼, 툴바, 스킨 및 디자인 등의 UI 요소를 조절하는 설정이다.
  3. 네트워크 동작 관련: 스트리밍 방식, 버퍼 설정, 네트워크 최적화 등 네트워크와 관련된 동작을 설정한다.
  4. 사용자 경험 관련: 자동 재생, 음소거, 미리 로드 설정 등 사용자에게 제공되는 경험을 조절하는 설정이다.

이러한 다양한 범주의 옵션들 중에서도, 특히 중요하고 자주 사용되는 옵션 4가지, 즉 controls, autoplay, preload, muted에 대해 자세하게 설명할 것이다.

1. controls

controls 옵션은 사용자가 비디오 플레이어의 시작 버튼과 상호작용 할 수 있는지 여부를 결정한다. controls를 true로 설정하면 동영상 시작 버튼이 표시되어 사용자가 동영상을 시작할 수 있다. 반대로 false로 설정하면 시작 버튼이 표시되지 않는다. 이 경우, 동영상의 재생은 autoplay 속성을 사용하거나 Player API를 통해서만 시작할 수 있다.

javascript
var player = videojs('my-video', {
  controls: true
});

2. autoplay

autoplay 옵션은 웹 페이지 로드 시 동영상의 자동 재생 여부를 결정한다. 이 옵션을 true로 설정하면 페이지 로드와 함께 동영상이 자동으로 재생된다. 사용자 경험을 위해 일부 브라우저에서는 자동 재생을 차단할 수 있으므로 주의가 필요하다.

javascript
var player = videojs('my-video', {
  autoplay: true
});

3. preload

preload 옵션은 동영상의 미리 로드 방식을 결정한다. 이 옵션에는 auto, metadata, none 세 가지 값이 있다.

  • auto: 필요한 부분만큼 동영상을 미리 로드한다.
  • metadata: 동영상의 메타데이터만 미리 로드한다.
  • none: 동영상을 미리 로드하지 않는다.

이 설정은 사용자의 데이터 사용량과 로딩 시간에 영향을 줄 수 있다.

javascript
var player = videojs('my-video', {
  preload: 'auto'
});

4. muted

muted 옵션은 동영상의 초기 음소거 상태를 설정한다. 이 옵션을 true로 설정하면 동영상이 음소거 상태로 재생된다.

javascript
var player = videojs('my-video', {
  muted: true
});

이러한 옵션들은 사용자의 필요와 웹사이트의 특성에 따라 조절하여, 최적의 동영상 재생 경험을 제공할 수 있다.

자동재생(Autoplay) 사용시 주의사항

autoplay 옵션을 사용하면 동영상이 자동으로 재생된다. 그러나 최근의 웹 브라우저는 사용자 경험을 위해 자동재생 기능에 제한을 두고있다. 특히 음소거되지 않은 동영상의 자동재생은 대부분의 브라우저에서 차단된다.

이를 해결하기 위한 방법 중 하나는 muted 옵션과 함께 autoplay 옵션을 사용하는 것인데, 이렇게 하면 동영상은 음소거 상태로 자동재생이 될 가능성이 높아 지지만 자동 재생을 보장하지는 않는다.

javascript
var player = videojs('my-video', {
  autoplay: true,
  muted: true
});

그밖에 자동재생 지원과 관련해서 Detecting Autoplay Support 및 Programmatic Autoplay and Success/Failure Detection을 참고하기 바란다.

Video.js 스킨 커스터마이징 및 테마 적용 방법

Video.js는 사용자의 웹사이트나 앱의 디자인에 맞게 플레이어의 디자인을 손쉽게 변경할 수 있도록 스킨과 테마의 커스터마이징을 지원한다. 이를 통해 동영상 플레이어의 외관을 원하는대로 조절하거나 다양한 테마를 적용할 수 있다.

스킨 커스터마이징

Video.js 플레이어의 스킨은 CSS를 통해 커스터마이징할 수 있다. 기본 스타일을 변경하려면 플레이어의 CSS 클래스에 스타일을 추가하면 된다.

예를 들어, 재생 버튼의 색상을 빨간색으로 변경하려면 다음과 같이 CSS를 작성할 수 있다.

css
.video-js .vjs-play-control {
  color: red;
}

더욱 복잡한 스킨 커스터마이징을 원한다면 Video.js Skin Designer와 같은 도구를 사용하여 실시간으로 스킨을 변경하며 결과를 확인하면서 디자인할 수 있다.

Video.js 테마 적용 방법

Videojs Themes library는 Video.js를 위한 다양한 테마를 제공한다. 이 라이브러리에서 제공하는 기본 테마를 적용하는 방법은 간단한다.

  1. 먼저 원하는 테마의 CSS 파일을 프로젝트에 포함시킨다. 예를 들어, "city" 테마를 적용하려면 다음 링크를 사용하여 CSS를 로드한다.
    html
    <link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet">
  2. Video.js 플레이어의 클래스에 원하는 테마 이름을 추가한다.
    html
     <video class="video-js vjs-theme-city"></video>

이제 선택한 테마가 플레이어에 적용된다. 원하는대로 다양한 테마를 시도하고, 가장 적합한 테마를 선택하여 사용할 수 있다.

HTML 태그 vs Video.js를 사용한 동영상 삽입 방법 비교

이전 글인 [HTML] 웹 개발에서 동영상 삽입하는 다양한 방법에서는 웹페이지에 동영상을 삽입하기 위해 HTML 태그를 활용하는 방법에 대해 알아보았다. HTML 태그를 이용하는 방법도 매우 간단하고 효과적인 방법이다. 하지만 Video.js와 같은 외부 라이브러리를 활용하면 더 다양하고 고급스러운 기능을 활용할 수 있다. 그렇다면 두 방법의 차이점은 무엇이며, 어떤 상황에서 어떤 방법을 사용하는 것이 좋을까? 이 두 방법의 장단점을 비교하고 상황별로 어떤 방법을 선택하면 좋을지 알아본다.

HTML 태그를 이용한 동영상 삽입

장점

  • 간단함: <video> 태그만으로 동영상을 쉽게 웹 페이지에 삽입할 수 있다.
  • 외부 라이브러리 필요 없음: 추가적인 라이브러리나 스크립트를 불러오지 않아도 되므로 로딩 시간이 빠르다.
  • 네이티브 지원: 대부분의 모던 웹 브라우저에서 <video> 태그를 지원한다.

단점

  • 기능 제한: 기본적인 재생/일시정지 기능 이외의 커스터마이징이나 추가 기능을 활용하기 어렵다.
  • 스타일링 제한: 브라우저마다 <video> 태그의 디자인이 조금씩 다를 수 있다.

Video.js를 사용한 동영상 삽입

장점

  • 고급 기능: 재생 속도 조절, 자막 추가, 플레이리스트 기능 등 다양한 고급 기능을 활용할 수 있다.
  • 커스터마이징: 플레이어의 디자인 및 기능을 원하는 대로 변경할 수 있다.
  • 브라우저 호환성: Video.js는 다양한 브라우저와 장치에서 동작하도록 설계되었다.

단점

  • 로딩 시간: 외부 라이브러리를 불러와야 하므로 초기 로딩 시간이 길어질 수 있다.
  • 학습 곡선: 기본적인 사용법은 간단하지만, 고급 기능을 사용하기 위해서는 문서를 참고하며 학습해야 한다.

어떤 방법을 사용해야 할까?

  • 단순한 동영상 재생이 필요한 경우: HTML의 <video> 태그만으로 충분하다. 추가적인 기능이 필요 없는 경우 이 방법이 빠르고 간편한다.
  • 다양한 기능이나 커스터마이징이 필요한 경우: Video.js를 활용하면 더 많은 옵션과 기능을 사용할 수 있다. 특히 동영상 서비스나 고급 웹 애플리케이션을 만드는 경우에는 Video.js가 더 적합하다.

웹 개발에서 동영상을 효과적으로 사용하는 것은 사용자의 참여와 관심을 높이는 데 큰 도움이 된다. Video.js는 이러한 목적을 위해 강력하고 다양한 기능을 제공하며, 개발자의 요구에 따라 많은 커스터마이징이 가능하다. 하지만 모든 프로젝트가 Video.js를 필요로 하는 것은 아니다. 간단한 동영상 삽입만을 원하는 경우 HTML 태그만으로도 충분히 만족스러운 결과를 얻을 수 있다. 프로젝트의 요구사항, 개발 환경, 예상되는 사용자 경험 등 여러 요소를 고려하여 최적의 방법을 선택하는 것이 중요하다. 기술의 선택은 그 기술의 장단점을 충분히 이해하고 나서 이루어져야 한다. 이 글을 통해 Video.js와 HTML 태그를 이용한 동영상 삽입 방법에 대한 깊은 이해를 얻었기를 바란다.

© Copyright 2023 CLONE CODING