수강생이 끝까지 보게 만드는 강의 동영상 플레이어
화질 자동 전환부터 이어보기, 시청 완료 감지까지. 강의에 필요한 재생 경험을 우리 서비스에 그대로 심는 컴포넌트입니다.
↑ 실제로 작동합니다 · 재생 · 탐색 · 배속 · 볼륨 · 전체화면을 눌러보세요
기본 재생기로는
강의를 다 담을 수 없습니다
중도 이탈
이어보기가 없으면 수강생은 매번 처음부터 재생하다 지쳐 떠납니다. 완주율이 떨어집니다.
부정확한 진도
단순 재생완료 이벤트로는 실제 시청 여부를 알기 어려워, 수료 처리가 신뢰를 잃습니다.
통합 부담
상용 플레이어는 월 비용과 종속이 따르고, 브랜드에 맞게 UI를 바꾸기도 까다롭습니다.
강의에 필요한 기능을 처음부터
플러그인을 붙일 필요 없이, 학습 환경에 맞춘 기능이 기본으로 들어 있습니다.
적응형 스트리밍
네트워크 상황에 맞춰 화질을 자동 전환하고, 시청자가 직접 화질을 고를 수도 있습니다. MP4도 그대로 재생됩니다.
이어보기
마지막으로 본 지점을 저장했다가, 다시 들어오면 그 지점부터 이어볼지 물어봅니다.
시청 완료 감지
설정한 비율 이상 시청하면 완료로 처리하고, 진도 콜백으로 서버에 바로 알려줍니다.
자막
내장 자막과 외부 자막 파일을 모두 목록에 모아 켜고 끌 수 있어, 접근성을 높입니다.
챕터 · 배속
구간 마커로 원하는 챕터로 바로 이동하고, 0.5×~2× 배속으로 학습 속도를 조절합니다.
건너뛰기 방지
수료 요건이 필요한 과정에서는 아직 보지 않은 구간으로 앞서가는 것을 막을 수 있습니다.
왜 직접 심는 플레이어인가
서비스에 종속되지 않으면서, 학습 특화 기능과 브랜드 일관성을 동시에 얻습니다.
어떤 소스와도 호환
스트리밍 서비스가 주는 HLS 주소나 우리 서버의 MP4를 URL 하나로 연결합니다. 영상 저장소를 바꿔도 플레이어는 그대로입니다.
학습 기능 기본 탑재
이어보기 · 완료 감지 · 건너뛰기 방지처럼 LMS에 꼭 필요한 기능이 별도 개발 없이 들어 있습니다.
우리 브랜드에 맞게
강조 색상과 UI를 서비스 아이덴티티에 맞춰 바꿀 수 있어, 외부 플레이어처럼 겉돌지 않습니다.
접근성 · 모바일 기본
키보드 단축키, 포커스 표시, 모바일 대응, 모션 최소화 설정까지 품질 기준을 갖췄습니다.
이렇게 활용합니다
강의 영상이 중심이 되는 어떤 서비스에도 맞습니다.
온라인 강의 플랫폼
수강생이 어디까지 봤는지 이어보기와 진도로 관리하며 완주율을 높입니다.
- 강의별 이어보기 저장
- 90% 시청 시 수료 처리
- 배속으로 복습 시간 단축
사내 교육 · 직무 훈련
필수 교육은 건너뛰기 방지로 실제 시청을 보장하고 이수 여부를 정확히 남깁니다.
- 건너뛰기 방지로 이수 신뢰 확보
- 진도 콜백으로 LMS 자동 기록
- 자막으로 사내 접근성 충족
자격증 · 이러닝 과정
수료 기준이 엄격한 과정에서 시청 요건을 시스템으로 강제할 수 있습니다.
- 완료 비율 기준 커스터마이즈
- 챕터로 단원별 학습 구성
- 시청 위치 서버 저장
유료 멤버십 강의
재생 주소를 서버에서 발급하도록 두면, 결제한 회원에게만 영상을 열어줄 수 있습니다.
- 서명된 재생 주소 연동
- 공개 ↔ 유료 전환에 UI 변경 불필요
- 브랜드 색으로 일관된 경험
도입은 세 단계면 충분합니다
React 프로젝트에 컴포넌트를 넣고, 영상 주소와 진도 처리를 연결하면 끝입니다.
설치
컴포넌트를 프로젝트에 추가하고 필요한 패키지를 설치합니다.
삽입
강의 페이지에 플레이어를 넣고 영상 주소를 전달합니다.
진도 연동
완료 콜백을 서버와 연결해 수료를 자동으로 기록합니다.
// 1. 설치
npm install hls.js lucide-react
// 2. 삽입 & 3. 진도 연동
import LMSVideoPlayer from "@/components/LMSVideoPlayer";
<LMSVideoPlayer
src={playbackUrl}
title="1강. 자료구조 기초"
storageId="lecture-3"
accent="#2A46DB"
onComplete={saveProgress}
/>영상 플레이어 요금제
LMS에 그대로 심는 학습 재생 컴포넌트. 정확한 금액은 상담 후 안내드립니다.
💡 실제 금액은 요구사항 상담 후 안내드립니다. 부담 없이 문의하세요.