Maîtriser les technologies clés de la lecture de flux HLS
HLS.js est une bibliothèque JavaScript open source qui implémente un client HLS (HTTP Live Streaming), permettant de lire des flux HLS dans les navigateurs prenant en charge MSE (Media Source Extensions). Développé et maintenu par Dailymotion, c'est l'une des solutions de lecture HLS web les plus populaires actuellement.
Contrairement au navigateur Safari qui prend en charge HLS nativement, Chrome, Firefox, Edge et d'autres navigateurs ne prennent pas en charge le format HLS nativement et nécessitent l'utilisation de bibliothèques JavaScript comme HLS.js pour implémenter la fonction de lecture.
Le principe de fonctionnement d'HLS.js peut être divisé en plusieurs étapes clés :
HLS.js récupère d'abord le fichier de playlist M3U8 via une requête HTTP, puis analyse son contenu, notamment :
Après avoir analysé la playlist, HLS.js télécharge les segments TS un par un dans l'ordre de lecture et ajoute les données au SourceBuffer de MediaSource. En même temps, il maintient une file d'attente de mémoire tampon pour assurer la continuité de la lecture.
HLS.js surveille en temps réel la bande passante réseau et l'état de la mémoire tampon, et bascule automatiquement vers un flux vidéo de débit approprié selon un algorithme prédéfini, afin de garantir un équilibre entre la fluidité de la lecture et la qualité de l'image.
Voici un exemple d'utilisation le plus simple d'HLS.js, qui ne nécessite que quelques lignes de code pour lire un flux vidéo HLS dans une page web.
Vous pouvez importer HLS.js directement via CDN, c'est le moyen le plus simple :
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>Ajoutez un élément vidéo dans la page :
<video id="video" controls playsinline></video>Utilisez le code suivant pour initialiser HLS.js et charger la vidéo :
const video = document.getElementById('video');
const videoUrl = 'https://example.com/stream.m3u8';
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(videoUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoUrl;
video.addEventListener('loadedmetadata', function() {
video.play();
});
}HLS.js offre de nombreuses options de configuration qui peuvent être ajustées selon les besoins réels :
Convient aux scènes de diffusion en direct, peut réduire efficacement la latence de lecture :
const hls = new Hls({
lowLatencyMode: true,
liveSyncDurationCount: 3
});Spécifiez le niveau de qualité par défaut pour la lecture :
const hls = new Hls({
startLevel: 2, // Commencer au 3e niveau de qualité
autoStartLoad: true
});Ajustez la taille de la mémoire tampon pour équilibrer l'occupation de la mémoire et la stabilité de la lecture :
const hls = new Hls({
maxBufferLength: 30, // Mémoire tampon maximale de 30 secondes
maxMaxBufferLength: 60 // Mémoire tampon maximale absolue de 60 secondes
});HLS.js fournit un système d'événements complet pour écouter divers changements d'état et erreurs :
hls.on(Hls.Events.ERROR, function(event, data) {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('Erreur réseau, tentative de récupération...');
hls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('Erreur média, tentative de récupération...');
hls.recoverMediaError();
break;
default:
console.log('Erreur irrécupérable');
hls.destroy();
break;
}
}
});Lors du déchargement de la page ou du changement de vidéo, n'oubliez pas d'appeler la méthode destroy pour libérer les ressources :
window.addEventListener('beforeunload', function() {
if (hls) {
hls.destroy();
}
});Assurez-vous que le serveur des fichiers M3U8 et TS est configuré avec les en-têtes CORS corrects, sinon HLS.js ne pourra pas charger les ressources. Les en-têtes de réponse suivants doivent être autorisés :
Access-Control-Allow-OriginAccess-Control-Allow-CredentialsPour améliorer l'expérience utilisateur, il est recommandé de définir une qualité initiale raisonnable en fonction de l'environnement réseau de l'utilisateur, ou de laisser l'utilisateur choisir manuellement.
En environnement de production, il est indispensable d'écouter l'événement ERROR et d'effectuer une récupération d'erreur ou un traitement de dégradation si nécessaire, pour offrir une indication conviviale à l'utilisateur.
HLS.js est une bibliothèque de lecture HLS open source puissante et à communauté active, c'est la solution de choix pour implémenter la lecture de flux HLS dans les pages web. Grâce à la présentation de cet article, nous espérons que vous avez une compréhension complète de l'utilisation de base d'HLS.js.
Si vous souhaitez expérimenter rapidement la fonction de lecture HLS, vous pouvez utiliser directement notre lecteur M3U8 en ligne, sans avoir à écrire de code pour lire des flux vidéo HLS dans le navigateur.
Plus d'articles intéressants et d'outils pratiques
Présente les approches courantes pour fusionner des vidéos segmentées M3U8 en fichiers MP4, y compris les outils en ligne, les méthodes de vérification par lecteur et les solutions courantes pour les développeurs.
Lire la suite →Couvre entièrement PC, mobile et web, recommande des solutions comme VLC, PotPlayer, les lecteurs web en ligne, et fournit des méthodes de dépannage courantes.
Lire la suite →Guide pour les débutants, vous apprend à regarder des directs FLV et RTMP via un lecteur web, y compris le principe des flux en direct, le tutoriel d'utilisation et les astuces de capture d'écran.
Lire la suite →Utilisez notre lecteur M3U8 en ligne gratuit, pas besoin de coder, lisez directement les flux HLS dans le navigateur
Essayer maintenant ➡