Embedded Files
HTML 5 tiene un soporte de soporte nativo; es decir, videos, animaciones, sonido, etc., sin necesidad de instalar plugins. Las etiquetas <audio> y <video> permiten un fácil acceso a nuestro sitio web para multimedia, y "controles" y nuevos atributos permiten al usuario iniciar o detener la ejecución.
<video>
Definición: Inserta un video o una animación.
Atribututos: global attributes, src, poster, preload, autoplay, loop, controls, width, height.
- src: Proporciona la URL de vídeo del vídeo de reproducción.
- Póster: muestra una imagen mientras el video no está disponible. - Preload - Mejora la visualización (ninguno, metadatos y valores automáticos). - autoplay: Este booleano indica que el video se reproducirá automáticamente. - Loop: Este booleano indica que el video se repetirá automáticamente. - controls: Este booleano le pide al usuario que agregue controles de usuario.
La especificación HTML 5 actual no indica qué formatos de vídeo utilizar, pero estos son los tipos más comunes:
· ogg: es un formato de gabinete; Es decir, tiene varios datos de audio y video comprimidos en un solo archivo. Fue desarrollado por Xiph.org como código abierto. El codec de vídeo es Thedora y el codec de audio Vorbis.
.ogg, .ogv, .oga, .ogx.
· mp4: un formato de gabinete de datos multimedia definido en mpeg-4 estándar. El códec de vídeo es H. 264 y el códec de audio AAC.
.mp4, .m4a, .m4p, .m4v, . 3gp, . 3g2.
· matroska: un formato de datos multimedia de gabinete, avi, mov, mp4 y similares formatos de código abierto alternativa.
mkv, mka, mks.
Ejemplo:
<video src="mivideo.ogv" width="300" height="200" controls>
Tu navegador no admite este tipo de video
</video>
<audio>
Definición: Inserta un archivo de sonido en el documento.
Atributos: global atttributes, src, poster, preload, autoplay, loop, controls.
La especificación HTML 5 actual no indica qué formatos de audio deben utilizarse, pero estos son los más comunes: ogg, mp3 y wav.
Ejemplo:
<audio src="miaudio.wav" autoplay controls>
Tu navegador no soporta el audio
</audio>
<source>
Definición: especifica el archivo de origen multimedia con más detalles. Se utiliza para especificar varios archivos de origen; En este caso, el primero muestra el navegador a través de un formato que puede reconocerse. Debe usarse con <video> o <audio>.
Atributos: global attributes, src, type, media.
- type: tipo de formato
ogg, mp4, x-matroska…
Ejemplo:
<video controls poster="downloading.jpg">
<source src="mivideo.ogv" type="video/ogg">
<source src="mivideo.mp4" type="video/mp4">
<source src="mivideo.mkv" type="video/x-matroska">
</video>
<canvas>
Definición: Define un espacio para los gráficos. Pueden ser imágenes, animaciones o gráficos vectoriales.
Atributuak: global attributes, width, height.
Adibidea: Para dibujar sobre lienzo, necesitamos usar lenguaje Javascript.
Métodos utilizados::
ctx = canvas.getContext() para establecer el contexto 2d
ctx.beginPath() indica el inicio de los dibujos
ctx.arc() para dibujar un arco
ctx.moveTo() para mover los pinceles
ctx.fillStyle(), ctx.fill() para colorear un campo
ctx.stroke() para hacer el dibujo
<html>
<head>
<script>
function dibujar(){
var var1 = document.getElementById('smile');
if (var1.getContext)
{
var ctx = var1.getContext('2d');
ctx.beginPath();
ctx.arc(80,80,50,0,Math. PI*2,false); //
ctx.moveTo(115,80);
ctx.arc(80,80,35,0,Math. PI,false); //
ctx.moveTo(70,65);
ctx.arc(65,65,5,0,Math. PI*2,false); //
ctx.moveTo(100,65);
ctx.arc(95,65,5,0,Math. PI*2,false); //
ctx.fillStyle='#efd';
ctx.fill();
ctx.stroke();
}
else {
alert('Tu navegador no soporta canvas');}
}
</script>
</head>
<body onload="dibujar();">
<canvas id="smile" width=160, height=160>
</body>
</html>
Ejercicio
Haga una página HTML que le permita reproducir un video. No utilice las propiedades de control, los botones de control que necesita hacer. Haga por lo menos los siguientes botones: - Reproducir / Pausa - Barra para ir a cualquier barra de video - Barra de cambio de volumen - El silencio y el botón de escuchar de nuevo
Page updated
Report abuse