왜 나는 vLitejs를 만들었는가, 빠르고 유연한 네이티브 비디오 및 오디오 플레이어

발행: 2일 전 (2025년 12월 8일 오전 05:44 GMT+9)

6 min read

Source: Dev.to

History

vLitejs의 첫 번째 버전은 2019년에 출시되었으며 HTML5 비디오와 YouTube를 지원했습니다. 그 후 곧 오디오 지원, 접근성, 키보드 네비게이션이 추가되었습니다. 이후 Dailymotion과 Vimeo와 같은 제공자도 통합되었습니다.

커뮤니티 기여가 프로젝트를 형성합니다. 이슈와 토론을 통해 개선이 이루어지며, 결정은 라이브러리를 가볍고 성능 좋게 유지하려는 명확한 비전에 따라 이루어집니다.

Context and Motivation

vLitejs는 가볍고 빠르며 유연한 플레이어를 제공하기 위해 만들어졌습니다. 당시 Video.js와 Plyr.js 같은 라이브러리는 수많은 기능 요청과 복잡한 유지보수로 인해 무거워지고 있었습니다. vLitejs의 목표는 기본 플레이어를 최소화하고, 추가 기능은 플러그인을 통해 선택적으로 사용할 수 있게 하는 것입니다.

Design Principles and Architecture

vLitejs는 명확한 구분을 따릅니다:

Core – HTML5 재생을 위한 최소 필수 요소.
Providers – 외부 플랫폼(YouTube, Dailymotion, Vimeo)을 위한 어댑터로, 필요 시 SDK를 로드합니다.
Plugins – PIP, 자막, 캐스트, 단축키 등 코어를 건드리지 않고 플레이어를 확장하는 선택적 기능.

핵심 기술 선택

강력한 타입을 위한 TypeScript 사용.
EcmaScript Module (ESM) 형태로 배포.
최신 Node.js LTS 릴리스와 현대 브라우저를 지원.

각 제공자는 기본 Player 클래스를 상속받아 일관된 동작을 보장합니다. 플러그인은 공개 API를 통해 이 클래스를 사용해 코드베이스를 모듈화하고 재사용성을 높입니다.

Features

Core

기본 HTML5 비디오 & 오디오
접근성 및 키보드 네비게이션
커스터마이징 가능한 컨트롤 요소
통합 이벤트 API

Providers

YouTube
Dailymotion
Vimeo (SDK 자동 로드)

Plugins (주요 기능)

Picture-in-Picture
자막
캐스트 & AirPlay
단축키
스티키 플레이어
수익화(Google IMA SDK)

Advanced

스트리밍을 위한 HLS 지원
인라인 SVG 아이콘

vLitejs player

How It Works

Initializing the Player

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';

new Vlitejs('#player');

Providers Example (YouTube)

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsYoutube from 'vlitejs/providers/youtube.js';

Vlitejs.registerProvider('youtube', VlitejsYoutube);

new Vlitejs('#player', {
  provider: 'youtube'
});

Plugins Example (PIP + Subtitle)

import 'vlitejs/vlite.css';
import 'vlitejs/plugins/pip.css';
import 'vlitejs/plugins/subtitle.css';

import Vlitejs from 'vlitejs';
import VlitejsPip from 'vlitejs/plugins/pip.js';
import VlitejsSubtitle from 'vlitejs/plugins/subtitle.js';

Vlitejs.registerPlugin('pip', VlitejsPip);
Vlitejs.registerPlugin('subtitle', VlitejsSubtitle);

new Vlitejs('#player', {
  plugins: ['pip', 'subtitle']
});

Global Events

모든 이벤트는 제공자와 플러그인 전반에 걸쳐 표준화됩니다.

new Vlitejs('#player', {
  onReady: (player) => {
    player.on('play', () => console.log('Video started'));
    player.on('pause', () => console.log('Video paused'));
    player.on('timeupdate', () => {
      console.log('Current time', player.getCurrentTime());
    });
  }
});

Creating a Custom Plugin

개발자는 플레이어 인스턴스와 상호작용하는 커스텀 플러그인을 만들고 플러그인 API를 통해 등록할 수 있습니다. 라이프사이클 훅과 모범 사례는 Plugin API documentation과 Provider API documentation을 참고하세요.

What’s Next

코어와 플러그인 통합을 위한 Playwright 기반 자동 E2E 테스트
사용자 요구에 따라 새로운 제공자와 플러그인 추가
플러그인/제공자 개발을 위한 문서와 예제 개선
지속적인 성능 모니터링 및 선택적 최적화

Key Takeaways

명확한 아키텍처가 코어를 최소화하면서 최적 성능을 가능하게 함.
모듈성을 통해 과도한 로드 없이 맞춤형 구성이 가능.
강력한 TypeScript 타입이 유지보수성과 신뢰성을 보장.
최신 브라우저만 지원해 불필요한 레거시 코드를 배제.
커뮤니티 의견은 소중하지만, 프로젝트를 가볍게 유지하려는 집중된 비전에 따라 결정이 이루어짐.

Conclusion

vLitejs는 오픈소스이며 빠르고 유연한 비디오/오디오 플레이어입니다. 모듈식 설계 덕분에 기본적으로는 간단하고 신뢰할 수 있는 플레이어만 제공하고, 필요에 따라 고급 기능을 선택적으로 사용할 수 있습니다.

Discover vLitejs

❤️ 초기 도움을 준 Maxime Lerouge와 로고를 만든 Victor Schirm에게 특별히 감사드립니다.