EGALABS
¡Dedicados con pasión al diseño y programación web!

¡Déjanos tu email! te enviaremos los últimos artículos…

@

Jwplayer HTML5

Fecha: lunes 22, septiembre 2014  -  Categoria: Tutoriales

Comentarios: 0  -  Autor:

Jwplayer HTML5

En este nuevo tutorial haremos un recorrido por las configuraciones básicas del Jwplayer HTML5, veremos desde la instalación básica hasta los casos puntuales de dynamic streaming y listas de reproducción.

En sí, la instalación y configuración básica del Jwplayer HTML5 es igualmente de sencilla que su par en flash (swf), incluso aún más podríamos decir pues ya no tenemos que subir el archivo swf a nuestro servidor, simplemente con agregar el script de JavaScript en el head de nuestra página y luego llamar a la función al Jwplayer con la función que contiene sus parámetros y opciones.

Veremos también en este tutorial donde debemos poner la licencia comercial o nuestra licencia de prueba, como crear una playlist con esta nueva versión de HTML5, veremos también como realizar streaming de vídeos, en vivo, y de audio; así como también veremos en consiste el dynamic streaming y como presentar un mismo vídeo en resoluciones diferentes.

En estos nuevos tutoriales nos hemos hecho eco de muchas de sus críticas y reclamos, que siempre los tenemos en cuenta y los tomamos en forma constructiva, hemos implementado un nuevo modelo de presentación, exponiendo el índice de temas que se tratarán en estos nuevos tutoriales y luego pasando inmediatamente a su tratamiento y desarrollo, dividiendo el tema en secciones bien diferenciadas.

Esperamos que esta nueva serie de tutoriales les guste y sobre todo que les sirva enormemente para poder realizar con éxito y eficacia sus proyectos. Esperamos también, como siempre, que puedan dejarnos sus comentarios, opiniones y críticas, aquí o en nuestro canal en YouTube, también pueden hacerlo en nuestra página de Facebook o en nuestro Twitter.

Nos despedimos dejándoles como de costumbre la lista de reproducción en nuestro canal de YouTube y  debajo una lista con los ejemplo de códigos que hemos usado durante la realización del mismo. Éxitos y nos vemos en la siguiente parte de este tutorial donde trataremos de igual forma al Flowplayer versión HTML5.

https://www.youtube.com/playlist?list=PL–HjON6_vLNdkJgEgqpvmZxIoXhiK_Gr

Lista de ejemplo con los códigos usados.

Instalación básica:

<html>
	<head>
		<meta charset="utf-8">
		<title>Reproductores HTML5</title>
		<script src="http://jwpsrv.com/library/pd5b8GvGEeKVOiIACp8kUw.js"></script>
		<script>jwplayer.key="GkHt2vyJj6DDT5QI4s6esK9rdJSQ006rGOkPaA==";</script>
	</head>
	<body>
		<div id='miVideo'></div>
		<script type='text/javascript'>
		    jwplayer('miVideo').setup({
		        file: 'la_url_de_tu_video.mp4',
		        image: 'la_url_de_tu_imagen.jpg',
		        title: 'titulo_de_tu_video',
		        width: '100%',
		        aspectratio: '16:9'
		    });
		</script>
	</body>
</html>

Instalación con playlist:

<html>
	<head>
		<meta charset="utf-8">
		<title>Reproductores HTML5</title>
		<script src="http://jwpsrv.com/library/pd5b8GvGEeKVOiIACp8kUw.js"></script>
		<script>jwplayer.key="GkHt2vyJj6DDT5QI4s6esK9rdJSQ006rGOkPaA==";</script>
	</head>
	<body>
		<div id='miVideo'></div>
		<script type='text/javascript'>
		    jwplayer('miVideo').setup({
		    	playlist: "http://example.com/uploads/myPlaylist.rss",
		        width: '100%',
		        aspectratio: '16:9'
		    });
		</script>
	</body>
</html>

Playlist.rss:

