Multimedia

¿Qué é multimedia?

O térmo multimedia utilizase para referirse a cualquera obxeto ou sistema que utiliza múltiples medios de expresión (físicos o dixitais) para presentar ou comunicar información. De alí a expresión multimedios. Os medios poden ser variados, desde texto e imaxes, ata animación, sonido, video, etc.

HTML video.

Cos aumentos dos anchos de banda na conexión de acceso a internete, o uso do vídeo na web cada vez esténdese máis e hoxe en día é o contido máis consumido nas páxinas web.

Atrás quedaron os días nos que non existían estándares para poder reproducir vídeos por Internet e nos cales tecnoloxías como Flash ou Silverlight dispoñian deste privilexio. Aínda que tiñan outros problemas de portabilidade, seguridade e pouca integración cos estándares HTML e CSS.

A partires de HTML5 estandarizase o uso do vídeo mediante o elemento video. De igual maneira aparecen un conxunto de APIs que nos permiten interactuar có contido que mostra o vídeo.

Si queremos incluir un vídeo na nosa páxina HTML5 simplemente teremos que escribir o seguinte:

<video src="mivideo.webm" controls>
          <p>O seu navegador non soporta vídeos HTML5.</p>
        </video>
        

Dentro do código teremos que coñocer o significado dos seus dous atributos. Por un lado o atributo src sirvenos para indicar o nome do ficheiro que conten o vídeo que queremos reproducir.

Mentras que por outro o atributo controls permite que se mostre un panel de control de reprodución do vídeo, para que se poida iniciar, parar, adelantar, cambiar o son,…

Atributos do vídeo

Para poder manipular o vídeo, a forma na que se mostra,… o elemento video de HTML5 ofrecenos diferentes atributos. Revisemos para que serven.

Ficheiro do vídeo

Para poder indicar onde está o ficheiro que conten o vídeo deberemos de utilizar o atributo src. Este atributo recibirá como valor o nome do ficheiro.

<video src="mivideo.webm" controls>
          <p>O sue navegador non soporta vídeos HTML5.</p>
        </video>
        

Ancho e alto do vídeo

Ainda que como todo elemento HTML podemos modificar a apariencia mediante a linguaxe CSS, o elemento vídeo ofrecenos os atributos widht e height para poder definir o ancho e alto do vídeo respetivamente.

<video src="mivideo.webm" width="600" height="400" controls>
          <p>O seu navegador non soporta vídeos HTML5.</p>
        </video>
        

Inicio automático do vídeo

Si queremos que o vídeo se inicie de forma automática unha vez que se carge o documento HTML5 deberemos de utilizar o atributo autoplay.

<video src="mivideo.webm" autoplay controls>
          <p>O seu navegador non soporta vídeos HTML5.</p>
        </video>
        

Vídeo en bucle

En el caso de que quixesemos que o vídeo se reproduzca en bucle unha e outra vez usaremos o atributo loop.

<video src="mivideo.webm" autoplay loop>
          <p>O seu navegador non soporta vídeos HTML5.</p>
        </video>
        

Vídeo sin son

Outra opción é que o vídeo se execute sen son. Esto conseguimolo apoiandonos no atributo muted.

<video src="mivideo.webm" autoplay muted>
          <p>O seu navegador non soporta vídeos HTML5.</p>
        </video>
        

Cartel do vídeo

Antes de que se inicie o vídeo podemos poñer unha imaxen de mostra (o cartel). Para elo vamos a utilizar o atributo poster.O atributo poster recibirá unha URL co nome do ficheiro que queremos utilizar como cartel de vídeo.

<video src="mivideo.webm" controls poster="mivideo.png">
          <p>O seu navegador non soporta vídeos HTML5.</p>
        </video>
        

Si utilizamos o atributo autoplay non se verá o cartel do vídeo.

Precargar o vídeo

Os vídeos soen ser ficheiros que teñen un tamaño considerable e é por elo que a veces tardan en cargar ou mesmo se paran cando xa empezara a reproducirse.

Para paliar este tema de tamaño podemos precargar o vídeo. Neste caso imos a utilizar o atributo preload, o cal pode ter tres valores:

• ‘none’, non fai buffering de vídeo.
• ‘auto’, fai buffering de vídeo.
• ‘metadata’, fai buffering, pero só da metainformación do vídeo.

<video src="mivideo.webm" controls preload="auto">
          <p>O seu navegador non soporta vídeos HTML5.</p>
        </video>
        

Formatos de Vídeo

Cada un dos navegadores é capaz de renderizar un formato de vídeo diferente.

Contedores de formato

Formatos como mp3, mp4 o WebM son coñecidos como contedores de formato, xa que conteñen diferentes partes que permiten que se compoña un vídeo .

O contedor WebM utiliza formatos Ogg Vorbis para o audio e VP8/VP9 para o video.

O contedor MP4 utiliza formato de audio mp3 o aac e un formato de vídeo H.264.

O contedor Ogg utiliza formatos Ogg Vorbis para o audio e Ogg Theora para o vídeo.

Estos contedores de formato o que fan é comprimir o vídeo e audio en ficheiros manexables.

Los navegadores utilizan los codecs para poder descomprimir o contido de contedores e poder reproducir o vídeo e audio. Se o navegador non ten un codec que soporte o formato, non se poderá reproducir o vídeo e/o audio.

Múltiples orixes e formatos de vídeo

Esta situación que nos obliga a ter diferentes contedores de formato atendendo o navegador fai que os nosos documentos HTML5 teñan que permitir cargar varios ficheiros en varios formatos.

