http live streaming - meaning - ¿Cómo reproducir la lista de reproducción m3u8 en todos los navegadores de PC?
http live streaming example (4)
Por defecto, los archivos m3u8 se pueden reproducir en el navegador Mac Safari, pero no en otros navegadores de escritorio. ¿Qué se necesita hacer para reproducirlos en todos los navegadores, tanto compatibles con HTML5 como no HTML5?
Desafortunadamente, el soporte de HTML5 para video está tan fragmentado que, para todos los propósitos y propósitos, es inútil (al menos como un enfoque principal) en este momento. Las listas de reproducción de M3U8 son Apple HTTP Live Streaming, y como se puede ver por el nombre, son (o al menos comenzaron como) un estándar de Apple, ningún otro navegador las usa, o HTTP Live Streaming.
Hay algunos programas que puede instalar para agregar soporte para HLS. Algunas compañías, por ejemplo, han producido reproductores HLS escritos en Flash o Silverlight. Yospace ha producido un SDK de flash para la reproducción de HLS que incluye un proveedor de medios JWPlayer que le permite usar el repliegue automático de HTML5 de JW en dispositivos no flash (lea: iPhone / iPad), mientras que todos los demás obtienen la experiencia de JWPlayer.
Ha habido muchas promesas de varias compañías para "estandarizar el soporte de video del navegador", pero todas (hasta ahora) han quedado en nada, por lo que cualquiera que sea la opción que elija, será una especie de compromiso.
Microsoft Edge reproduce archivos m3u8, pero debe tener Windows 8 o 10 ... Simplemente abra Microsoft Edge, escriba la URL del archivo m3u8 y comenzará a reproducirse.
No entiendo exactamente cuál es el trato con las listas de reproducción .m3u8 ... pero no me gustan especialmente ... Dicho esto, this parece pensar que hace lo que quieres ... this
Las etiquetas de audio y video HTML5 hacen que la integración de medios en documentos sea tan fácil como incrustar una imagen. Todo lo que necesita es una sola etiqueta. HTML5 le permite incrustar video y audio en su documento ...
Todo lo que tienes que hacer es incrustar un javascript en el documento de HTML, y algún tipo de magia, o la falta de ella ... hace el resto ...
<script src="/path/to/your/html5media.min.js"></script>
Pude reproducir películas .m3u8, transmitidas desde un servidor Wowza en navegadores de escritorio mediante una incrustación nativa html5, como ...
<video src="video.mp4" width="320" height="240" controls preload></video>
Sin embargo, NO he podido lograr que pasen a "pantalla completa" a través de controles HTML nativos ... pero lo estoy investigando ...
Utilicé flowplayer. Es muy fácil de configurar y poner en marcha, funciona en todos los navegadores y es gratis, a menos que quieras tu propia marca ... (a diferencia de JW player).
Obtener el reproductor de flujo aquí descargar el reproductor de flujo
Logré configurar la reproducción HLS correctamente siguiendo esta demostración.
Una cosa a tener en cuenta, que la demo no menciona es eso.
- Necesitará jquery> 1.7
- Incluirás el skin del jugador en el HTML.
Aquí está mi página de trabajo que ejecuta HLS, por ejemplo:
<!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>