<!-- Esto es parte del Cross-site scripting -->
Access-Control-Allow-Origin: www.elgaleonargentino.com.ar *.dominio2.com www.dominio3.com
<!-- Aquí comiensa la playlist -->
<rss version="2.0" xmlns:jwplayer="http://rss.jwpcdn.com/">
	<channel>

	  <item>
	    <title>Título de tu video</title>
	    <description>Descripción de tu video.</description>
	    <jwplayer:image>url_a_tu_imgagen.jpg</jwplayer:image>
	    <jwplayer:source file="url_a_tu_video.mp4" />
	  </item>

	  <item>
	    <title>Título de tu video 2</title>
	    <description>Descripción de tu video 2.</description>
	    <jwplayer:image>url_a_tu_imgagen2.jpg</jwplayer:image>
	    <jwplayer:source file="url_a_tu_video2.mp4" />
	  </item>

	  <item>
	    <title>Título de tu video 3</title>
	    <description>Descripción de tu video 3.</description>
	    <jwplayer:image>url_a_tu_imgagen3.jpg</jwplayer:image>
	    <jwplayer:source file="url_a_tu_video3.mp4" />
	  </item>

	</channel>
</rss>

Crossdomain.xml:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="http://egalabs.com" />
</cross-domain-policy>

RTMP con vídeos:

<html>
	<head>
		<meta charset="utf-8">
		<title>Reproductores HTML5</title>
		<script src="http://jwpsrv.com/library/pd5b8GvGEeKVOiIACp8kUw.js"></script>
		<script>jwplayer.key="GkHt2vyJj6DDT5QI4s6esK9rdJSQ006rGOkPaA==";</script>
	</head>
	<body>
		<div id='miVideo'></div>
		<script type='text/javascript'>
		    jwplayer('miVideo').setup({
		    	file: "rtmp://example.com/application/mp4:myVideo.mp4",
    			image: "/assets/myVideo.jpg",
		        width: '100%',
		        aspectratio: '16:9'
		    });
		</script>
	</body>
</html>

Opciones de RTMP:

<html>
	<head>
		<meta charset="utf-8">
		<title>Reproductores HTML5</title>
		<script src="http://jwpsrv.com/library/pd5b8GvGEeKVOiIACp8kUw.js"></script>
		<script>jwplayer.key="GkHt2vyJj6DDT5QI4s6esK9rdJSQ006rGOkPaA==";</script>
	</head>
	<body>
		<div id='miVideo'></div>
		<script type='text/javascript'>
		    jwplayer('miVideo').setup({
		    	file: "rtmp://example.com/application/mp4:myVideo.mp4",
    			image: "/assets/myVideo.jpg",
		        width: '100%',
		        aspectratio: '16:9'
		        rtmp: {
			        bufferlength: 0.1,
			        subscribe: true,
			        securetoken: "Kosif093n203a"
			    },
		    });
		</script>
	</body>
</html>

RTMP con playlist:

<html>
	<head>
		<meta charset="utf-8">
		<title>Reproductores HTML5</title>
		<script src="http://jwpsrv.com/library/pd5b8GvGEeKVOiIACp8kUw.js"></script>
		<script>jwplayer.key="GkHt2vyJj6DDT5QI4s6esK9rdJSQ006rGOkPaA==";</script>
	</head>
	<body>
		<div id='miVideo'></div>
		<script type='text/javascript'>
		    jwplayer('miVideo').setup({
				playlist: [{
			        image: "/assets/myVideo.jpg",
			        sources: [
			        	{ file: "rtmp://example.com/application/mp4:myVideo.mp4"},
			        	{ file: "/assets/myVideo.mp4" }
			        ]
			    }],
		        width: '100%',
		        aspectratio: '16:9'
		        rtmp: {
			        bufferlength: 0.1,
			        subscribe: true,
			        securetoken: "Kosif093n203a"
			    },
		    });
		</script>
	</body>
</html>

RTMP live streaming:

<html>
	<head>
		<meta charset="utf-8">
		<title>Reproductores HTML5</title>
		<script src="http://jwpsrv.com/library/pd5b8GvGEeKVOiIACp8kUw.js"></script>
		<script>jwplayer.key="GkHt2vyJj6DDT5QI4s6esK9rdJSQ006rGOkPaA==";</script>
	</head>
	<body>
		<div id='miVideo'></div>
		<script type='text/javascript'>
		    jwplayer('miVideo').setup({
		    	file: "rtmp://example.com/live/flv:el_nombre_de_nuestra_transmicion",
    			image: "/assets/myVideo.png",
		        width: '100%',
		        aspectratio: '16:9'
		    });
		</script>
	</body>
