web-dev-qa-db-fra.com

Comment jouer à la vidéo html5 sur m3U8 sur mobile et sur ordinateur?

J'ai HLS m3u8 qui fonctionne bien sur IOS et Android avec html5 <video>

Mais ne joue pas sur PC de bureau ou MAC de bureau (Chrome, Firefox)

Comment jouer à m3u8 sur un ordinateur de bureau?

Existe-t-il un format vidéo en continu pouvant être lu à la fois sur le bureau et sur le mobile?

video-streaminghtml5-videom3u8
9
yarek

HLS ne fonctionnera que sur le bureau sous Mac OS Safari 6+. Regardez ici pour référence .

Pour la vidéo HTML5 sur le bureau, vous pouvez penser à utiliser MPEG DASH. Il a un JS lib qui fonctionne à la fois en direct et à la demande avec les navigateurs suivants:

À compter du 30/08/13, Desktop Chrome, Desktop Internet Explorer 11 et Mobile Chrome Beta pour Android sont les seuls navigateurs pris en charge.

Si vous souhaitez une couverture plus large des navigateurs/appareils avec la technologie de streaming adaptatif, vous devrez envisager d'utiliser Flash qui prend en charge les formats RTMP et HDS ou Silverlight avec Smooth Streaming (Flash, je dirais, une meilleure couverture). 

La plupart des entreprises de médias utilisent aujourd'hui une approche hybride pour vérifier au préalable avec JavaScript le contenu lisible et pour fournir le protocole de lecture/de diffusion approprié au moyen du code Flash (HDS/RTMP - desktop)/HTML5 (HLS - mobile). 

Pour votre information, vous pouvez lire le flux HLS avec un logiciel tel que VLC sur le bureau Windows.

6
Arnaud Leyder

jetez un oeil sur le projet hls.js à l’adresse https://github.com/video-dev/hls.js/ Ce problème est résolu exactement.

voici un petit échantillon sur la façon de l'utiliser.

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

une fois le manifeste analysé, vous pouvez utiliser tous les événements, propriétés et méthodes habituels de l'élément vidéo html5 d'origine.

vous pouvez trouver leur démo ici: https://video-dev.github.io/hls.js/demo/

6
Roey

Je sais que c'est un peu tard pour une réponse mais je cherchais cette information et ne pouvais pas trouver une bonne réponse sur stackoverflow ...

Autant que je sache, aucun format n’est prêt à l'emploi pour les appareils mobiles et les ordinateurs de bureau. Si vous voulez économiser de la puissance de transcodage et utiliser un seul format, je recommande HLS car il fonctionne parfaitement sur mobile et vous pouvez utiliser des bibliothèques gratuites pour afficher les vidéos dans le navigateur.

https://github.com/videojs/videojs-contrib-hls a un exemple de travail avec videojs. Il utilise HTML5 dans Safari et retombe en flash sur les autres navigateurs. Si vous avez un autre joueur en tête, vérifiez https://github.com/mangui/flashls pour plus d'exemples

4
eyeballz

Safari est le seul navigateur de bureau à prendre en charge HLS.

EDIT: danrossi a créé un plugin pour la version flash de Flowplayer qui prend en charge HLS mais n’est pas au format HTML5. lisez plus ici: http://justhackme.wordpress.com/2013/03/10/apples-http-live-streaming-in-flash/

0
Dov D.
<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

0
Rakyesh Kadadas