HTML5:
integra tus vídeos fácilmente
Insertar vídeos con HTML5 es una tarea muy sencilla. Lo
único que se necesita es un elemento <video> nativo que pueda ser ampliado por medio
de atributos especiales. El siguiente código muestra cómo añadir recursos de
vídeo al código fuente de tu web
<video src="ejemplo.mp4" width=320 height=240 controls poster="vistaprevia.jpg"> Lo sentimos. Este vídeo no puede ser reproducido en tu navegador.<br> La versión descargable está disponible en <a href="URL">Enlace</a>. </video>
En el ejemplo, el elemento <video> contiene
el URL
donde está alojado el video (scr=“ejemplo.mp4”), así
como los
atributos que definen cómo se mostrará el vídeo en la web:
anchura, altura, controles e imagen de vista previa. El texto que aparece en el
medio solo se muestra cuando un navegador no puede mostrar el vídeo. Por lo general,
los operadores web utilizan esta función para proporcionar una descripción
alternativa y un enlace de descarga.
Los atributos adicionales de un elemento de vídeo en HTML5
Para integrar un recurso a través del elemento <video> es
necesario que este contenga un enlace al recurso, ya sea como atributo scr o elementosecundario
“source”. Para modificar y gestionar un elemento de
vídeo es posible valerse de los siguientes atributos:
|
Atributo
|
Función
|
|
width/height
|
Los atributos width y height permiten especificar
al navegador las dimensiones del vídeo. En caso de que no se haga, este
tomará por defecto la información del tamaño contenida en el archivo de
vídeo. El navegador ajustará el tamaño automáticamente en caso de que solo se
especifique uno de los valores.
|
|
controls
|
El atributo controls permite activar la barra de
control del navegador web. Alternativamente también es posible definir sus
controles propios a través de JavaScript.
|
|
poster
|
El atributo poster hace referencia al archivo de imagen
que se utilizará como vista previa del vídeo. En caso de que este no sea
definido, el primer fotograma del vídeo se utilizará como vista preliminar.
|
|
autoplay
|
El atributo autoplay indica al navegador que debe
reproducir el vídeo automáticamente una vez se finalice la carga de la web.
|
|
loop
|
Con loop el vídeo se reproducirá en bucle.
|
|
muted
|
Para silenciar el tono del vídeo se utiliza el
atributo muted.
|
|
preload
|
El atributo preload sugiere al navegador cómo
debe ser cargado el vídeo una vez finalizada la descarga de la página web.
Las opciones para ello son: auto (se carga completamente), preload (el vídeo
carga determinados metadatos) y none (impide la carga previa de datos de vídeo).
|
<html>
<head>
<title>
Mis
videos
</title>
</head>
<body>
DR ARTURO FREIRE <P>
PRACTICA DE
VIDEOS <P>
<VIDEO
SRC="CANCION.MP4" WIDTH="500" CONTROLS> <P>
<VIDEO
SRC="J._Balvin_-_Ay_Vamos.mp4" WIDTH="500" CONTROLS LOOP>
</BODY>
</html>
No hay comentarios:
Publicar un comentario