web-dev-qa-db-fra.com

Lecture de fichiers m3u8 avec une balise vidéo HTML

J'essaie d'utiliser HTTP Live Streaming (HLS) pour diffuser de la vidéo sur mes ordinateurs et mon iPhone. Après avoir lu la "Présentation de la diffusion HTTP en direct HTTP" de Apple, ainsi que les "Meilleures pratiques pour la création et le déploiement de supports de diffusion en direct HTTP en direct pour iPhone et iPad", je suis un peu coincé.

J'ai pris mon fichier source (un fichier mkv) et utilisé ffmpeg pour coder le fichier au format MPEG-TS, ainsi que 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 là-bas. J'ai utilisé un outil de segmentation pré-compilé pour segmenter la vidéo et créer une 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é cela par rapport à Example Playlist Files à utiliser avec HTTP Live Streaming , et je ne vois aucun problème. J'ai également essayé de lire le fichier .m3u8 dans VLC et cela fonctionne à merveille.

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 bien sur mon ordinateur et la présentation officielle d’Apple mentionnée ci-dessus donne un exemple HTML très similaire à ma page. Néanmoins, mon lecteur vidéo ne répond absolument pas lorsque je visite ma propre page .m3u8.

htmlstreaminghtml5-videohttp-live-streamingm3u8
31
drucifer

La réponse pourrait être un peu tardive, mais vous devez fournir l'attribut de type MIME dans la balise video: type = "application/x-mpegURL". Le tag 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>
36
ben.bourdin
<html>
<body>
    <video width="600" height="400" controls>
        <source src="index.m3u8" type="application/x-mpegURL">
    </video>
</body>

Diffusez les fichiers HLS ou m3u8 en utilisant le code ci-dessus . Il fonctionne avec le navigateur Edge, chrome, opera mini (navigateur mobile) (ne fonctionne pas avec pc chrome)

Pour jouer sur tous les navigateurs, utilisez un lecteur multimédia Flash . lecteur multimédia prenant en charge tous les navigateurs

6
Rakyesh Kadadas

En ajoutant à la réponse ben.bourdin, vous pouvez au moins, dans toute 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 soit "myVideo", puis vous pouvez utiliser la fonction "canPlayType" (javascript) ( 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:

"" lorsqu'il n'y a pas de prise en charge du type audio/vidéo spécifié

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

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

J'espère que cette aide :)

Meilleures salutations!

5
MaxTomasello

Utilisez 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="$812975748999788" 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 sur le site web flowplayer.org.

3
Jithu Wilson C

Vous pouvez utiliser la bibliothèque video js pour lire facilement les vidéos de HLS . Il permet de lire directement des vidéos 

<!-- CSS  -->
 <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">
<!-- HTML -->
<video id='hls-example'  class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="http://www.streambox.fr/playlists/test_001/stream.m3u8">
</video>
<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>
<script>
var player = videojs('hls-example');
player.play();
</script>

Video Js GitHub

0
Rakyesh Kadadas