Esto conseguimolo mediante o elemento source. O elemento source é un elemento anidado ó elemento video e sérvenos para enlazar diferentes ficheiros dun vídeo en formatos diferentes.

A estrutura do elemento source é a seguinte:

<video controls>
          <source src="mivideo.mp4" type="video/mp4"/>
          <source src="mivideo.webm" type="video/webm"/>
          <p>O seu navegador non soporta vídeos HTML5.</p>
        </video>
        

Á hora de renderizar o vídeo, o navegador irá recorrendo os diferentes formatos ata que encontre un que poida reproducir.

HTML audio.

A etiqueta <audio> define son, como a música,podcast... Actualmente, hai 3 formatos de arquivo admitidos: MP3, WAV y OGG.
Trátase de unha etiqueta nova de HTML5

Elemento Object

Define unha animación dentro dun documento HTML. Utilizase para insertar plug-ins (como applets de Java, os lectores de PDF, Flash Players) nas páxinas web.
SWF é Small Web Format, que é un formato de arquivo de Adobe Flash que conten texto e gráficos vectoriais.

Elemento iFrame

A etiqueta <iframe> especifica un marco en líña. Un marco en líña utilizase para insertar outro documento dentro do documento HTML actual.
Para facer fronte ós navegadores que non o soportan <iframe>, engadese un texto entre a etiqueta de apertura e de peche.

Exemplos avanzados de iframe:VER CODIGO

Mapas de imaxen

introducción

Trátase dunha técnica que permite dividir en anacos a unha imaxe, de modo que poderemos asignar unha ligazón a cada anaco.

Utilizase en mapas propiamente ditos, nos que o usuario selecciona rexións do mapa e en imaxes onde ao facer clic permítannos ir a unha nova URL.

O seu uso

elemento map

Os mapas baseanse nunha imaxe previamente colocada na páxina web mediante a etiqueta img. A partir de esa imaxe crease un elemento novo naa páxina de tipo map.

O elemento map polo menos debe indicar estos atributos:

• name. Nome do mapa de imaxes. Identifica o mapa de imaxes (non se debe de utilizar para este fin o atributo id)

atributos para mapas no elemento img

Por outro lado, na etiqueta img asociada á imaxen do mapa debese utilizar este atributo:

• usemap. A que se lle da como valor o nome do mapa (o que se utilice no atributo name do elemento map), pero antepoñendo o símbolo #.

elemento area

Cos elementos img y map sólo se está indicando que a imaxen é un mapa, pero falta decir qué zonas ten o mapa e qué facer cando se fai clic nelas. Esa é o labor dos elementos de tipo area.

A etiqueta map debe conter dentro tantos elementos area como seccións no mapa queiramos crear. En cada elemento area rechearemos estes atributos:

• coords. Coordenadas da área. A forma de indicalas depende do que elexise no atributo shape.
• shape. Permite indicar a forma da área. Pode ser:
  • shape=”rect”. A área será rectangular. Neste caso o atributo coords indicará catro coordenadas. As dúas primeiras marcan a coordenada X e a coordenada Y da esquina superior esquerda da imaxe, as dúas últimas as coordenadas X e Y da esquina inferior dereita. As coordenadas contan desde a esquina superior esquerda da imaxe (que serían as coordenadas 0,0).
  • shape=”circle”. A área é unha rexión circular na imaxe. O atributo coords tería tres coordenadas: as duas primeiras son a coordenada X e Y do centro do círculo e a terceira o radio do mesmo.
  • shape=”poly”. Permite indicar unha rexión poligonal. O atributo coords permite indicar as coordenadas X e Y de cada punto do polígono. O final cerraráse o polígono.
  • area=”default”. Fai o mesmo que a opción rect.
• alt. Texto alternativo na área da imaxe. Funciona igual que o atributo alt da etiqueta img. Non é obligatorio, pero sí importante.
• href. Funciona como o atributo do mesmo nome na etiqueta a: indica unha URL á que se dirixirá o navegador cando o usuario faga clic sobre a imaxen. É dicir cada área do mapa da imaxe será un enlace cuio destino o marca este atributo (que ten as mismas posibilidades que o atributo href do elemento a)

exemplo de mapa

Na siguinte imaxe detallanse as coordenadas necesarias para facer un mapa con tres áreas sobre a imaxe seguinte. Como se observa, ainda é unha sola imaxen, distinguese mui ben visualmente o que vai a ser cada área

Se desexamos que ó facer clic no cadrado, o círculo e a forma libre saltemos a una URL, necesitamos coñecer as coordenadas que teñen estas formas (nisto podenos axudar os programas de retoque gráfico como Adobe Photoshop o Adobe Fireworks). Nesta imaxen mostranse as coordenadas necesarias:

O código HTML para facer o mapa sería (supoñendo que a imaxe se chama formas.jpg):

<img  src=”formas.jpg” alt=”Formas geométricas básicas” usemap=”#formas”ismap=”ismap”>
<map name=”formas” id=”formas”>
	<area shape=”rect” coords=”62,65,171,177” 

 				href=”rectangulo.html”alt=”Rectángulo”>
	<area shape=”circle” coords=”369,116,84” 

			href=”circulo.html” alt=”Círculo”>
 <area shape=”poly” 
coords=”113,308,242,230,401,252,556,157,463,324,287,284” 
 		href=”poligono.html” alt=”Polígono” />
</map> 

O uso do atributo id no elemento map non é obligatorio para que o mapa funcione, pero sí é necesario para cumplir as novas normas HTML onde se intenta retirar o atributo name para sustituilo por id (aínda que os mapas seguen funcionando co atributo name); es decir aconsellase para unha posible compatibilidade futura.