Muchas veces deseamos insertar vídeos en nuestras páginas web, vídeos personalizados que no provengan de urls de youtube o dailymotion. La nueva estructura de html5 aporta una nueva etiqueta para este procedimiento, se trata de la etiqueta <video></video>.
Lo primero que tenemos que saber es que formatos soportan los navegadores web en la actualidad pues no todos los formatos están disponibles:
-MP4
-Ogg
Los formatos MP4 estan sujetos a licencia comercial mientras que el formato Ogg es un formato libre, si posees un vídeo en otro formato que no sean los mencionado puedes convertirlo al formato MP4 u Ogg con un convertidor que descargues en tu ordenador o puedes utilizar un convertidor online, existen varios en la red que proporcionan este servicio.
La etiqueta vídeo posee varios atributos al momento de utilizarla :
ATRIBUTOS:
-src : Permite especificar donde se encuentra el video.
-controls : Integra controles al video como play/pause etc.
-autoplay : Indica si el vídeo se reproduce automáticamente al cargar la página.
-loop : Este atributo indica si el vídeo se reproduce indefinidamente cada vez que finalice.
-poster : Incluye una imagen en formato jpg que funcione como portada.
-preload : Inserta características antes de cargar el vídeo.
Cómo insertar vídeo en tú página web...
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<body>
<video src="aquí escribimos la ruta indicando donde se encuentra el vídeo" controls autoplay poster="ruta de la imagen jpg."></video>
</body>
</head>
</html>
La anterior es una forma muy fácil de insertar vídeo con la nueva estructura html5, sin embargo podemos incluir los dos formatos (MP4-Ogg) para así asegurarnos de que el vídeo pueda ser aceptado correctamente.
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<body>
<section id="video">
<video id="mivideo" width="200px" height="150px" controls autoplay>
<source src="aquí escribimos la ruta indicando donde se encuentra el vídeo del formato MP4"/>
<source src="aquí escribimos la ruta indicando donde se encuentra el vídeo del formato Ogg"/>
</video>
</section>
</body>
</head>
</html>
Con lo anterior hemos cargado los dos videos de los dos formatos aceptados, si queremos modificar su alto y ancho, lo podemos hacer con los atributos width y height como se muestra en el ejemplo.
Por último podemos modificar el aspecto del vídeo con CSS (Hojas de estilos en cascada) , y en principio está es la forma correcta de insertar vídeos con la especificación html5 en nuestros proyectos.
0 comentarios:
Publicar un comentario