Para ver un ejemplo, retomamos la plantilla web que hemos creado en los apartados anteriores, modificando el "article" principal:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Video</title>
</head>
<body>
<header>
<h1>Etiqueta video</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li><li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Video en html5</h1>
<h2>practica con etiqueta video</h2>
</hgroup>
<video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop" muted="muted" preload="none" poster="imagen.jpeg" src="video.mp4"></video>
</article>
</section>
<aside><h1>Siguenos en:</h1>
<ul>
<li><a href="facebook.html">Facebook</a>
</li><li><a href="twitter.html">Twitter</a></li>
</ul></aside>
<footer>
<p>Pagina creada por Ticoticotaa @2016</p>
<ul>
<li><a href="contacto.html">Contacto</a>
</li><li><a href="mapaweb.html">Mapa Web</a></li>
</ul></footer>
</body>
</html>
Dentro de la etiqueta video he puesto algunos atributos, como ancho, alto, que se ejecute al cargar (autoplay), que se repita al llegar al final (loop), que empiece sin sonido (muted), podeis probar a quitar y poner estos atributos o cambiarles su valor para ver como se va ejecutando.
Como vereis se puede añadir una imagen previa (tenemos que ponerla en la carpeta que vaya la web).
El video debe estar tambien en la carpeta.
Esperando sea util, gracias.
No hay comentarios:
Publicar un comentario