S6: Elementos de audio y vídeo
- Tiempo: 50min + 50min
-
Objetivos:
- Manejo básico del canvas
- Animaciones en canvas
- Introducción a las etiquetas video y audio de HTML
- Introducción
- Elemento Canvas: Dibujando gráficos 2D
- Animaciones
- Elemento vídeo
- Youtube
- Elemento Audio
- Descargas
- El rincón friki
- Autor
- Créditos
- Licencia
- Enlaces
- Vídeo y audio en internet era complicado: problema de los codecs
- 1996: Adobe Flash Player (Flash)
- Con Flash se podían hacer aplicaciones web con video y audio. Lenguaje interpretado. Action Script (AS)
- 2005: Nace Youtube. Necesario plug-in de Flash
- Problemas de Flash: Privativo (no es un estándar abierto). Soporte pocas plataformas
- 2010: Apple veta flash
- 2014: Llega HTML5 con Vídeo y Audio
- 2015: Youtube deja de usar Flash
- 2018: Flash ya es el pasado. ¡No usar!
El elemento CANVAS nos permite definir regiones en nuestro documento HTML en las que podemos hacer dibujos 2D en tiempo real, utilizando javascript. Es un lienzo en blanco, donde pintar cualquier cosa
Comenzaremos creando un canvas vacío. Como siempre, lo definimos en el documento HTML, dándole un identificador (display en nuestro ejemplo). En el documento HTML situamos el elemento y su identificador, pero NO establecemos su tamaño ni su estilo. El canvas se define mediante la etiqueta <canvas>
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Canvas 01</title>
<link rel="stylesheet" href="canvas-01.css">
<script src="canvas-01.js"> </script>
</head>
<body onload="main()">
<h2>Canvas</h2>
<canvas id="display"></canvas>
</body>
</html>En el fichero canvas-01.css definimos su estilo: lo bordeamos con una línea negra y establecemos el color de su fondo a azul, para distinguirlo
/* Estilo del canvas:
Lo bordeamos con una linea negra, y le damos
fondo azul para distinguirlo
*/
canvas {
background-color: lightblue;
border-style: solid;
border-width: 1px;
border-color: black;
}En el código javascript obtenemos el elemento canvas y fijamos sus dimensiones a 200x100
function main()
{
//-- Obtener el elemento canvas
var canvas = document.getElementById("display");
//-- Definir el tamaño del canvas
canvas.width = 200;
canvas.height = 100;
}Esto es lo que nos aparece al abrirlo en el navegador:
Vamos a dibujar un rectángulo en el interior del canvas. Utilizaremos el mismo HTML y CSS que en el ejemplo anterior, pero cambiamos el código javascript
Para poder dibujar en el canvas hay que obtener un objeto HTML especial* que permite hacer dibujos, que denominamos el contexto. El contexto lo obtenemos mediante el método getContext("2d") del canvas:
var ctx = canvas.getContext("2d");Ahora ya podemos dibujar usando los métodos del contexto. Para definir un rectángulo invocamos al método rect(), pasándole como parámetros las cordenadas x,y de la esquina superior izquierda, su anchura y su altura. En este ejemplo pintaremos el trazado de un rectángulo de dimensiones 100x50, y cuya esquina superior izquierda está situada en la coordenada (5,5). El origin de coordenadas (0,0) está situado en la esquina superior izquierda del canvas
ctx.rect(5,5, 100, 50);Finalmente, para que aparezca el dibujo hay que invocar a alguno de los métodos de dibujo. Si sólo queremos que se dibuje el trazo del rectángulo, llamamos al método stroke()
ctx.stroke()El código javascript completo es el siguiente:
function main()
{
//-- Obtener el elemento canvas
var canvas = document.getElementById("display");
//-- Definir el tamaño del canvas
canvas.width = 200;
canvas.height = 100;
//-- Obtener su contexto, para dibujar en él
var ctx = canvas.getContext("2d");
//-- Definir un rectangulo de dimensiones 100x50,
//-- cuya esquina superior izquierda está en (5,5)
ctx.rect(5,5, 100, 50);
//-- Dibujar
ctx.stroke()
}Y al ejecutarlo en el navegador nos aparece el rectángulo dentro del canvas:
Todos los objetos del canvas tienen dos partes, el trazo y el relleno interior. Una vez definido un objeto, se pueden mostrar su trazo, su relleno o ambos. En este ejemplo creamos un rectángulo rojo
El color del relleno se define con la propiedad fillStyle. Y mediante el método fill() se dibuja el relleno
ctx.fillStyle = 'red';
ctx.fill()El programa javascript completo es el siguiente:
function main()
{
//-- Obtener el elemento canvas
var canvas = document.getElementById("display");
//-- Definir el tamaño del canvas
canvas.width = 200;
canvas.height = 100;
//-- Obtener su contexto, para dibujar en él
var ctx = canvas.getContext("2d");
//-- Definir un rectangulo de dimensiones 100x50,
//-- cuya esquina superior izquierda está en (5,5)
ctx.rect(5,5, 100, 50);
//-- Dibujar
ctx.fillStyle = 'red';
ctx.fill()
}El resultado es el siguiente:
Es posible dibujar tanto el relleno como el trazo, y cambiar sus propiedades. En este ejemplo añadimos el trazo del rectángulo, y modificamos su grosor para que sea mayor. El grosor del trazo se establece con la propiedad lineWidth
//-- Cambiar el tamaño de la linea del trazo
ctx.lineWidth = 4;El programa completo es el siguiente. Primero se dibuja el relleno, con el método fill() y luego el contorno, con el método stroke()
function main()
{
//-- Obtener el elemento canvas
var canvas = document.getElementById("display");
//-- Definir el tamaño del canvas
canvas.width = 200;
canvas.height = 100;
//-- Obtener su contexto, para dibujar en él
var ctx = canvas.getContext("2d");
//-- Definir un rectangulo de dimensiones 100x50,
//-- cuya esquina superior izquierda está en (5,5)
ctx.rect(5,5, 100, 50);
//-- Dibujar el relleno, de rojo
ctx.fillStyle = 'red';
ctx.fill()
//-- Cambiar el tamaño de la linea del trazo
ctx.lineWidth = 4;
//-- Dibujar el trazo
ctx.stroke()
}El resultado es este:
Para dibujar líneas en el canvas se usan los métodos moveTo() y lineTo(). Con el primero se define el punto inicial de la línea. Y con el segundo se pinta la línea hasta el punto destino. El grosor de los trazos de las líneas se define con la propiedad lineWidth y el color con strokeStyle
En este ejemplo se tiran 3 líneas. La primera es una horizontal. La siguiente es una horizontal seguida de una vertical, unidas
function main()
{
//-- Obtener el elemento canvas
var canvas = document.getElementById("display");
//-- Definir el tamaño del canvas
canvas.width = 200;
canvas.height = 100;
//-- Obtener su contexto, para dibujar en él
var ctx = canvas.getContext("2d");
//-- Línea horizontal
ctx.moveTo(10, 20);
ctx.lineTo(100, 20);
//-- Línea horizontal y vertical, unidas
ctx.moveTo(10, 80);
ctx.lineTo(150,80);
ctx.lineTo(150,20);
ctx.strokeStyle = 'blue';
//-- Cambiar el tamaño de la linea del trazo
ctx.lineWidth = 4;
//-- Dibujar el trazo
ctx.stroke()
}Este es el resultado:
Para dibujar círculos, circunferencias y arcos usamos el método arc(). Primero hay que invocar el método beginPath(), y luego se dibujan las curvas. En este ejemplo se dibuja un círculo con relleno amarillo y trazo azul
function main()
{
//-- Obtener el elemento canvas
var canvas = document.getElementById("display");
//-- Definir el tamaño del canvas
canvas.width = 200;
canvas.height = 100;
//-- Obtener su contexto, para dibujar en él
var ctx = canvas.getContext("2d");
ctx.beginPath();
//-- Dibujar un circulo: coordenadas x,y del centro
//-- Radio, Angulo inicial y angulo final
ctx.arc(100, 50, 10, 0, 2 * Math.PI);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
//-- Dibujar el trazo
ctx.stroke()
//-- Dibujar el relleno
ctx.fillStyle = 'yellow';
ctx.fill()
}El resultado es:
En el canvas podemos colocar dos tipos de texto, igual que el resto de objetos: Texto sólido (que está rellenado) y texto definido sólo por su trazo exterior (sin rellenado). En este ejemplo se escriben en el canvas ambos texto. Usamos los métodos fillText() y strokeText(). Con la propiedad font establecemos el tamaño y el tipo de letra
function main()
{
//-- Obtener el elemento canvas
var canvas = document.getElementById("display");
//-- Definir el tamaño del canvas
canvas.width = 200;
canvas.height = 100;
//-- Obtener su contexto, para dibujar en él
var ctx = canvas.getContext("2d");
//-- Texto solido
ctx.font = "25px Arial";
ctx.fillStyle = 'yellow'
ctx.fillText("Texo sólido", 10, 30);
//-- Texto trazo
ctx.strokeStyle = 'blue';
ctx.font = "35px Arial";
ctx.strokeText("Texto trazo", 5, 80);
}Este es el resultado:
Dentro del canvas también podemos meter imágenes. Las imágenes las colocamos dentro del fichero HTML, pero cambiamos sus propiedades de estilo modificadas para que estén **deshabilitadas **y NO se muestren. Desde el programa javascript accedemos a esas imágenes y las insertamos en el canvas. En este ejemplo insertamos una única imágen. El fichero HTML es el siguiente:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Canvas-08</title>
<link rel="stylesheet" href="canvas-08.css">
<script src="canvas-08.js"> </script>
</head>
<body onload="main()">
<h2>Canvas</h2>
<canvas id="display"></canvas>
<img src="logo-urjc.png" alt="No encontrada" id="logo-urjc">
<p>Texto de prueba</p>
</body>
</html>En el fichero de estilo hemos cambiado la propiedad display de la imagen a none, para que no aparezca:
/* Estilo del canvas:
Lo bordeamos con una linea negra, y le damos
fondo azul para distinguirlo
*/
canvas {
background-color: lightblue;
border-style: solid;
border-width: 1px;
border-color: black;
}
/* Imagen deshabilitada
Se usa para leerla desde js y
meterla en el canvas */
#logo-urjc {
display: none;
}Desde el fichero javascript accedemos al elemento imagen y usando el método drawImage() lo insertamos en el canvas, haciendo que la esquina superior izquierda de la imagen esté en la coordenada (15, 18)
function main()
{
//-- Obtener el elemento canvas
var canvas = document.getElementById("display");
//-- Definir el tamaño del canvas
canvas.width = 500;
canvas.height = 250;
//-- Obtener su contexto, para dibujar en él
var ctx = canvas.getContext("2d");
//-- Leer la imagen del documento html
//-- Esta deshabilitada
var logo = document.getElementById("logo-urjc");
//-- Insertar la imagen en el canvas
ctx.drawImage(logo, 15,18);
}Este es el resultado en el navegador:
Con el canvas se pueden realizar animaciones, por ejemplo para hacer videojuegos 2D. Para hacer las animaciones es necesario actualizar el canvas a una frecuencia de 50Hz o más, o lo que es lo mismo, refrescarlo cada 20ms o menos
El algoritmo para hacer las animaciones es el siguiente:
- Borrar el canvas, usando la función clearRect() (especificando el rectángulo a borrar)
- Actualizar la posición de los objetos
- Dibujar los objetos
- Estas acciones se deben repetir cada 20 ms, usando setInterval()
Como ejemplo de animación, haremos que un rectángulo rojo se mueva hacia la derecha, con una cierta velocidad al apretar el botón de start. Al llegar al final, el objeto vuelve a su posición inicial
El fichero HTML es este:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animación 1</title>
<link rel="stylesheet" href="anim-01.css">
<script src="anim-01.js"> </script>
</head>
<body onload="main()">
<h2>Canvas</h2>
<canvas id="display"></canvas>
<br>
<button type="button" id="start">Go!</button>
</body>
</html>En el programa en javascript se define el objeto "objeto", que es el elemento que se quiere animar. Entre sus propiedades está su posición (x,y) y su velocidad. Se han definido 4 métodos: para inicializarlo (init), dibujarlo (draw), actualizar su posición (update) y volver a su posición inicial (reset)
Además se ha definido otro objeto: el tablero. Es el que contiene el canvas, el botón de start y el temporizador. Una vez definidos los objetos, se inicializan, invocando a sus métodos init() y se dibuja el objeto en su posición inicial
function main()
{
//-- Objeto a mover
var objeto = {
x : 10, //-- Cooudenada x
y : 40, //-- Coordenada y
vx: 4, //-- Velocidad en x
ctx : null, //-- Contexto
done: false, //-- Si el objeto ha llegado al final
//-- Inicializar el objeto
init : function (ctx) {
this.ctx = ctx;
},
//-- Dibujar el objeto
draw : function () {
this.ctx.fillStyle = 'red';
this.ctx.fillRect(this.x, this.y, 20, 20)
this.ctx.strokeRect(this.x, this.y, 20, 20)
},
//-- Actualizar la posicion del objeto y redibujar
update : function () {
this.x += this.vx;
if (this.x > (tablero.canvas.width - 30))
this.done = true;
this.draw()
},
//-- Objeto a su estado inicial
reset : function () {
this.x = 10;
this.done = false;
}
}
//-- Objeto tablero
var tablero = {
canvas : document.getElementById("display"),
start : document.getElementById("start"),
ctx : null,
timer : null,
//-- Actualizar el tablero
update : function () {
this.clear();
objeto.update();
//-- Si objeto ha llegado al fial
if (objeto.done) {
//-- Eliminar el timer
clearInterval(this.timer);
this.timer = null;
//-- Resetea objeto
objeto.reset();
//-- Borrar tablero
this.clear();
//-- Dibujar objeto en el origen
objeto.draw();
}
},
//-- Borrar el tablero
clear : function () {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
//-- Inicializar el tablero
init : function () {
this.ctx = this.canvas.getContext("2d");
this.canvas.width = 300;
this.canvas.height = 100;
//-- Cuando se pulsa el botón de start
//-- se actualiza el tablero cada 20ms
this.start.onclick = () => {
if (!this.timer) {
this.timer = setInterval(()=>{tablero.update()},20);
}
}
},
}
//-- Inicializar tablero
tablero.init()
//-- Inicializar el objeto
objeto.init(tablero.ctx)
//-- Dibujar el objeto
objeto.draw()
}Al apretar el botón de start se desencadena todo el proceso: se activa el temporizador que invoca a la función update() del tablero cada 20ms. Esta función borra el canvas, actualiza la posición del objeto y lo dibuja. También comprueba si el objeto ha llegado al final. Si es así se inicializa y se elimina el temporizador
Los vídeos se insertan en nuestras páginas web utilizando la etiqueta <Video>. Con los atributos width y height establecemos el tamaño del vídeo. Con la etiqueta <source> se indica el fichero de vídeo
Con atributo autoplay el vídeo comenzará a reproducirse al cargar la página
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Video 1</title>
</head>
<body>
<h2>Vídeo</h2>
<video width="300" height="200" autoplay>
<source src="test.mp4">
</video>
<p>Vídeo con autoplay. Al cargar la página arranca</p>
</body>
</html>En el navegador vemos esto:
Al cargar la página, o recargarla se activa el vídeo. En esta animación lo vemos en acción:
Introduciendo el atributo controls dentro de la etiqueta vídeo, nos aparecen unos controles básicos para manejar el vídeo: play/pause, control de volumen, línea de tiempo, etc...
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Video 2</title>
</head>
<body>
<h2>Vídeo</h2>
<video width="300" height="200" controls>
<source src="test.mp4" type="video/mp4">
</video>
<p>Vídeo con controles</p>
</body>
</html>Este es el aspecto que tienen los controles en el navegador:
Y en esta animación se muestran en acción:
Los elementos de tipo vídeo también incluyen una api de javascript para modificar sus propiedades e interaccionar con ellos. Esto nos permite definir nuestros propios controles. En este ejemplo definimos 4 botones: uno para reproducir/detener, dos para cambiar el tamaño del vídeo, y uno para ir al segundo 2. El HTML es el siguiente:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Video 3</title>
<script src="video-03.js"></script>
</head>
<body onload="main();">
<h2>Vídeo</h2>
<p>Control desde Javascript</p>
<video width="300" height="200" id="video">
<source src="test.mp4" type="video/mp4">
</video>
<br>
<button type="button" id="play">Play/Stop</button>
<button type="button" id="big">Big</button>
<button type="button" id="small">Small</button>
<button type="button" id="time2">Time 0:2</button>
</body>
</html>En el fichero javascript leemos los elementos de interfaz. El vídeo lo situamos en el objeto vídeo, y sobre el que actuamos. Los métodos usados son:
- play(): Reproducir el vídeo
- pause(): Detener el vídeo
Y las propiedades usadas son:
- width: anchura del vídeo
- height: Altura del vídeo
- currentTime: Tiempo actual del vídeo (por donde va la reproducción)
- paused: Indica si el vídeo está pausado o no
function main()
{
//-- Obtener el elemento canvas
var video = document.getElementById("video");
var play = document.getElementById("play");
var big = document.getElementById("big");
var small = document.getElementById("small");
var time = document.getElementById("time2");
play.onclick = () => {
if (video.paused)
video.play()
else {
video.pause()
}
}
big.onclick = () => {
video.width = 500;
video.height = 300;
}
small.onclick = () => {
video.width = 300;
video.height = 200;
}
time.onclick = () => {
video.currentTime = 2;
}
}Al verlo en el navegador nos aparece esto:
Y en esta animación lo vemos en funcionamiento:
Para incluir vídeo de youtube en nuestras páginas html, utilizamos la etiqueta iframe. Con el atributo src indicamos la URL del vídeo de youtube, pero con un formato diferente:
https://www.youtube.com/embed/identificador-youtube
Hay que indicar /embed y a continuación el identificador del vídeo en youtube. En este fichero HTML se muestra un ejemplo:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Youtube 1</title>
</head>
<body>
<h2>Víde Youtube</h2>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/fLjjrJ7bun8">
</iframe>
<p>Vídeo en youtube</p>
</body>
</html>En el navegador se muestra de la siguiente manera:
Y en esta animación se muestra en funcionamiento:
El Audio funciona exactamente igual que el vídeo. Para más información y ejemplos se puede consultar este Tutorial de Audio en el W3School
- Dispositivas: Introducción al elemento HTML Vídeo
- Tutorial del canvas en el W3School
- Tutorial de vídeo en el W3School
- Tutorial de vídeos en youtube en el W3School
- Tutorial de Audio en el W3School
- (TODO)
- Juan González-Gómez (Obijuan)
- Creado a partir del contenido generado por el profesor Jose María Cañas
