web-dev-qa-db-fra.com

Comment lire la liste de lecture m3u8 dans tous les navigateurs PC?

Par défaut, les fichiers m3u8 peuvent être lus dans le navigateur Mac Safari, mais pas dans les autres navigateurs de bureau. Que faut-il faire pour les lire dans tous les navigateurs, prenant en charge HTML5 et non HTML5?

http-live-streaming
27
sri

Malheureusement, la prise en charge HTML5 de la vidéo est si fragmentée qu'elle est, à toutes fins utiles, inutile (au moins comme objectif principal) à ce stade. Les listes de lecture M3U8 sont Apple HTTP Live Streaming, et comme vous pouvez le voir d'après le nom, elles sont (ou du moins ont commencé comme) un Apple standard, non un autre navigateur les utilise, ou HTTP Live Streaming.

Il existe certains programmes que vous pouvez installer pour ajouter la prise en charge de HLS. Certaines entreprises ont, par exemple, produit des lecteurs HLS écrits en Flash ou Silverlight. Yospace a produit un SDK flash pour la lecture HLS qui inclut un fournisseur de médias JWPlayer qui vous permet d'utiliser le repli automatique HTML5 de JW sur des appareils non flash (lire: iPhone/iPad), tandis que tous les autres bénéficient de l'expérience JWPlayer .

De nombreuses entreprises ont promis de "normaliser la prise en charge de la vidéo par navigateur", mais elles ont toutes (jusqu'à présent) échoué, alors quelle que soit l'option que vous choisissez, ce sera un compromis de toutes sortes.

10
Haqa

Microsoft Edge lit les fichiers m3u8 mais vous devez avoir Windows 8 ou 10 ... Ouvrez simplement Microsoft Edge et écrivez l'url du fichier m3u8 et il commencera à jouer.

5
user6375752

J'ai utilisé Flowplayer. Il est très facile à configurer et à démarrer et il fonctionne sur tous les navigateurs et est gratuit, sauf si vous voulez votre propre marque ... (contrairement au lecteur JW).

Obtenez le lecteur de flux ici téléchargement du lecteur de flux

J'ai réussi à configurer la lecture HLS en suivant cette démo.

Démo HLS

Une chose à noter, que la démo ne mentionne pas, c'est que.

  1. Vous aurez besoin de jquery> 1.7
  2. Vous inclurez le skin du joueur CSS dans le HTML

Voici ma page de travail qui exécute HLS, par exemple:

<!DOCTYPE html>
<html>
   <head>
      <title>Player</title>
      <link rel="stylesheet" href="/client/static/flowplayer-6.0.5/skin/functional.css">
      <script src="/client/static/flowplayer-6.0.5/jquery-1.12.4.min.js"></script>
      <script src="/client/static/flowplayer-6.0.5/flowplayer.min.js"></script>
      <script src="/client/static/flowplayer-6.0.5/flowplayer.hlsjs.min.js"></script>
   </head>
   <body>
      <div>
         <h3>Sample Video</h3>
      </div>
      <div id="player">
        <div data-live="false" data-ratio="0.5625" class="flowplayer fixed-controls" data-volume="0" style="max-width: 800px; max-height: 450px;">
            <video data-title="Sample Video">
            <source type="application/x-mpegurl" src="http://:8000/video_cache/d_stream_f7ccc24921ca6123d80d7d1a1a4bfaa1/stream_f7ccc24921ca6123d80d7d1a1a4bfaa1.m3u8">
            </video>
        </div>
         <p hidden id="vid">f7ccc24921ca6123d80d7d1a1a4bfaa1</p>
      </div>
   </body>
</html>
2
anu