DPlayer란 무엇인가요?
DPlayer는 강력하고 유연한 오픈소스 비디오 플레이어입니다. MP4와 같은 일반적인 비디오 형식뿐만 아니라 HLS 및 FLV 스트림도 지원하여 라이브 비디오 재생에 이상적입니다. DPlayer는 간결하고 사용자 정의가 가능한 인터페이스와 내장된 "단막(danmaku, 떠다니는 댓글)" 기능이 특징입니다.
DPlayer 사용에 대한 자세한 가이드
DPlayer를 사용하려면 라이브러리와 필요한 종속성을 내장한 다음 플레이어를 구성해야 합니다.
1단계: 필요한 라이브러리 가져오기
CDN을 사용하는 것이 이러한 라이브러리를 얻는 가장 빠른 방법입니다. 페이지에 종속된 라이브러리를 포함하면 DPlayer가 자동으로 해당 라이브러리를 감지하여 사용합니다.
MP4의 경우(기본값):
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>HLS(.m3u8)의 경우:
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>FLV(.flv)의 경우:
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
2단계: HTML 만들기 및 플레이어 구성
<div>라이브러리를 내장한 후에는 비디오를 표시하는 요소를 만들고 특정 속성으로 DPlayer를 구성할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Advanced DPlayer Example</title>
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
</head>
<body>
<h1>How to Use DPlayer</h1>
<div id="dplayer-container-1"></div>
<hr>
<div id="dplayer-container-2"></div>
<hr>
<div id="dplayer-container-3"></div>
<script>
// DPlayer configuration for MP4
const dpMP4 = new DPlayer({
container: document.getElementById('dplayer-container-1'),
autoplay: false,
lang: 'en',
loop: true,
hotkey: true,
preload: 'auto',
screenshot: true,
video: {
url: 'https://example.com/videos/my-video.mp4',
pic: 'https://example.com/images/my-video-thumbnail.jpg',
thumbnails: 'https://example.com/images/video-thumbnails.jpg',
type: 'mp4'
}
});
// DPlayer configuration for HLS
const dpHLS = new DPlayer({
container: document.getElementById('dplayer-container-2'),
autoplay: true,
lang: 'en',
theme: '#ff6666',
loop: false,
hotkey: true,
preload: 'metadata',
video: {
url: 'https://example.com/live/my-stream.m3u8',
type: 'hls',
customType: {
hls: function(video, player) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
}
}
}
});
// DPlayer configuration for FLV
const dpFLV = new DPlayer({
container: document.getElementById('dplayer-container-3'),
autoplay: true,
lang: 'en',
theme: '#0077c2',
loop: false,
hotkey: true,
preload: 'auto',
video: {
url: 'https://example.com/live/my-stream.flv',
type: 'flv',
customType: {
flv: function(video, player) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: video.src,
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
}
}
}
});
</script>
</body>
</html>속성에 대한 자세한 설명
공통 속성(모든 비디오 유형에 적용 가능)
container: DPlayer가 렌더링될 DOM 요소입니다. 필수입니다.autoplay:true또는false. 페이지가 로드되면 자동으로 비디오를 재생합니다.theme: 16진수 색상 코드(예:'#FADFA3'). 플레이어의 강조 색상을 설정합니다.lang: 사용자 인터페이스 언어(예:'en'영어)loop:true또는false. 비디오가 끝난 후 반복됩니다.hotkey:true또는false. 키보드 단축키를 활성화합니다(예: 스페이스바로 재생/일시 중지).preload:'auto','metadata', 또는'none'. 브라우저가 비디오를 미리 로드하는 방식입니다.'auto': 전체 비디오를 미리 로드합니다.'metadata': 메타데이터(기간, 크기)만 미리 로드합니다.'none': 아무것도 미리 로드하지 않습니다.
screenshot:true또는false. 사용자가 비디오의 스크린샷을 찍을 수 있습니다.video.url: 비디오 파일의 경로입니다.video.pic: 썸네일 이미지의 경로입니다.video.thumbnails: 탐색 막대의 썸네일 스프라이트 경로입니다.
HLS 및 FLV 속성
이러한 비디오 유형을 사용하려면 외부 라이브러리가 필요합니다. DPlayer는 자동으로 외부 라이브러리를 사용하지만, 속성을 통해 해당 라이브러리의 동작을 사용자 지정할 수도 있습니다 customType.
video.type: 비디오 유형을 지정합니다.'mp4': 기본값, 생략 가능.'hls':.m3u8비디오용.'flv':.flv비디오용.
video.customType: 각 비디오 유형에 대한 처리 논리를 사용자 정의할 수 있는 객체입니다.HLS 예시: 내부 코드는 인스턴스를
customType.hls생성Hls하여 DPlayer<video>요소에 연결합니다. 이는 특수한 경우를 처리하거나 HLS 스트림을 더 세부적으로 제어하는 데 유용합니다.FLV의 예: 마찬가지로 이 코드는 를 생성하여 FLV 스트림을 처리하는 요소
flvPlayer에 연결합니다 .<video>
이러한 속성을 사용하면 간단한 비디오부터 라이브 스트리밍까지 모든 요구 사항에 맞는 강력하고 사용자 정의가 가능한 비디오 플레이어를 만들 수 있습니다.