Qu'est-ce que DPlayer ?
DPlayer est un lecteur vidéo open source puissant et flexible. Il prend en charge non seulement les formats vidéo courants comme MP4, mais aussi les flux HLS et FLV, ce qui le rend idéal pour la lecture vidéo en direct. DPlayer se distingue par son interface minimaliste et personnalisable et sa fonctionnalité intégrée de « danmaku »(commentaires flottants).
Un guide détaillé sur l'utilisation de DPlayer
Pour utiliser DPlayer, vous devez intégrer la bibliothèque et toutes les dépendances nécessaires, puis configurer le lecteur.
Étape 1 : Obtenir les bibliothèques nécessaires
Utiliser un CDN est le moyen le plus rapide d'obtenir ces bibliothèques. DPlayer détectera et utilisera automatiquement les bibliothèques dépendantes si vous les incluez dans votre page.
Pour MP4(par défaut) :
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>Pour 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>Pour 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>
Étape 2 : Créer le code HTML et configurer le lecteur
Après avoir intégré les bibliothèques, vous pouvez créer un <div>élément pour afficher la vidéo, puis configurer DPlayer avec des propriétés spécifiques.
<!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>Explication détaillée des propriétés
Propriétés communes(applicables à tous les types de vidéos)
container: L'élément DOM où DPlayer sera rendu. Obligatoire.autoplay:trueoufalse. Lit automatiquement la vidéo lorsque la page se charge.theme: Code couleur hexadécimal(par exemple,'#FADFA3'). Définit la couleur d'accentuation du lecteur.lang:La langue de l'interface utilisateur, par exemple'en'l'anglais.loop:trueoufalse. Boucle la vidéo après sa fin.hotkey:trueoufalse. Active les raccourcis clavier(par exemple, la barre d'espace pour lire/mettre en pause).preload:'auto','metadata', ou'none'. Comment le navigateur précharge la vidéo.'auto':Précharge la vidéo entière.'metadata': Précharge uniquement les métadonnées(durée, dimensions).'none':Ne précharge rien.
screenshot:trueoufalse. Permet aux utilisateurs de prendre des captures d'écran de la vidéo.video.url: Le chemin vers votre fichier vidéo.video.pic: Le chemin vers l'image miniature.video.thumbnails:Le chemin vers un sprite miniature pour la barre de recherche.
Propriétés pour HLS et FLV
Ces types de vidéos nécessitent des bibliothèques externes pour fonctionner. DPlayer les utilise automatiquement, mais vous pouvez également personnaliser leur comportement via la customTypepropriété.
video.type: Spécifie le type de vidéo.'mp4':Par défaut, peut être omis.'hls':Pour.m3u8les vidéos.'flv':Pour.flvles vidéos.
video.customType:Un objet qui vous permet de personnaliser la logique de traitement pour chaque type de vidéo.Exemple avec HLS : le code
customType.hlscrée uneHlsinstance et l'attache à l'élément DPlayer<video>. Ceci est utile pour gérer des cas particuliers ou pour mieux contrôler le flux HLS.Exemple avec FLV : De même, ce code crée un
flvPlayeret l’attache à l’<video>élément pour gérer le flux FLV.
Grâce à ces propriétés, vous pouvez créer un lecteur vidéo puissant et hautement personnalisable pour tous les besoins, des vidéos simples aux flux en direct.