¿Cómo puedo reproducir la transmisión en vivo de Apple HLS usando la etiqueta de video html5?

3 minutos de lectura

avatar de usuario
jM2.me

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

Estoy tratando de reproducir una transmisión en vivo codificada en h264 usando una etiqueta de video html5. La transmisión en vivo es transmitida por el servidor de medios wowza y cuando visito el enlace src obtengo un archivo de lista de reproducción válido. Al intentar reproducir la transmisión en el navegador Chrome de Android, el reproductor no hace nada y muestra una pantalla en negro.

¿Este problema está relacionado con la etiqueta de video html5 o tal vez con la emisora?

  • Wowza tiene un transcodificador incorporado para convertir el flujo de publicación al formato Manifest.f4m que se reproduce dentro de la etiqueta de video HTML5 usando la API strobe.js. Enlace – sourceforge.net/adobe/smp/wiki/JavaScript%20API

    – Altanai

    25 de junio de 2015 a las 10:09

  • Puede usar algunos módulos de soporte de hls.
    stackoverflow.com/a/48003736/9143855

    usuario9143855

    28 de diciembre de 2017 a las 7:59

Estos son los formatos que puede reproducir usando etiquetas fuente html5.

Piense en un formato de video como un archivo zip que contiene el flujo de video codificado y el flujo de audio. Los tres formatos que debe tener en cuenta para la web son (webm, mp4 y ogv):

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

  • Gracias. Estaba transmitiendo H.264 a través de MP3 en lugar de AAC.

    – jM2.me

    8 de diciembre de 2013 a las 18:48

  • Probé secuencias de ejemplo de desarrollador.apple.com/streaming/examples pero ninguno de ellos se reproduce a pesar de que todos los formatos son H.264 + AAC. ¿Alguna idea de cuál es el problema?

    – MA1

    22 de noviembre de 2016 a las 11:16

En realidad, hay una buena gama de soluciones para esto. Una solución sería detectar si se puede jugar HLS:

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

Sin embargo, esto no le permitiría reproducir contenido HLS en dispositivos que no admitan la reproducción. En este momento, la reproducción solo es compatible con Microsoft Edge, iOS Safari, OS X Safari y Android (sin embargo, recomiendo enfáticamente no usar HLS en Android debido a las limitaciones)

Otra solución para reproducir HLS en todas las plataformas en HTML5 es usar un reproductor HTML5 HLS como jugador. Se las arreglaron para permitir que HLS se jugara en todas las plataformas y dispositivos popularesincluidos los que no tienen Extensión de fuente de medios apoyo. Actualmente, la lista de navegadores y plataformas compatibles incluye: Internet Explorer, Edge, Firefox, Chrome, Opera y Safari en Windows, Linux, Mac OS X, Android, iOS y Windows Phone.

En Navegadores compatibles Extensión de fuente de medios puedes usar https://github.com/dailymotion/hls.js

avatar de usuario
flavioribeiro

Para soluciones alternativas usando flash, puede usar FlasHLS jugador sin cromo.

Probar jugador de flujo. ¡Proporciona un soporte HLS completo con el menor esfuerzo en el lado del servidor!

¿Ha sido útil esta solución?