CatPlayer 데모

xgplayer 스타일의 강력한 웹 비디오 플레이어입니다.
HLS/DASH 스트리밍, 광고, 자막, 화질 선택, 북마크 등 다양한 기능을 제공합니다.

✨ 새로운 기능

다중 화질 지원 및 동적 전환 기능. 재생 위치를 유지하면서 화질을 변경할 수 있습니다.

재생 속도 조절

0.25배속부터 2배속까지 자유롭게 조절. 강의 시청, 음악 연습, 빠른 복습에 최적화되어 있습니다.

플레이어 테마

7가지 테마로 플레이어 디자인 커스터마이징. 브랜드에 맞는 색상과 느낌으로 변경할 수 있습니다.

현재 프레임을 PNG 이미지로 캡처하여 저장. 키보드 단축키(S)로 빠르게 캡처할 수 있습니다.

중요한 장면을 북마크로 저장하고 빠르게 이동. 키보드 단축키(B)로 즉시 추가 가능합니다.

재생 위치 기록

시청 위치를 자동으로 저장하고 복원. 나중에 다시 시청할 때 이어서 볼 수 있습니다.

플레이리스트

여러 영상을 연속 재생. 다음/이전 영상으로 쉽게 탐색할 수 있습니다.

광고 시스템

Pre-roll, Mid-roll 광고 지원. 이미지/비디오 광고 모두 가능하며 스킵 기능도 제공합니다.

WebVTT 형식의 다중 자막 지원. 여러 언어의 자막을 선택할 수 있습니다.

🎮 키보드 단축키

Space - 재생/일시정지
←/→ - 5초 뒤로/앞으로
↑/↓ - 볼륨 증가/감소
F - 전체화면
M - 음소거
S - 스크린샷 ✨
B - 북마크 추가 ✨
N - 다음 영상 ✨
P - 이전 영상 ✨

📦 기본 사용법

// 기본 플레이어
const player = new CatPlayer({
    container: '#player',
    url: 'video.mp4'
});

// 화질 선택 포함
const player = new CatPlayer({
    container: '#player',
    qualities: [
        { quality: '1080p', url: 'video-1080p.mp4' },
        { quality: '720p', url: 'video-720p.mp4' }
    ],
    defaultQuality: '720p'
});

// 플레이리스트
const player = new CatPlayer({
    container: '#player',
    playlist: [
        { url: 'video1.mp4', poster: 'poster1.jpg' },
        { url: 'video2.mp4', poster: 'poster2.jpg' }
    ]
});

🚀 시작하기

위의 기능 카드를 클릭하여 각 기능의 데모를 확인하세요!