web-dev-qa-db-fra.com

Comment puis-je jouer Apple HLS live stream en utilisant le tag vidéo html5

<video id="live"  autoplay controls>
    <source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>

J'essaie de lire le flux en direct codé h264 en utilisant la balise vidéo html5. Le flux en direct est diffusé par le serveur multimédia wowza et lorsque je visite le lien src, j'obtiens un fichier de liste de lecture valide. Lorsque vous essayez de lire le flux sur le navigateur Android chrome, le lecteur ne fait rien et affiche un écran noir.

Est-ce un problème lié au tag vidéo html5 ou peut-être un diffuseur?

html5videolive-streamingwowza
24
jM2.me

Ce sont les formats que vous pouvez lire en utilisant des balises source html5.

Considérez un format vidéo comme un fichier Zip contenant le flux vidéo et le flux audio encodés. Les trois formats dont vous devez vous soucier pour le Web sont (webm, mp4 et ogv):

.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
9
robert

Il existe en fait une bonne gamme de solutions pour cela. Une solution serait de détecter si HLS peut être joué:

document.createElement('video').canPlayType('application/vnd.Apple.mpegURL') !== ''

Cependant, cela ne vous permettrait pas de lire du contenu HLS sur des appareils qui ne prennent pas en charge la lecture. À l'heure actuelle, la lecture n'est prise en charge que sur Microsoft Edge, iOS Safari, OS X Safari et Android ( cependant, je déconseille fortement d'utiliser HLS sur Android en raison de limitations )

Une autre solution pour jouer HLS sur toutes les plateformes en HTML5 est d'utiliser un lecteur HTML5 HLS tel que THEOplayer . Ils ont réussi à autoriser la lecture de HLS sur toutes les plates-formes et appareils populaires , y compris ceux sans Media Source Extension support. Actuellement, la liste des navigateurs et plates-formes pris en charge comprend: Internet Explorer, Edge, Firefox, Chrome, Opera et Safari sur Windows, Linux, Mac OS X, Android, iOS et Windows Phone.

6
MrP

Sur les navigateurs prenant en charge Media Source Extension vous pouvez utiliser https://github.com/dailymotion/hls.js

4
mangui

Essayez FlowPlayer . Il fournit un support HLS complet avec le moins d'effort côté serveur!

2
XlbrlX

Pour les solutions de contournement utilisant le flash, vous pouvez utiliser FlasHLS lecteur sans chrome.

2
flavioribeiro