</html>

Dynamic RTMP:

<html>
	<head>
		<meta charset="utf-8">
		<title>Reproductores HTML5</title>
		<script src="http://jwpsrv.com/library/pd5b8GvGEeKVOiIACp8kUw.js"></script>
		<script>jwplayer.key="GkHt2vyJj6DDT5QI4s6esK9rdJSQ006rGOkPaA==";</script>
	</head>
	<body>
		<div id='miVideo'></div>
		<script type='text/javascript'>
		    jwplayer('miVideo').setup({
		    	file: "/assets/misVideos.smil",
		        width: '100%',
		        aspectratio: '16:9'
		    });
		</script>
	</body>
</html>

misVideos.smil:

<smil>
  <head>
    <meta base="rtmp://example.com/assets/" />
  </head>
  <body>
    <switch>
      <video src="myVideo-high.mp4" height="720" system-bitrate="2000000" width="1280" />
      <video src="myVideo-medium.mp4" height="360" system-bitrate="800000" width="640" />
      <video src="myVideo-low.mp4" height="180" system-bitrate="300000" width="320" />
    </switch>
  </body>
</smil>

Dynamic RTMP con playlist:

<html>
	<head>
		<meta charset="utf-8">
		<title>Reproductores HTML5</title>
		<script src="http://jwpsrv.com/library/pd5b8GvGEeKVOiIACp8kUw.js"></script>
		<script>jwplayer.key="GkHt2vyJj6DDT5QI4s6esK9rdJSQ006rGOkPaA==";</script>
	</head>
	<body>
		<div id='miVideo'></div>
		<script type='text/javascript'>
		    jwplayer('miVideo').setup({
		    	playlist: [{
			        image: "/assets/misVideos.jpg",
			        sources: [{
			            file: "/assets/smil:misVideos.smil"
			        },{
			            file: "/assets/misVideos.mp4"
			        }]
			    }],
		        width: '100%',
		        aspectratio: '16:9'
		    });
		</script>
	</body>
</html>

Audio Streaming:

<html>
	<head>
		<meta charset="utf-8">
		<title>Reproductores HTML5</title>
		<script src="http://jwpsrv.com/library/pd5b8GvGEeKVOiIACp8kUw.js"></script>
		<script>jwplayer.key="GkHt2vyJj6DDT5QI4s6esK9rdJSQ006rGOkPaA==";</script>
	</head>
	<body>
		<div id='miVideo'></div>
		<script type='text/javascript'>
			jwplayer("miVideo").setup({
			      file: "http://[wowaz.server]:1935/vod/mp4:audio/file.m4a/playlist.m3u8",
			      height: 30
			});
		</script>
	</body>
</html>

Un saludo grande desde Argentina, nos vemos en la siguiente parte de este tutorial.

Diego Zapata
Fundador y diseñador Web de El Galeón Argentino
Hola ¿cómo estás?, antes que nada gracias por visitarnos, espero que hayas encontrado lo que buscabas.
Como dice más arriba soy el fundador de “El Galeón Argentino”, se fundó en el año 2012 como una idea loca que tenía en la mente y hasta la fecha nos ha ido muy bien y nos hemos desarrollado mucho.
Lo que nos ayuda a crecer y mejorar cada día es que nos encanta lo que hacemos; aprovechando la ocasión te adelanto que nos encantaría trabajar contigo en algún proyecto que tengas en mente, por más loco que sea, y hacerlo realidad, pues no hay nada más lindo que ver como las ideas toman forma.
Espero que tanto nuestras publicaciones como los tutoriales que subimos a nuestro canal en YouTube sean de tu agrado pero sobre todo de mucha utilidad y valor.
Creo que no queda nada más por agregar, salvo recordarte que nos encantaría volver a saber de ti y sobre todo trabajar juntos como un equipo en el proyecto que tengas, hasta ese momento me despido deseándote mucho éxito en tus proyectos.

Los comentarios en este artículo están cerrados

El Galeón en Facebook

Copyright © 2012 - 2015 elgaleonargentino.com.ar - Todos los derechos reservados.