Tutorial de Multimedia usando HTML5, CS3 y JavaScript
La web moderna nació con una promesa incumplida durante años: contenido audiovisual nativo, sin plugins, sin dependencias externas. HTML5 lo cambió todo. De golpe, el navegador se convirtió en un reproductor completo, capaz de gestionar imágenes, audio y vídeo con código limpio y elegante.
Este tutorial ataca ese territorio directamente. Aprenderás a combinar las etiquetas multimedia de HTML5 con estilos CSS3 aplicados en línea. También integrarás JavaScript para construir una lista de reproducción funcional. Todo desde cero. Todo con propósito.
El enfoque es deliberadamente práctico y sin rodeos. Cada bloque de código tiene su razón de ser. Cada decisión técnica queda explicada. Si estás dando tus primeros pasos en el desarrollo web, aquí encontrarás una hoja de ruta clara. Si ya tienes experiencia, encontrarás un recordatorio valioso sobre por qué documentar el código no es opcional. Es una deuda que siempre se cobra.
Tutorial de Multimedia usando HTML5, CS3 y JavaScript
En este post a vamos a realizar un a utilizar Tutorial de Multimedia usando HTML5, CS3 y JavaScript utilizando las nuevas etiquetas Multímedia de HTML5. Dando por entendido que tod@s conocéis la estructura de un archivo HTML5, empezaremos escribiendo la misma.
<!doctype html> <!-- esta etiqueta, indica que el documento es ya HTML5 --> <html lang="es_ES"> <!-- Indicamos al navegador el lenguaje de nuestra Web --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Multimedia</title>
Hacer hincapié en que en la primera linea usamos ya la nueva sintaxis, la cual informa de que estamos usando la ultima versión del lenguaje de Hipertexto como podéis observar usando <!– etiquetas a comentar –>, para explicar por que usamos este codigo lo que nos servirá tiempo despues para recordar por que lo escribimos ( p. ej., cuando un cliente nos pide despues de unos meses un mantenimiento del sitio
En esta ocasión utilizaremos dentro del propio documento HTML5, codigo CSS3, en lugar de cargarlo en un fichero aparte para que sea de mas facil comprensión ya que el Tutorial de Multimedia usando-HTML5, CS3 y JavaScript es para personas que comienzan en el apasionante mundo de la programación:
<style type="text/css">
body
{
font-family:"Courier New", Courier, monospace;
background-image: url(imagenes/bg.jpg);
background-repeat: repeat;
}
div.contentenidos
{
border-radius:0.5em;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
background-color: lightblue;
border-bottom: 2px solid #F90 ;
border-right: 2px solid #F90;
margin: 0 auto;
margin-top:50px;
min-height: 600px;
padding: 5px 5px 5px 15px;
width: 650px;
}
h1.cabecera
{
color:#444;
border-radius:0.5em;
background-color:lightgoldenrodyellow;
text-align: center;
/* text-shadow: 5px 5px 10px rgba(0,0,0,0.5)
text-shadow: 10px 8px #ccf, -10px 12px #fcf, -8px -12px #cfc, 12px -5px #fc9; */
text-shadow: #f83 -1px 1px, #f83 -2px 2px, #f83 -3px 3px, #f83 -4px 4px, #f83 -5px 5px;
}
#contenedor
{
position:relative;
width:100%;
}
</style>
<link type="text/css" href="css/audio.css" title="estilos css" rel="stylesheet"/> <!-- observar que aqui cargamos una hoja de estilos externa -->
<script type="text/javascript" src="js/playlist.js"></script> <!-- Aquí cargamos el codigo Javascript para la lista de reproducción -->
En esta parte de codigo vamos a dar el aspecto mediante instrucciones CSS3, para – de esta manera, que el usuario tenga una experiencia mas satisfactoria al ver un diseño agradable, de facil manejo e intuitivo. En primer lugar, le asignamos al <body> de nuestro documento, el tipo de letra , en este caso courier, pero podéis usar la que deseéis. De fondo pondremos un tapiz que se están poniendo de moda, para conseguir «textura» y conseguir que el usuario se sienta como en casa. Tambien usaremos la clase .contenidos, declarada dentro de la etiqueta <div></div> principal para darle unos bordes redondeados y una pequeña sombra y conseguir una mejor apariencia.
Despues del codigo CSS3, pasaremos al HTML5 el cual lo podéis ver aquí y paso a explicaros:
<body>
<div id="contenedor">
<div class="contentenidos">
<!--imagenes -->
<h1 class="cabecera">EJERCICIOS MULTIMEDIA</h1>
<h2> Imagenes del Ejercicio </h2>
<span style="float:left;"> <img src="imagenes/arbolTNT.jpg" title="Logotipo TNT" alt="Logotipo TNT"/> </span>
<p><span style="float:left; margin-right:5px; margin-left:5px;"> <img src="imagenes/arbolTNT.png" title="Logotipo TNT" alt="Logotipo TNT" /></span>
<img src="imagenes/arbolTNT.png" title="Logotipo TNT" alt="Logotipo TNT"/></p>
<p> Imagen/Archivo gif Imagen/Archivo.jpg Imagen/Archivo .png</p>
<hr>
<!-- Audio -->
<h2>Ejercicio de audio Lista de reprodución</h2>
<div style="float:left; margin-right:5px; ">
<audio controls="controls" style="width:250px;">
<source src="audio/cancion.ogg" type="audio/ogg">
Actualiza tu navegador a la última versión de tu naegador para ver el reproductor!
</audio>
<p> Audio/ Archivo/ogg </p>
</div>
<div style="">
<audio id="audioplayer" controls onEnded="javascript:obtainNextSong(this)">
<source src="audio/cancion.mp3" type="audio/mp3">
<source src="audio/cancion.ogg" type="audio/ogg">
Actualiza tu navegador a la última versión de tu naegador para ver el reproductor!
</audio>
<div id="playlist">
<ul>
<li><a class="songLink" href="javascript:cambiarCancion('audio/la casa por el tejado');">La Casa por el tejado</a></li>
<li><a class="songLink" href="javascript:cambiarCancion('audio/out of africa');">Historias de Africa</a></li>
<li><a class="songLink" href="javascript:cambiarCancion('audio/cigarrito');">Cigarrito</a></li>
<li><a class="songLink" href="javascript:cambiarCancion('audio/calle melancolia');">Calle melancolia</a></li>
<li><a class="songLink" href="javascript:cambiarCancion('audio/rojitas las orejas');">rojitas las orejas</a></li>
</ul>
</div>
<p> Audio/ Archivo mp3 </p>
</div>
<!-- Video -->
<hr>
<h2>Ejercicios de Video </h2>
<div style="float:left;">
<video controls="controls" poster="imagenes/arbolTNT.png" style="margin-right:5px;width :200px; height:200px;">
<source src="videos/Tabarca_xo.ogv" type="video/ogg"/>
tu navegador no soporta el formato de video ogg !!
</video>
<p>Video/Archivo ogv </p>
</div>
<div style="float:left;">
<video controls="controls" poster="imagenes/arbolTNT.png" style="margin-right:5px; width:200px; height:200px;">
<source src="videos/Tabarca.mp4video.webmvp8.webm" type="video/webm"/>
tu navegador no soporta el formato de video webm !!
</video>
<p> Video/Archivo webm </p>
</div>
<div>
<video controls="controls" poster="imagenes/arbolTNT.png" style="width:200px; height:200px;">
<source src="videos/Tabarca.mp4video.mp4" type="video/mp4"/>
tu navegador no soporta el formato de video mp4 !!
</video>
<p> Video/Archivo mp4 </p>
</div>
</div>
<br/><br/><br/><br/><br/>
</div>
Para que comprendáis todo mejor os dejo un video, que vale mas que todo el tostón que os he soltado, aunque no incluye la lista de reproducción de sonido. El Ejemplo entero lo podéis ver en mi servidor desde aquí
Tutorial de Multimedia usando HTML5, CS3 y JavaScript
En relación a la lista de distribución en Javasctipt, os pongo el codigo aquí:
// JavaScript Document
/*
* Manejo de la lista de canciones.
*/
function obtainNextSong(player) {
var songsList = document.getElementById("playlist").getElementsByTagName("a"),
cancion;
//Obtenemos la canción que está sonando...
cancion = player.getElementsByTagName("source")[0].getAttribute("src");
cancion = cancion.substring(0, cancion.length - 4);
//Buscamos cuál es
for(i=0; i<songsList.length - 1; i++){
cancionThis = songsList[i].getAttribute("href");
cancionThis = cancionThis.substring(27, cancionThis.length-3);
//Si la encontramos, ponemos la siguiente.
if(cancionThis === cancion){
cancionThis = songsList[i+1].getAttribute("href");
cancionThis = cancionThis.substring(27, cancionThis.length-3);
cambiarCancion(cancionThis);
return;
}
}
//Si es la última, ponemos la primera.
cancionThis = songsList[0].getAttribute("href");
cancionThis = cancionThis.substring(27, cancionThis.length-3);
cambiarCancion(cancionThis);
}
function cambiarCancion(cancion) {
var i = 0,
audioplayer = document.getElementById("audioplayer"),
sources = document.getElementById("audioplayer").getElementsByTagName("source");
for( i=0; i<sources.length; i++ )
{
switch(sources[i].getAttribute("type"))
{
case "audio/mp3":
sources[i].setAttribute("src", cancion + ".mp3");
document.createElement("source")
break;
case "audio/ogg":
sources[i].setAttribute("src", cancion + ".ogg");
break;
default:
return;
}
}
audioplayer.load();
audioplayer.autoplay = "autoplay";
}
Este tutorial demuestra algo fundamental: HTML5, CSS3 y JavaScript juntos son suficientes para construir experiencias multimedia ricas. Sin plugins. Sin dependencias externas. La web moderna tiene todo lo necesario desde el navegador. Integrar audio, vídeo e imágenes con pocas líneas de código es hoy accesible para cualquier desarrollador que empiece.
El verdadero valor no está en el código en sí. Está en el hábito de comentar, documentar y estructurar desde el primer día. Un proyecto sin comentarios es una trampa de tiempo. Quien programa hoy para otros, o para su yo del futuro, necesita claridad antes que brillantez técnica. Esa disciplina marca la diferencia entre un aficionado y un profesional.
En un mundo donde los frameworks de JavaScript dominan cada proyecto, ¿tiene todavía sentido enseñar multimedia con HTML5 puro, o estamos formando desarrolladores con herramientas que nunca usarán en producción?
