Web.HTML.Multimedia.
Etiqueta <video>.
Se utiliza para insertar vídeos en una página web. Un ejemplo:
<!DOCTYPE html>
<html>
<body><video width="320" height="240" controls autoplay >
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Tu navegador no soporta esta la reproducción de vídeo.
</video></body>
</html>
Se puede usar, como se ve en el ejemplo, las propiedades ancho y alto, pero existen algunas más:
- width. Ancho.
- height. Alto.
- controls. Muestra los controles de reproducción.
- autoplay. Reproduce el vídeo automáticamente.
source. Fuente del vídeo.
- src. El nombre de vídeo que se quiere incrustar en la página. Se pueden usar rutas.
- type. Se especifica el tipo de vídeo. Los tipos de vídeos sólo pueden ser “Mp4, WebM y Ogg”.
Etiqueta <audio>.
Se utiliza para insertar clip de audios en las páginas web. Un ejemplo:
<!DOCTYPE html>
<html>
<body><audio controls autoplay>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporte reproducción de audio.
</audio></body>
</html>
Algunas propiedades que se ha utlizado en el ejemplo:
- controls. Muestra los controles de reproducción.
- autoplay. Reproduce el audio automáticamente.
source. Fuente del audio.
- src. El nombre del audio que se quiere incrustar en la página. Se pueden usar rutas.
- type. Se especifica el tipo de audio. Los tipos de audio sólo pueden ser “Mp3, Wav y Ogg”.
Etiqueta <object> y <embed>.
Estas dos etiquetas se usan para añadir funcionalidad a la página web a través de plugins, como pueden ser los applets de java, lectores pdf, reproductores flash…etc. Unos ejemplos para ver como funciona:
<!DOCTYPE html>
<html>
<body><object width="400" height="50" data="animacion.swf"></object>
<object width="400" height="50" data="imagen.jpg"></object>
<object width="400" height="50" data="codigo.html"></object> <embed width="400" height="50" src="animacion.swf">
<embed width="400" height="50" src="imagen.jpg">
<embed width="400" height="50" src="codigo.html"></body>
</html>
Algunas propiedades que se han utilizado:
- width. Ancho.
- height. Alto.
- data/src. Fuente del archivo que se va a incrustar en la página web.
YouTube.
En las páginas web se pueden incrustar vídeos directamente cogidos desde youtube.
Lo primero es identificar el vídeo mediante el id en la propia página del youtube. ¿Cual es el id? Pues de cualquier url de youtube, en la última parte, es decir la que hay después del igual:
https://www.youtube.com/watch?v=nG7n93dShNQ#Ahora se debe modificar la url original para poder incrustarla en la página web, quedando de la siguiente forma; https://www.youtube.com/embed/nG7n93dShNQ
<iframe>.
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="315" src="https://www.youtube.com/embed/nG7n93dShNQ">
</iframe>
</body>
</html>Se le pueden añadir más opciones al final de url:
- ?autoplay=1. Reproduce automáticamente.
- ?playlist=nG7n93dShNQ&loop=1. Reproducción contínua.
- ?controls=0. No muestra los controles de reproducción. Si no se especifica nada, los muestra por defecto.
