web-dev-qa-db-fra.com

Comment lire une vidéo m3u8 (fichier) à l'aide de l'élément <video> HTML5?

Je suis tombé sur ce lien stackoverflow qui parle de la lecture d’un fichier m3u8: Lecture de fichiers m3u8 avec une balise vidéo HTML

J'ai essayé de faire quelque chose de similaire pour lire le lien vidéo dans le fichier m3u8 comme sur phpfiddle: 

    echo '<video width="352" height="198" controls>
<source src="https://udemy-adaptive-streaming-prod.udemy.com/9287/72689/2012-04-30_04-09-49-f5ad53b1736807ee7f8837b37115aeeb/hls/677cda5a7077be8d22348b5edebd77db.m3u8?sign=%252BCIehx2LKCxUcNSU33mWdfm5SbA%253D&mign=EEsJDxEabAoMa1kFRgIfbEkIDw8RHGwKDGtZXAFYS3lHSwgIGEoJUl57U1sfTBQlBTYIFRkNEVlZfVtaAl5Dc15fAQ==&quality=HD" type="application/x-mpegURL"></video>';

Mais ça ne marche pas. Il semble montrer l'élément vidéo mais la vidéo n'y est pas chargée. Est-il possible de lire les fichiers m3u8 de cette façon? Le fichier m3u8 que je veux lire se trouve à l'intérieur du "https://www.udemy.com/Excel-tutorial/

Merci pour toute aide. 

phphtml5html5-video
6
vjks

Utilisez le package hls.js du client JavaScript HLS se trouvant sur github . Utilisé par de nombreuses organisations établies. Fonctionne sur tous les navigateurs.

Un exemple de page rapide:

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <video id="video" controls></video>
    <script>
    if(Hls.isSupported())
    {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource('playlist.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function()
        {
            video.play();
        });
    }
    else if (video.canPlayType('application/vnd.Apple.mpegurl'))
    {
        video.src = 'playlist.m3u8';
        video.addEventListener('canplay',function()
        {
            video.play();
        });
    }
    </script>
  </body>
</html>

Remplacez 'playlist.m3u8' par votre playlist.

9
Jahmic

Un fichier m3u8 est un manifeste HLS, qui permet la diffusion en continu adaptative. Pour lire un flux HLS, vous devez trouver un lecteur vidéo HLS afin de lire plusieurs appareils sur tous les navigateurs. Vous pouvez même en créer un vous-même, par exemple avec JavaScript.

Vous pouvez également google free HLS players (souvent manquant de fonctionnalités), ou utiliser un lecteur HLS commercial tel que THEOplayer .

1
Thijs Lowette