Ejemplo HTML5: insertar Video y Audio

Logo HTML5

Ejemplo de código fuente en HTML5 que consiste en ver cómo funcionan las etiquetas de video y audio.

 

 

Descripción del ejemplo

El video será un video con controles e imagen antes de su reproducción. Y el audio lo mismo, mostrará los controles antes de su reproducción.

Para mostrar la imagen en el video, se usa el atributo poster=”ruta_imagen.png”

Para mostrar los controles, se usa el atributo controls

 

Código

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>EJEMPLO VIDEO Y AUDIO EN HTML5</title>
<link rel="stylesheet" href="css/estilo.css">	
	
	
</head>


<body>
 


        <!-- Cabecera -->
        <header>
            <img src="media/ejemplo-logotipo.gif" width="189" height="57" alt="logo"  /> 
            <h1>EJEMPLO VIDEO Y AUDIO EN HTML5</h1>
        </header>

        <!-- Contenido -->
		<section>
			<article>
				<figure>
						<h2>Artículo 1: video</h2>
						<video src="media/gatito.mp4" controls poster="media/gatito.jpg"> </video>
						<figcaption>Figura: descipción video</figcaption>
				</figure>
			</article>
			<article>
				<figure>
						<h2>Artículo 2: audio</h2>
						<audio src="media/gato.mp3" controls > </audio>
						<figcaption>Figura: descipción audio</figcaption>
				</figure>
			</article>
		</section>


        <!-- Contenido relacionado-->
        <aside>
                    <p>Contenido Relacionado</p>
        </aside>



        <!-- Pie de pagina -->
        <footer>
                Este ejemplo de código ha sido creado para <a href="http://www.ejemplocodigo.com">www.ejemplocodigo.com</a>
        </footer>


</body>
</html>

 

Demo del ejemplo

VER DEMO

 

Descargar ejemplo