Inicio InformáticaVideoJS, reproduce vídeos en tu página web

VideoJS, reproduce vídeos en tu página web

Reproduce emisiones m3u8. webm, ogv y muchas otras

Publicado por entreunosyceros

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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.

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="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    	<source src="http://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="http://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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.