12.176 cursos gratis
8.741.766 alumnos
Facebook Twitter YouTube
Busca cursos gratis:

Diseño páginas Web. Audio y Vídeo

Autor: Mariló Matutano García
Curso:
10/10 (2 opiniones) |1019 alumnos|Fecha publicaciýn: 23/07/2010
Envýa un mensaje al autor

Capýtulo 13:

 Diseño páginas Web Video. Integración HTML básica de video flash

1. Introducción.

En la actualidad el formato FLV (Flash Video http://www.adobe.com) ha experimentado un gran auge como medio para publicar contenidos de vídeo en Internet. Varias son las razones que justifican este fenómeno:

• El cliente sólo necesita tener instalado el plugin o reproductor de Adobe Flash en su navegador web.

• Es accesible desde la mayoría de los sistemas operativos (Windows, Linux, Mac, etc) y navegadores web (IExplorer, Firefox, NetScape, Safari, Opera, etc). Esto garantiza un

acceso universal al contenido.

• La consola de reproducción se puede incluir fácilmente en una página web y al estar diseñado con Adobe Flash admite un skin con un alto grado de personalización: fondos, colores, botones, logo del centro o empresa, comportamiento, etc.

• Se puede reproducir en distintos reproductores locales: MPlayer, VLC media player, Riva, Xine, etc.

• Los repositorios de vídeo más conocidos en Internet han apostado por este formato para la difusión de vídeos: YouTube, GoogleVideo, iFilm, etc.

• El formato FLV utiliza los códecs Sorenson Spark y On2 VP6 que permiten una alta calidad visual con bitrates reducidos.

• Es un formato que admite streaming, es decir, tras unos segundos iniciales de almacenamiento en el buffer, comienza su visualización y esta se produce de forma ininterrumpida mientras se completa en segundo plano la descarga del resto del vídeo.

En este apartado veremos cómo integrar vídeos FLV en una página web utilizando el reproductor flash multimedia desarrollado por Jeroen Wijering (http://www.jeroenwijering.com/). Se utiliza en muchos sitios web ya que permite la configuración de múltiples parámetros y admite la reproducción de archivos flv simples y de listas de reproducción.

2. Reproductor de un vídeo FLV.

1. Descarga y descomprime el archivo D:\MARILO\web 3\flvplayer.zipen una carpeta del disco local.

2. Desde el explorador de archivos abre la carpeta flvplayer y haz doble clic en el archivo index.html. Con esto se abrirá el navegador mostrando el contenido de un video FLV.

3. La consola de reproducción para un archivo flv permite iniciar y detener el vídeo así como arrastrar la barra de progreso de la pista y del volumen. En la reproducción de listas de vídeos FLV también se proporcionan botones para saltar al siguiente o anterior de la lista. También se ofrece un botón que permite visualizar el vídeo en modo pantalla completa.

4. Regresa al explorador de archivos en la carpeta flvplayer. Dentro de esta carpeta se encuentra:

• La página HTML que permite el acceso a todo el conjunto: index.html

• El reproductor de vídeo: flvplayer.swf

• El fichero de javascript swfobject.js que asegura la integración del reproductor en la página HTML sin tener que hacer clic sobre él antes de interactuar con sus botones.

• El video FLV que se reproduce: video.flv

• La imagen previa en formato GIF que se muestra antes de iniciar la reproducción del vídeo y que tiene la misma dimensión del vídeo: imagen.gif.

 

 

                        video

5. Abre Kompozer y utilízalo para abrir el archivo index.html

 

6. Clic en la pestaña Código fuente.

7. Si deseas insertar el reproductor en otra página basta con copiar y pegar las

siguientes líneas de código HTML:

<script type="text/javascript" src="swfobject.js"></script>

Esta línea se sitúa entre las etiquetas <head> … </head> de la página HTML para

asegurar referencia al código javascript que asegura la correcta integración del

reproductor.

                                      video

Y luego en el cuerpo de la página el siguiente código HTML:

<p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Se

necesita descargar el reproductor de Flash</a> para ver este video.</p>

<script type="text/javascript">

       var s1 = new SWFObject("flvplayer.swf","single","240","212","7");

       s1.addParam("allowfullscreen","true");

       s1.addVariable("file","video.flv");

       s1.addVariable("image","imagen.gif");

       s1.addVariable("width","240");

       s1.addVariable("height","212");

       s1.write("player1");

</script>

En la variable file se indica la referencia a la ubicación del archivo de vídeo flv que se reproduce. Puedes modificar este valor para reproducir un vídeo con otro nombre distinto. En las variables height y width se indican la altura y anchura en píxeles con que se visualizará el reproductor. La botonera ocupa 20 píxeles de altura. Sumados a los 192 del vídeo hacen un total de 212 píxeles para el total del reproductor.

Diseño páginas Web Audio y Video. Final

Bueno ya hemos llegado al final de este curso. Ya sabéis que la primera parte se titulaba “Diseño Páginas Web con editor HTML” y la segunda “Diseño página Web. Insertar imágenes” y este que acabais de leer que es el tercero y creo que el último. Aunque buscaré cosas interesantes que sirvan para ampliar conocimientos y quizás la publique si recopilo bastante información para ello.

Espero que os haya resultado fácil como los anteriores y que con este curso podais completar toda la información para poner manos a la obra y publicar vuestra página Web.

Si alguno de vosotros publicais una página Web, no dudéis en comunicármelo. Me encantaría ver como mis cursos os han servido y ver el fruto de mi trabajo.

Gracias por seguir mis cursos y aquí os dejo como siempre mi dirección de correo por si tenéis que preguntarme algo.

Sevilla-62@hotmail.com

                                                              AUTORA: Mariló Matutano García.

Nuestras novedades en tu e-mail

Escribe tu e-mail:



MailxMail tratarý tus datos para realizar acciones promocionales (výa email y/o telýfono).
En la polýtica de privacidad conocerýs tu derechos y gestionarýs la baja.

Cursos similares a Diseño páginas Web. Audio y Vídeo



  • Výdeo
  • Alumnos
  • Valoraciýn
  • Cursos
1. Diseño páginas web con editor HTML
Diseño páginas web con Editor HTML , cuantas veces al visitar una Web , nos hemos... [02/03/10]
3.716  
2. Diseño páginas web. Insertar imágenes
¿Qué sería de nuestras páginas Web si, además de texto, no les insertásemos... [18/06/10]
825  
3. Vídeo-tutorial Flash HD. Brillo Web 2.0
Adobe Flash y diseño Web . En el siguiente video-tutorial de Flash (HD) vamos a... [20/07/10]
1.155
Curso con video

ýQuý es mailxmail.com?|ISSN: 1699-4914|Ayuda
Publicidad|Condiciones legales de mailxmail