Una vez más aquí. El artículo de hoy lo vengo a dejar por que un usuario me ha preguntado por qué siguiendo un artículo que publiqué hace ya unos años no puede reproducir emisiones m3u8 desde su teléfono móvil, en un servidor que se ha montado. El caso es que en el ejemplo que incluí en aquel artículo, hay un enlace de ejemplo que funciona desde mi teléfono móvil. Bueno, el caso es que me puesto a ver el código de aquel artículo y de otros, y me encontrado con que aquello tiene ya 4 o 5 años … y como todo el mundo sabe, en informática las cosas se actualizan a menudo. Por esta razón he buscado una nueva versión del reproductor VideoJS (personalmente me parece el mejor de todos los que he encontrado) y la he puesto a funcionar para lo que a mi me interesa, que es reproducir emisiones m3u8, aun que también reproduce sin problemas otros tipos de vídeos (webm, ogv, mp4, etc …). También quiero decir, que según indican en la página web de este reproductor funciona en diferentes navegador web modernos y en teléfonos inteligentes.
Tabla de contenidos
Código para el reproductor
A continuación voy a colocar el código para que se vea lo sencilla que es la estructura del archivo index.php. Pero además de este archivo, será necesario un archivo .js y otro .css, los cuales se pueden descargar desde el enlace que podré más abajo.
El código del archivo al que llegará el usuario y en el que tendremos que añadir la URL a reproducir es el siguiente:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Reproductor Video.js</title>
<link href="css/video-js.min.css" rel="stylesheet">
<style>
body {
background-color: #000
}
.m {
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
#titulo {
text-align: center;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<span id="titulo"><h1>Reproducor Video-js</h1></span>
<div class="m">
<video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
poster="m.jpg" data-setup="{}">
<!--URL A REPRODUCIR-->
<source src="https://rtvelivestreamv3.akamaized.net/rtvesec/la1_bkp_dvr.m3u8" type="application/x-mpegURL">
<!-- <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
<source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> -->
<p class="vjs-no-js"> Para ver este video, habilita JavaScript y considera actualizar a un navegador web que <a href="https://videojs.com/html5-video-support/" target="_blank">soporte vídeo HTML5</a> </p>
</video>
<script src="js/video.min.js"></script>
<script type="text/javascript">
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>
</div>
</body>
</html>
Bueno, el caso es que como se puede ver en este código, tan solo tenemos que establecer la etiqueta de vídeo con sus características, y justo debajo se indica la URL a reproducir. En el código se pueden encontrar varias, pero todas ellas funcionan. Hay que destacar que en estas líneas, además de la URL es necesario especificar la opción type para cada tipo de reproducción. La habilitada es la emisión m3u8, que como puede verse la opción type es «application/x-mpegURL».
Después de las URL se establece el aviso por si el navegador web no soporta HTML5. Tras esto se carga la librería JS minificada y justo debajo se establecen los parámetros para hacer funcionar el reproductor que se verá en pantalla.
Me olvidaba decir que en la parte superior del código se cargan las CSS. Las necesarias para las opciones del reproductor se cargan en un archivo y las que se utilizan para poner un poco más bonito el reproductor las cargué directamente.
Una vez que todos los archivos están colocados en nuestro servidor, y accedemos a la ubicación de este archivo .index.php, veremos algo como lo siguiente antes de empezar a reproducir el vídeo:
Si la URL que indicamos como fuente funciona, solo necesitaremos dar al botón del play para comenzar la reproducción.
Descargar todo el código del reproductor con VideoJS
Como decía líneas más arriba, hay algunos archivos necesarios para que este reproductor web funcione. Por este motivo he subido a mediafire un paquete .zip para quien los quiera los pueda descargar. Tengo que decir que he utilizado el acortador Adfly, por lo que será necesario esperar los cinco segundos de rigor a que pase la publicidad. Después aparecerá el botón que lleva a la descarga desde mediafire, el cual se sitúa en la parte superior derecha.
Si quieres ver este reproductor con VideoJS funcionando antes de descargar nada, solo necesitas seguir este enlace a la página de ejemplo.