HTML5: audio y video
HTML5 es la quinta versión del lenguaje básico de la World Wide Web, HTML, publicado en 2014. Establece una serie de nuevos elementos y atributos que reflejan el uso típico de las web modernas. A partir de aquí vamos a estudiar unas de las nuevas etiquetas que nos ofrece que son audio y video.
Estructura HTML5
Para empezar un documento HTML5 es necesario declarar al principio del documento:
<!DOCTYPE html>
De esta manera se le esta indicando al navegador que es una web hecha en HTML5. Continuamos declarando la cabecera y el cuerpo del documento.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video y audio</title>
</head>
<body>
</body>
</html>
Dentro del body es donde procederemos a crear la estructura de HTML5 que lo dividiremos a su vez en una cabecera, un menú, en secciones y finalmente con un pie de página.
Dentro de las secciones irán artículos. Estas son algunas de las etiquetas que emplea HTML5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video y audio</title>
</head>
<body>
<header></header>
<nav></nav>
<section>
<article></article>
</section>
<section>
<article></article>
</section>
<footer></footer>
</body>
</html>
En el interior de cada uno se puede poner cualquier etiqueta o contenido pero nosotros haremos un articulo para ver el vídeo y otro para ver el audio.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video y audio</title>
</head>
<body>
<header>
<h1>AUDIO Y VIDEO</h1>
</header>
<nav>
(( MENU DE NAVEGACION ))
</nav>
<section>
<article>
<h2>VIDEO<h2>
<div class="video mas">
<video id="player" controls="controls" width="360" height="240">
<source src="video.mp4" type="video/mp4"><!-- Safari 5 -->
<source src="video.ogg" type="video/ogg; codecs='theora, vorbis'"><!-- Firefox 5 y Google
Chrome º4 -->
<source src="video.webm" type="video/webm"><!-- Firefox 5 y Google Chrome 14 -->
</video>
</div>
<div class="video">
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pausa</button>
<button onclick="document.getElementById('player').volume+=0.1">+ Volumen</button>
<button onclick="document.getElementById('player').volume-=0.1">- Volumen</button>
</div>
</article>
</section>
<section>
<article>
<h2>AUDIO<h2>
<div class="audio">
<audio id="player2" controls="controls" preload="auto" >
<source src="audio.mp3" type="audio/mpeg" />
<source src="audio.ogg" type="audio/ogg" />
</audio>
</div>
<div class="audio">
<button onclick="document.getElementById('player2').play()">Play</button>
<button onclick="document.getElementById('player2').pause()">Pausa</button>
<button onclick="document.getElementById('player2').volume+=0.1">+ Volumen</button>
<button onclick="document.getElementById('player2').volume-=0.1">- Volumen</button>
</div>
</article>
</section>
<footer></footer>
</body>
</html>
La manera de crear la etiqueta es la misma para amabas. Se crean las etiquetas (video y audio) y se le da un atributo identificador a cada una para luego asociarlo con sus posteriores controles. Se le da el atributo controls para tener los susodichos controles. Luego se puede añadir una altura o ancho del reproductor y otra propiedad opcional es el preload que te permite cargar contenido cuando se carga la página.
Dentro de las etiquetas de audio o video se añaden los archivos de vídeo o audio que queramos añadir bajo el nombre de la etiqueta source y el atributo src. También otro atributo type para indicar el formato de los archivos que adjuntemos.
Tener en cuenta que la ruta para encontrar nuestros archivos tiene que estar bien puesta.
Finalmente creamos un bloque de control para cada elemento mediante un div que va a llevar botones (button) con el atributo onclick que coja mediante javascript el id que le hemos dado a nuestro audio y nuestro vídeo y le aplicamos las funciones de play, pause subir o bajar volumen.
Ya tenemos nuestro reproductor de audio y vídeo montado así que procedamos a darle los estilos para que quede listo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video y audio</title>
<style>
header, nav, section, article, footer {
width: 100%;
text-align: center;
margin-bottom: 2%;
}
.video {
text-align: center;
width: 400px;
height: 40px;
background-color: #D3D3D3;
border-radius: 15px;
padding-top: 15px;
margin-bottom: 30px;
border: 1px solid white;
margin: 0 auto;
}
.mas {
height: 270px;
}
.audio {
text-align: center;
width: 350px;
height: 40px;
background-color: #D3D3D3;
border-radius: 15px;
padding-top: 15px;
margin-bottom: 50px;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
<h1>AUDIO Y VIDEO</h1>
</header>
<nav>
(( MENU DE NAVEGACION ))
</nav>
<section>
<article>
<h2>VIDEO<h2>
<div class="video mas">
<video id="player" controls="controls" width="360" height="240">
<source src="video.mp4" type="video/mp4"><!-- Safari 5 -->
<source src="video.ogg" type="video/ogg; codecs='theora, vorbis'"><!-- Firefox 5 y Google
Chrome º4 -->
<source src="video.webm" type="video/webm"><!-- Firefox 5 y Google Chrome 14 -->
</video>
</div>
<div class="video">
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pausa</button>
<button onclick="document.getElementById('player').volume+=0.1">+ Volumen</button>
<button onclick="document.getElementById('player').volume-=0.1">- Volumen</button>
</div>
</article>
</section>
<section>
<article>
<h2>AUDIO<h2>
<div class="audio">
<audio id="player2" controls="controls" preload="auto" >
<source src="audio.mp3" type="audio/mpeg" />
<source src="audio.ogg" type="audio/ogg" />
</audio>
</div>
<div class="audio">
<button onclick="document.getElementById('player2').play()">Play</button>
<button onclick="document.getElementById('player2').pause()">Pausa</button>
<button onclick="document.getElementById('player2').volume+=0.1">+ Volumen</button>
<button onclick="document.getElementById('player2').volume-=0.1">- Volumen</button>
</div>
</article>
</section>
<footer></footer>
</body>
</html>
En estos estilos lo metemos todo al centro y separamos un poco cada bloque.
Compatibilidad con navegadores
Al ser relativamente nuevo, HTML5 no es reconocido en viejas versiones de navegadores por sus nuevas etiquetas. Por lo tanto se recomienda actualizar el navegador a la versión más nueva.
Concretamente estas etiquetas, no son reconocidas por versiones inferiores a Internet Explorer 9 (esta incluida), aunque también influye el formato de vídeo o audio que se use.
Y así se crea un reproductor de vídeo y audio. Espero que os haya gustado y nos vemos en el próximo tutorial.