Che cos'è DPlayer?
DPlayer è un lettore video open source potente e flessibile. Supporta non solo i formati video più comuni come MP4, ma gestisce anche flussi HLS e FLV, rendendolo ideale per la riproduzione video in diretta. DPlayer si distingue per la sua interfaccia minimalista e personalizzabile e per la funzione "danmaku"(commenti mobili) integrata.
Una guida dettagliata all'utilizzo di DPlayer
Per utilizzare DPlayer, è necessario incorporare la libreria e tutte le dipendenze necessarie, quindi configurare il lettore.
Passaggio 1: ottenere le librerie necessarie
Utilizzare una CDN è il modo più rapido per ottenere queste librerie. DPlayer rileverà e utilizzerà automaticamente le librerie dipendenti se le includi nella tua pagina.
Per MP4(predefinito):
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>Per 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>Per 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>
Passaggio 2: creare HTML e configurare il lettore
Dopo aver incorporato le librerie, puoi creare un <div>elemento per visualizzare il video e quindi configurare DPlayer con proprietà specifiche.
<!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>Spiegazione dettagliata delle proprietà
Proprietà comuni(applicabili a tutti i tipi di video)
container: L'elemento DOM in cui verrà renderizzato DPlayer. Obbligatorio.autoplay:trueofalse. Riproduce automaticamente il video quando la pagina viene caricata.theme: Codice colore esadecimale(ad esempio,'#FADFA3'). Imposta il colore di accento del lettore.lang: La lingua dell'interfaccia utente, ad esempio'en'l'inglese.loop:trueofalse. Riproduce in loop il video dopo la sua fine.hotkey:trueofalse. Abilita le scorciatoie da tastiera(ad esempio, barra spaziatrice per riprodurre/mettere in pausa).preload:'auto','metadata', o'none'. Come il browser precarica il video.'auto': Precarica l'intero video.'metadata': Precarica solo i metadati(durata, dimensioni).'none': Non precarica nulla.
screenshot:trueofalse. Consente agli utenti di acquisire screenshot del video.video.url: Il percorso del file video.video.pic: Il percorso all'immagine in miniatura.video.thumbnails: Il percorso verso uno sprite miniatura per la barra di ricerca.
Proprietà per HLS e FLV
Questi tipi di video richiedono librerie esterne per funzionare. DPlayer le utilizza automaticamente, ma è anche possibile personalizzarne il comportamento tramite la customTypeproprietà.
video.type: Specifica il tipo di video.'mp4': Predefinito, può essere omesso.'hls': Per.m3u8i video.'flv': Per.flvi video.
video.customType: Un oggetto che consente di personalizzare la logica di elaborazione per ogni tipo di video.Esempio con HLS: il codice all'interno
customType.hlscreaHlsun'istanza e la collega all'elemento di DPlayer<video>. Questo è utile per gestire casi speciali o per ottenere un maggiore controllo sul flusso HLS.Esempio con FLV: Analogamente, questo codice crea un elemento
flvPlayere lo collega all'elemento<video>per gestire il flusso FLV.
Grazie a queste proprietà, puoi creare un lettore video potente e altamente personalizzabile per qualsiasi esigenza, dai semplici video ai live streaming.