jueves, 22 de marzo de 2012

Publicar un vídeo con JWPlayer en Blogger. Ejemplificación

Los medios de transporte Una opción para evitar las limitaciones de la subida directa a nuestro Blog de un vídeo es integrar vídeos *.FLV utilizando un reproductor JW Player.

Se ejemplifica cómo integrar vídeos *.FLV en esta entrada del blog utilizando el reproductor JW Player.

Se trata de un visor *.SWF diseñado con tecnología Flash. Para su correcta visualización es necesario que el navegador web cliente disponga del plugin de Flash Player.

Los cuatro archivos necesarios para este ejemplo los tienes en el zip de este enlace jwplayer.zip [3,6 MB]


Este es el resultado previsto:

Los medios de transporte





El archivo index.html es este:


<html>
<head>
<title>Los medios de transporte</title>
</head>
<body>
<h1>Los medios de transporte</h1>
<embed src="jwplayer.swf" width="384" height="312" allowfullscreen="true"
    flashvars="file=video.flv&image=captura.jpg">
</embed>
</body>
</html>


Subimos a SITES los tres archivos: captura.jpg, jwplayer.swf y video.flv


Clic para ampliar las imágenes


Se obtienen las URLs de cada uno de ellos:





https://sites.google.com/site/laredomw20ii/video/captura.jpg?attredirects=0
https://sites.google.com/site/laredomw20ii/video/jwplayer.swf?attredirects=0
https://sites.google.com/site/laredomw20ii/video/video.flv?attredirects=0&d=1


Se eliminan las coletillas


https://sites.google.com/site/laredomw20ii/video/captura.jpg
https://sites.google.com/site/laredomw20ii/video/jwplayer.swf
https://sites.google.com/site/laredomw20ii/video/video.flv




Se sustituye los nombres de los tres archivos por los tres ubicados en Google Sites.



En este ejemplo se sustituyo el de captura.jpg

<html>
<head>
<title>Los medios de transporte</title>
</head>
<body>
<h1>Los medios de transporte</h1>
<embed src="jwplayer.swf" width="384" height="312" allowfullscreen="true"
    flashvars="file=video.flv&image=https://sites.google.com/site/laredomw20ii/video/captura.jpg">
</embed>
</body>
</html>



En este otro ejemplo se sustituyeron los tres:

<html>
<head>
<title>Los medios de transporte</title>
</head>
<body>
<h1>Los medios de transporte</h1>
<embed src="https://sites.google.com/site/laredomw20ii/video/jwplayer.swf" width="384" height="312" allowfullscreen="true"
    flashvars="file=https://sites.google.com/site/laredomw20ii/video/video.flv&image=https://sites.google.com/site/laredomw20ii/video/captura.jpg">
</embed>
</body>
</html>


También se puede utilizar solo el código embed.

<embed allowfullscreen="true" flashvars="file=https://sites.google.com/site/laredomw20ii/video/video.flv&amp;image=https://sites.google.com/site/laredomw20ii/video/captura.jpg" height="312" src="https://sites.google.com/site/laredomw20ii/video/jwplayer.swf" width="384"></embed>



Este es el resultado final esperado: Publicar un vídeo con JWPlayer en Blogger. Ejemplificación








Información obtenida del curso Multimedia y Web 2.0 edición 2012 del INTEF


Jose Ángel Laredo

2 comentarios:

Puedes dejar aquí tus comentarios