Reproductor compatible con HTML5 y Streaming M3U8 Aplicado a WordPress

Nos consultaron lo siguiente: 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.

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.

<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>

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.

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

3. Otros

Adicionalmente, y como todo mundo podría dar fe, 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

 <div data-player-id="9cd385cc-dd2b-4e85-9d11-9ab11c2b540f">
  <script src="//cdn.flowplayer.com/players/b6e0b310-9aa3-4f3b-9a30-cbbc3e9c04f3/native/flowplayer.async.js">
    { "src": "3afc64ea-fe85-456c-b9d7-6d1de8350ff2" }
  </script>
</div>