estoy tratando de crear una aplicación web para reproducir mi contenido .M3U8
en Streaming, pero no encuentro la forma de reproducirlo. Si utilizo HTML5 y vídeo, solamente me deja cargar .MP4
pero no reproduce mi streaming .M3U8
como lo pueden hacer flowplayer o jwplayer. La cuestión está en si se conoce algún servicio gratuito que me permita lograr mis objetivos.
1 respuesta
El tag video de HTML debería de funcionar con m3u8 si no hay bloqueo de CORS y cosas del streaming. Sin embargo sé que puede ocasionar problemas en ocasiones específicas.
Acá te comparto un par de reproductores que uso personalmente, cada uno con sus propias virtudes.
1. Clappr - Web Oficial
Para mi, este es el mejor y más completo reproductor por todas las opciones y plugins que te deja agregar y utilizar a tu gusto.
2. JW Player - Web Oficial
JW es muy bonito estéticamente, pero también funcional, no tiene nada que envidiarle a Clappr. No estoy muy seguro, pero creo que también posee PLugins y demás funcionalidades (como skins) para personalizarlo.
Te adjunto ejemplos funcionales de esos dos reproductores
Ejemplo - Codepen Clappr
<head>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js">
</script>
</head>
<body>
<div id="player"></div>
<script>
var player = new Clappr.Player({source: "https://5b50404ec5e4c.streamlock.net/8030/8030/chunklist.m3u8", parentId: "#player"});
</script>
</body>
Ejemplo - Codepen JW Player
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://jwpsrv.com/library/FfMxTl3oEeSEiiIACxmInQ.js"></script>
<div id="aRzklaXf">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("aRzklaXf");
playerInstance.setup({
"file": "https://5b50404ec5e4c.streamlock.net/8030/8030/chunklist.m3u8",
"height":"560",
"width":"50%",
stretching: "bestfit",
"image": "#",
"mediaid": "player",
"mute": false,
"autostart": false,
"cast": {
"appid": "player",
"logo": "https://i.ibb.co/Tgk2YrC/Logo.png",
},
});
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
Aidicionalmente, y como todo mundo podría dar fé, la palabra de una sola persona no es ley, es decir, para mi los anteriores pueden ser los mejores reproductores, pero para alguien más pueden ser los peores.
Hay un par de opciones más como:
Flowplayer - Web Oficial
Bitmovin Player - Web Oficial
DASH Js Player - Web Oficial
HLS JS Player - Web Oficial
Espero que mi respuesta sea de ayuda, si tienes dudas adicionales, estaré encantado de ayudar.
-
Se te agradece el aporte pero he de comentarte que las preguntas basadas en opiniones o recomendaciones terminan cerrada pues no se ajustan al formato del sitio– BetaMel 30 oct. 2020 a las 18:47
-
Hola @BetaM soy nuevo en el sitio, sin embargo la pregunta tiene algún tiempo de estar publicada, por eso me decidí a responder. Gracias por la aclaración el 30 oct. 2020 a las 18:48
-
Te comento que así pueden quedar en tanto son votadas para terminar cerradas por lo que ya te comenté– BetaMel 30 oct. 2020 a las 18:49
-