Vídeo embebido mediante HTML

Hoxe en día existen numerosas páxinas que prestan servicio de vídeo baixo demanda (Streaming), por exemplo o popular YouTube, que nos ofrecen unha gran variedade de vídeos para poder reproducir directamente. Con este sistema, para poder ver un vídeo no noso ordenador non é preciso descargalo previamente.

Pero estos servidores non só nos ofrecen a posibilidade de velos vídeos visitando a súa web, senón que tamén nos ofrecen a posibilidade de insertalos na nosa páxina web ou blog mediante o enlace a unha URL ou mediante un código HTML.

Neste manual imos ver como facelo mediante código HTML, opción que podemos utilizar por exemplo se o servidor de streaming non nos ofrece o servizo mediante URL. Vexamos paso a paso como facelo, neste caso, cun vídeo de Vimeo como exemplo:

1. Navegamos por Vimeo neste caso ata chegar a páxina que nos permite visualizar o vídeo desexado.

2. Sobre a propia imaxe de visualización do vídeo (actualmente na esquina superior dereita) cando movemos o rato por enriba, aparece un botón coa palabra "SHARE" (Compartir), pinchamos nel e aparécenos un panel que nos ofrece tódalas opción de compartición do vídeo: Por enlace a URL, por correo electrónico e por inserción (Embed). Sobre esta última podemos pinchar sobre o enlace +Show Options para poder elixir distintas opcións.

Opcións de Vimeo

As opcións máis importantes que podemos elixir están: As dimensións da visualización (se modificamos unha a outra mantén a proporción automáticamente); Reproducir automaticamente, Repetir ao rematar, Amosar un enlace a este vídeo en Vimeo; Amosar unha descripción do vídeo.

3. Elixidas as opcións desexadas, selecionamos e copiamos o código HTML que aparece nun cadro de texto sobre a previsualización no panel de opcións (<iframe src="...).

Copiar código HTML

Ao pinchar neste cadro de texto selecionase automáticamente todo el. Así que o copiamos (CTRL+c ou Botón dereito -> Copiar).

4. Copiada o código HTML anterior imos ao formulario de creación ou edición do contido da nosa web no que queremos visualizar o vídeo. Debaixo do cadro de edición do texto do Corpo pinchamos en Desactivar texto enriquecido para poder escribir directamente código HTML, situamos o cursor na posición do corpo do contido na que queremos inserir o vídeo e pegamos (CTRL+v ou Botón dereito -> Pegar) o código antes copiado.

Pegar código HTML

5. Agora podemos activar de novo o texto enriquecido para continuar coa edición do contido e modificar a aliñación do obxecto creado.

6. Xa podemos ver a Vista previa ou directamente Gardar o contido.

NOTA 1: Recoméndase gardar tamén este código HTML nun ficheiro de texto plano no noso ordenador, xa que quizais posteriores edicións do contido poderían alterar este código e deixar de funcionar, así temos unha copia para voltar a pegalo se é necesario, sen necesidade de buscalo de novo no servidor de orixe.

NOTA 2: O procedemento aqui descrito serve para inserir calquera código HTML sexa dun vídeo ou de outro tipo de obxecto, en calquera tipo de contido.