Insertar Audio, Video y elementos CANVAS con HTML5

Tabla de contenidos

1 Insertar un audio
2 Insertar un vídeo
3 Insertar diseños gráficos con CANVAS

Los que venimos desarrollando webs desde hace mucho tiempo sabemos lo complejo que era insertar vídeos en nuestro diseño. Con HTML5 se han desarrollado etiquetas que facilitan este trabajo mucho, y no solo para vídeos sino para audios, y para dibujar gráficos se ha creado una etiqueta especifica que con un conocimiento alto de javascript permite realizar auténticas maravillas visuales.

Insertar un audio

Para insertar un audio tenemos 2 formas:

ivoox u otras webs de audios que permitan compartir vídeos en nuestra web. En ivoox debemos abrir un audio, pinchamos sobre el botón más (añadir audio a) -> compartir. -> reproductor, y nos ofrecen varios formatos visuales. Seleccionamos uno, copiamos el código fuente en nuestro html y listo.
Si el audio esta en nuestra propia web debemos usar la etiqueta audio de html5.

<audio controls>
<source src="tiburon.mp3" type="audio/mp4">
</audio>

Ten en cuenta que si el audio se reproduce desde nuestra web, eso implica que es nuestro servidor el que se encarga de su reproducción.

Insertar un vídeo

Para insertar un vídeo en nuestra web tenemos 2 formas:

Youtube u otras webs de vídeos (vimeo) que permitan compartir vídeos en nuestra web. Para ello podemos abrir cualquier vídeo -> compartir -> insertas y copiamos el código. Si pinchamos en mostrar más podemos configurar su funcionamiento como por ejemplo si queremos que al finalizar salgan otros vídeos de Youtube o no. Truco: Si queremos que el vídeo se inicie y/o finalice en un segundo concreto podemos añadir ?t=56 al final del SRC, siendo 56 el segundo del vídeo. (Ejemplo: https://www.youtube.com/embed/ux3STlov7Vw?start=20&end=50).

Si el vídeo esta en nuestra propia web debemos usar la etiqueta video de html5.

<video controls width="320" height="200">
<source src="mariposa.mp4" type="video/mp4">
</video>

Ten en cuenta que si el vídeo se reproduce desde nuestra web, eso implica que es nuestro servidor el que se encarga de su reproducción, los vídeos largos y de calidad consumen muchos recursos de servidor.

Insertar diseños gráficos con CANVAS

El elemento canvas sirve para crear un entorno en el que crear dibujos pudiendo crear incluso efectos dinámicos. En si el elemento es muy simple solo es necesario darle unas dimensiones al lienzo:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
El navegador que usas no soporta html5.
</canvas>

En este caso le añadimos un borde, y un mensaje interno por si se abre la web con un navegador que no soporte HTML5.

Y desde este momento podemos dibujar con javascript, por ejemplo vamos a crear un círculo:

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

Y por ver un ejemplo de su potencial aquí podemos ver el código fuente de un reloj en movimiento creado 100% con canvas:

<canvas id="canvas2" width="400" height="400" style="border:1px solid #d3d3d3;">
El navegador que usas no soporta html5.
</canvas>
<script>
var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

Podemos incluso crear juegos como podemos observar en este enlace.

Aquí os dejo un manual completo de Canvas: Ver.

Ver ejemplos