Lecture de fichiers m3u8 avec la balise vidéo HTML

j'essaie D'utiliser le Streaming HTTP Live (HLS) pour diffuser des vidéos sur mes ordinateurs et mon iPhone. Après avoir lu à travers L'Apple 'HTTP Live Streaming Overview 'ainsi que' Best Practices for Creating and Deploying HTTP Live Streaming Media for the iPhone and iPad', je suis un peu coincé.

j'ai pris mon fichier source (un mkv) et j'ai utilisé ffmpeg pour encoder le fichier au format MPEG-TS et les paramètres recommandés par Apple et un profil Baseline 3.0:

ffmpeg -i "example.mkv" -f mpegts -threads:v 4 -sws_flags bicubic -vf "scale=640:352,setdar=16/9,ass=sub.ass" -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af "aresample=48000" -codec:a libvo_aacenc -b:a 96k -ac 2  -y "output.ts"

Pas de soucis. Je utilisé un outil de segmentation précompilé pour segmenter la vidéo et construire un .m3u8 liste de lecture. Le fichier résultant ressemblait à ceci:

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXTINF:10,
http://localhost/media/stream/stream-1.ts
#EXTINF:10,
http://localhost/media/stream/stream-2.ts
#EXTINF:10,
http://localhost/media/stream/stream-3.ts
#EXT-X-ENDLIST

j'ai vérifié que contre certains exemple de fichiers de sélection à utiliser avec la diffusion en direct de HTTP, et je ne vois aucun problème. J'ai aussi essayé de jouer la .m3u8 fichier en VLC, et il fonctionne comme un charme.

j'ai créé une page HTML pour lire le fichier:

<html lang="en">
    <head>
        <meta charset=utf-8/>
    </head>
    <body>
        <div id='player'>
            <video width="352" height="288" src="stream.m3u8" controls autoplay>
            </video>
        </div>
    </body>
</html>

et cette page ne fonctionne pas dans Chrome, Safari, sur mon iPhone. Les exemples de balises vidéo html5 sur w3schools fonctionnent très bien sur mon ordinateur, et L'aperçu officiel D'Apple mentionné ci-dessus donne un exemple HTML très similaire à ma page. Néanmoins, mon lecteur vidéo est complètement insensible lorsque je visite mon propre .m3u8 page.

27
demandé sur Majid 2013-11-05 09:22:35

4 réponses

peut être un peu en retard avec la réponse mais vous devez fournir l'attribut MIME type dans la balise vidéo: type="application/x-mpegURL". La balise vidéo que j'utilise pour un flux 16:9 ressemble à ceci.

<video width="352" height="198" controls>
    <source src="playlist.m3u8" type="application/x-mpegURL">
</video>
33
répondu ben.bourdin 2014-04-22 16:50:58

ajouter à ben.Bourdin réponse, vous pouvez au moins dans N'importe quelle application basée sur HTML, vérifier si le navigateur prend en charge HLS dans son élément vidéo:

supposons que votre ID d'élément vidéo est "myVideo", alors par javascript vous pouvez utiliser la fonction" canPlayType" (http://www.w3schools.com/tags/av_met_canplaytype.asp)

var videoElement = document.getElementById("myVideo");
if(videoElement.canPlayType('application/vnd.apple.mpegurl') === "probably" || videoElement.canPlayType('application/vnd.apple.mpegurl') === "maybe"){
    //Actions like playing the .m3u8 content
}
else{
    //Actions like playing another video type
}

la fonction canPlayType, retourne:

"" quand il n'y a pas de support pour l'audio/vidéo type

"peut-être" quand le navigateur peut supporter le type audio/vidéo spécifié

"probablement" lorsqu'il est probable qu'il prend en charge l'audio spécifié/type de vidéo (vous pouvez utiliser cette valeur dans la validation pour être plus sûr que votre navigateur prend en charge le type spécifié)

Espérons que cela aide :)

cordialement!

5
répondu MaxTomasello 2016-08-11 14:24:26 
<html>
<body>
    <video width="600" height="400" controls>
        <source src="index.m3u8" type="application/x-mpegURL">
    </video>
</body>

Stream des fichiers HLS ou m3u8 en utilisant le code ci-dessus. cela fonctionne pour edge browser, chrome, opera mini (Navigateur mobile) (ne fonctionne pas avec PC chrome)

pour jouer sur tous les navigateurs, utilisez flash Media based player. media player pour soutenir tous les navigateurs

5
répondu Rakyesh Kadadas 2017-01-03 10:04:57

Utiliser Flowplayer:

<link rel="stylesheet" href="//releases.flowplayer.org/7.0.4/commercial/skin/skin.css">
    <style>

   </style>
   <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="//releases.flowplayer.org/7.0.4/commercial/flowplayer.min.js"></script>
  <script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script> 
  <script>
  flowplayer(function (api) {
    api.on("load", function (e, api, video) {
      $("#vinfo").text(api.engine.engineName + " engine playing " + video.type);
    }); });
  </script>

<div class="flowplayer fixed-controls no-toggle no-time play-button obj"
      style="    width: 85.5%;
    height: 80%;
    margin-left: 7.2%;
    margin-top: 6%;
    z-index: 1000;" data-key="2975748999788" data-live="true" data-share="false" data-ratio="0.5625"  data-logo="">
      <video autoplay="true" stretch="true">

         <source type="application/x-mpegurl" src="http://live.wmncdn.net/safaritv2/live2.stream/index.m3u8">
      </video>   
   </div>

différentes méthodes sont disponibles en flowplayer.org site web.

3
répondu Jithu Wilson C 2017-12-14 13:04:54