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

Question

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

Demandé el 7 de Décembre, 2016: Quand la question a-t-elle été
15596 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis tombé sur ce lien de stackoverflow qui parle de la lecture d'un fichier m3u8 : Lecture de fichiers m3u8 avec la 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. L'élément vidéo semble s'afficher, mais la vidéo n'est pas chargée dans l'élément. Est-il possible de lire des fichiers m3u8 de cette manière ? Le fichier m3u8 que je veux lire se trouve dans le fichier "https://www.udemy.com/excel-tutorial/".

Merci pour toute aide.

Demandé el 7 de Décembre, 2016 par vjks

Answer 1

2 Réponses

Answer 2

27voto

Jahmic Points 1878

Utilisez le paquetage JavaScript HLS client hls.js trouvé sur github . Utilisé par de nombreuses organisations établies. Fonctionne sur tous les navigateurs.

Une page d'exemple 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 liste de lecture.

Répondu el 8 de Février, 2018 par Jahmic (1878 Points )

Answer 3

0voto

Thijs Lowette Points 41

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

Vous pouvez également lecteurs HLS gratuits de google (souvent dépourvu de fonctionnalités), ou utiliser un lecteur HLS commercial comme THEOplayer .

Répondu el 4 de Janvier, 2017 par Thijs Lowette (41 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: