Me han preguntado como insertar vídeos en una página web, (sobre todo si son vídeos en local) y aquí dejo este código html para poder insertarlos cuando el vídeo se encuentra en local, esto es en nuestro equipo :
Como podéis observar el código va a la pagina de Microsoft para utilizar el plugins de Mediaplayer. Mediante la etiqueta scr le indicamos el vídeo que queremos insertar (marcado en rojo), lo recomendable es que esté en la misma ubicación que el archivo del código html que se ejecuta, con los parámetros width y height le indicamos el tamaño en que se presentará el vídeo. El resto de comandos pertenecen a como queremos mostrar la barra de status o de controls o el tamaño del display.
Aunque si no tuviéramos conexión a Internet el vídeo se reproduciría igualmente. He estado probando en todos los navegadores y en algunos como Opera o Chrome no se me abrían los vídeos, apareciendo un mensaje de que faltaba un complemento. Como primera opción instalé RealPlayer HTML5Video Downloader Extension 1.5, pudiendo reproducir los vídeos con extensión .avi, pero en el navegador Opera por ejemplo no reproducía los vídeos con extensión .flv, por lo que decidí instalar los códecs K-Lite_Codec_Pack_800_Full.exe.
Aquí os dejo otro código válido pero que sin embargo no se visualizan los controles de pausa y reproducción.
La etiqueta utilizada para insertar un video en tu WEB es <EMBED> y va acompañada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene el video a insertar. Si el vídeo a insertar se encuentra en la misma carpeta que el archivo html que lleva el código no hace falta poner la ruta
EJEMPLO:
<EMBED SRC="00024.avi"
En este caso si quisiéramos insertar un vídeo de internet sólo tendríamos que poner la url del vídeo después de la etiqueta scr.
AUTOSTART: Este atributo posee dos valores posibles: TRUE y FALSE(por defecto). El primero sirve para que el video se cargue junto con la pagina, es decir, apenas se abre la pagina comienza a abrirse. El segundo valor es para que el visitante al hacer click sobre el video lo active.
LOOP: Al ingles traduce lazo. Este atributo al igual que el anterior tanbien posee dos valores: FALSE (por defecto) y TRUE, el primero hace que el video se repita una solo vez, y el segundo hace que el video se repita infinitas veces.
HEIGHT y WIDTH: Estos atributos son utilizados para definir el alto y el ancho del video respectivamente. A la hora de utilizar estos valores se debemos tener mucho cuidado ya que si los valores no coinciden con los de las dimenciones del video este sera recortado.
ALING: Este atributo no lo voy a explicar porque funciona igual que en las imagenes, no funciona sobre el video sino sobre su alineacion con el texto en la pagina.
Para comenzar debemos saber que el HTML utiliza una codificación genérica, la cual hace uso de TAGS o etiquetas. Mediante estas etiquetas es posible separar el contenido del documento de su formato.
Los TAGS son comandos que se especifican en el cuerpo del programa, con el fin de darle las características deseadas a la información.
Toda página Web debe contener la siguiente estructura :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY> Esta es mi primera página Web</BODY>
</HTML>
La etiqueta <HTML> le indica al visualizador que va a comenzar a leer un documento HTML y se debe colocar siempre al comienzo y al fin del texto.La etiqueta <HEAD> indica un encabezado, dentro del cual se coloca información como el título, el cual debe estar contenido entre la etiqueta <TITLE>
Entre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que realmente vemos en el Web. Para comenzar a escribir un documento, es importante tener en cuenta que el lenguaje HTML no distingue mas de un espacio entre caracteres y se olvida de cualquier formato que se le de al texto (negrilla, cursiva, tipo de letra, entre otras). Recordemos que para esto es que se creó el HTML, toda presentación final debe ser proporcionada mediante las etiquetas.
Cada etiqueta, con excepción de unas cuantas, le debe indicar al visualizador cuando finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser cualquier etiqueta. De esta manera indicamos cuando comienza y termina el encabezado, el título, el cuerpo y el documento HTML.
Las páginas en el Web no deben estar llenas de texto por todos lados pues esto hace que los surfeadores se aburran de verlas y como resultado obtendrán una página que nunca es visitada. Una herramienta muy útil para hacer de las páginas un documento llamativo y amigable es hacer uso de imágenes relacionadas con el texto al que se esta haciendo referencia. ¿Se imaginan una valla publicitaria sin ningún tipo de imagen ?
También es muy importante una excelente combinación de colores de fondo y de texto, con el fin de hacer que la página sea lo mas leíble posible. Es en este punto donde entra a jugar la creatividad del diseñador.
Para colocar una imagen en una página basta con llamarla desde el documento HTML ( es similar los vínculos hacia páginas cercanas). Lo primero es diseñar el gráfico deseado en cualquier programa de dibujo como el Corel Draw o el Adobe Photoshop, luego se debe convertir a cualquiera de los formatos aceptados por el lenguaje HTML (GIF y JPEG).
La estructura es la siguiente :
<IMG SRC= "Nombre del archivo" >
Donde "Nombre del archivo" es el nombre del archivo de gráfico que desea desplegar.
Como ya habíamos mencionado, el HTML no distingue masa de un espacio entre caracteres, saltos de línea, negrilla, cursiva, tamaño y tipo de fuente, viñetas, entre otras. Para lograr tales características en el texto del documento HTML (recordemos que el texto va dentro del cuerpo del documento entre las etiquetas <BODY> </BODY>) se debe hacer uso de las etiquetas que explicaremos a continuación.
Etiquetas de formato:
Negrita
<B> Texto en negrita</B>
Cursiva
<I> Texto en cursiva</I>
Subrayado
<U> Texto subrayado</U>
Monoespaciado
<TT> Texto como si estuviera escrito en máquina da escribir </TT>
Preformateado
<PRE> Texto que conserva todos sus espacios y tabuladores, y aparece en formato monoespaciado</PRE>
Etiquetas para párrafos:
Nuevo párrafo (dos espacios)
<P>
Línea horizontal
<HR>
Salto de línea (un espacio)
<BR>
Tamaño de la fuente
<Hx> </Hx>. Donde x es un número entre 1 y 6, siendo 1 el tamaño mas grande y 6 el más pequeño
En general las tablas pueden ser sin borde o con borde.La tabla sin borde es quizás la herramienta mas útil en la codificación HTML, pues a través de ellas podemos organizar nuestro documento como lo deseemos, teniendo en cuenta que el HTML no entiende mas de un espacio, tabulador o salto de línea?
Pero ¿por qué no hacerlo usando la etiqueta preformateado para arreglar la distribución de mi documento?
Sencillo: como todos sabemos esta etiqueta despliega el texto en el tipo de letra monoespaciado y no permite cambios ni de forma ni de tamaño. Conclusión; el documento se vería horrible.
La tabla con borde es útil para desplegar tablas de contenido, resúmenes, cuadros de atención, entre otras.
Pero qué es una tabla?: es un conjunto rectangular de filas y columnas que aparecen en su pantalla.
El hipertexto son vínculos dentro del texto del documento HTML que permiten al usuario navegar con facilidad a través de la black, tanto a nivel interno como externo, es decir , pueden crearse vínculos que lleven hacia una misma parte del documento (interno) o hacia otra parte del mundo Web (externo). También existen otro tipo de vínculos que llevan al surfeador a otra partes como correo, gopher, ftp, entre otras.
Las etiquetas HTML que se encargan de generar los vínculos son <A> y </A>. A esta etiqueta se le debe agregar el "URL" con el que se desea vincular. Esto se realiza de la siguiente manera :
<A HREF="URL">Texto del vínculo</A>
ESTRUCTURA BÁSICA DE LAS TABLAS
<TABLE BORDER="Número entre 0 y 7"> <CAPTION ALIGN=TOP ó BOTTOM>;Aquí va el texto del título</CAPTION> <TR> <TD>Primera fila, primera columna</TD> <TD>Primera fila, segunda columna</TD> <TD>Primera fila, tercera columna</TD> .......... </TR> <TD>Segunda fila, primera columna</TD> <TD>Segunda fila, primera columna</TD> <TD>Segunda fila, primera columna</TD> .......... </TR> etc... </TABLE> Notas:
El número que se designa en la etiqueta <TABLE BORDER="Número entre 0 y 7"> determina el ancho del borde de la tabla. Este número puede estar entre 0 y 7.
Se preguntarán que significa la etiqueta <CAPTION ALIGN=TOP ó BOTTOM>; Aquí va el texto del título</CAPTION>. Simplemente da la posibilidad de colocarle un título a la tabla, bien sea en la parte superior (TOP) o en la parte inferior (BOTTOM).
Las listas sirven para desplegar la información que debe ser enumerada o tabulada de una manera organizada. En el lenguaje HTML se pueden construir varios tipos de listas :
Numera los párrafos u objetos que se encuentran dentro de la siguiente estructura :<OL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</OL>
Útiles para crear tablas de posiciones y enumerar procedimientos.
Inserta un punto negro a los párrafos u objetos que se encuentran dentro de la siguiente estructura :<UL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</UL>
Son útiles para enumerar por puntos los comentarios de su página.
Son útiles para las entradas de tipo diccionario o para las secciones de documentos donde un término es el encabezado de la sección y la definición es el texto de aquella. La estructura es la siguiente :<DL>
<DT> Primer término.
<DD> Primera definición.
<DT> Segundo término.
<DD> Segunda definición.
Etc...
</DL>
A cada una de estas listas se les puede crear una lista dentro de ellas, simplemente agregando la estructura deseada dentro de la etiqueta correspondiente.
La etiqueta <object>
Las páginas Web, en su constante evolución. Han pasado de ser unos simples documentos, a verdaderas presentaciones multimedia, dotadas de imagenes, videos, sonidos, animaciones e incluso realidad virtual.
Las características multimedia del HTML posibilitan a los programadores poner en sus páginas web, pequeña aplicaciones (programas que se descargan automáticamente y se ejecutan el ordenador del usuario), videos cortos como por ejemplo videoclips, trailers, últimamente está de moda los documentos flash y todo tipo de videos y/o animaciones.
Para normalizar la inclusión de ficheros, HTML 4 introduce la etiqueta OBJECT, que ofrece una solución universal para la inclusión de objetos genéricos. Object sustituye las etiquetas applet, bgsound, embed, etc. Siendo una etiqueta más moderna y flexible.
Sin embargo la polémica entre las diversos navegadores continúa. Mediante la etiqueta object definimos un objeto o un componente externo que tiene como misión la reproducion del fichero.
Normalmente, un navegador (Aunque sea capaz de reconocer la etiqueta OBJET) no podrá mostrar el contenido de un OBJECT a menos que tenga el correspondiente Plug-In instalado.
Insertando una imagen con la etiqueta <object>
Por ejemplo, si queremos adjuntar una imagen png en un documento, el programador puede escribir el siguiente código:
<object data="img/noche.png" type="image/png"> <em>Noche estrellada</em>
</object>
0
Nota: no funciona en el Enternet Explorer 6
Atributos relativos al video:
classid="identificador_objeto". Fija el identificador CLSID de los controles ActiveX necesarios.
codebase="URL". Fija la URL del objeto o componente externo necesario para reproducir el fichero de video.
type="tipo_fichero". Atributo importante, que declara el tipo de fichero de video que estamos usando.
width="n". Determina el ancho visible de la consola de video, en pixels.
height="n". Determina el alto visible de la consola de video, en pixels.
align="top / bottom / center / baseline / left / right / texttop / middle / absmiddle / absbotom". Análogo al de la etiqueta IMG, define la alineación horizontal o vertical de la consola respecto de los elementos de la página.
hspace="hs". Establece la separación horizontal, vspace="vs", que establece la separación vertical, en pixels, entre la consola y los elementos de la página que la rodean. Análoga a sus equivalentes de la etiqueta IMG.
autostart="true/false". Determina si el fichero de video debe empezar a reproducirse por sí sólo al cargarse la página o si por el contrario será preciso la actuación del usuario (o de código de script) para que comience la reproducción.
standby="mensaje". Presenta en pantalla un mensaje al usuario mientras el fichero se carga. En cuanto a los elementos param, los más importantes son:
param name="filename" value="ruta_fichero". Establece la ruta del fichero de video, en forma relativa a la estructura de carpetas del sitio web o en forma de URL absoluta.
param name="showcontrols" value="1/0". Fija si se debe de ver (valor por defecto) o no la barra inferior de controles de la consola de video. Sólo funciona bien en Internet Explorer.
param name="showdisplay" value="1/0". Fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con información sobre el fichero de video (nombre, autor, copyright, etc.). Sólo funciona bien en Internet Explorer.
param name="showstatusbar" value="1/0". Fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con información temporal sobre la visualización del video y sobre el sonido del mismo. Sólo funciona bien en Internet Explorer.
param name="autosize" value="1/0". Fija si el tamaño de la consola se establece automáticamente o no. Sólo funciona bien en Internet Explorer.
param name="autostart" value="true/false". Indica al navegador si se debe empezar a reproducir el video automáticamente al cargar la página o si por el contrario será preciso que el usuario pulse el botón Play para ello.
No hay comentarios:
Publicar un comentario