Para embeber un archivo de audio en nuestra página primero necesitamos al menos dos formatos de audio. Por ejemplo, el mp3 y el ogg. El navegador elegirá el primer formato que pueda reproducir y lo ejecutará.
La sintaxis es muy sencilla:
<audio controls="controls"> <source src="urlaudio.mp3" type="audio/mpeg"> <source src="urlaudio.ogg" type="audio/ogg"> </audio>
Reproducir y escuchar este ejemplo:
El elemento audio introduce el audio que se va a embeber.
El atributo controls coloca los controles de reproducción. El atributo podría estar vacío, <audio controls> pero podemos también elegir el valor como hemos hecho: <audio controls="controls">
El elemento source nos lleva a la URL del archivo de audio con el atriobuto src que puede ser una ruta relativa o absoluta. El atributo type define el tipo de audio.
Los formatos más adecuados para la web son el mp3 y el ogg que tienen calidad sin pesar demasiado. Para editar audio recomendamos el programa Audacity.
Aprovechando el ejemplo de archivo de audio embebido, puesto que es un poema, vamos a colocar la letra de la pesía diseñando ligeramente el formato.
Podría quedar algo así:
Federico García Lorca
En primer lugar, hemos puesto el título del poema entre las etiquetas <cite> y </cite>. Este elemento se suele emplear para los títulos de las obras.
Hemos puesto el poema dentro de un div. Al div le hemos puesto una class="poema" para poder referirnos a él en los estilos.
<style> .poema{ border-left: 8px solid gold; text-indent: 3em; padding:20px; margin:30px; } audio{ margin-left:65px; } </style>
Para que el nombre del poeta quede más a la derecha, hemos utilizado el elemento pre (preformateado: se van a respetar los espacios y saltos de línea...). De esta forma, la escritura del nombre del autor se traslada a la derecha los espacios que deseemos.
<pre> <i>Federico García Lorca</i></pre>
Para finalizar, hemos puesto un title con el contenido del grupo musical que interpreta el poema. En este caso Alipio y Los Alimonados: cuando el cursor se sitúe sobre el reproductor aparecerá un tooltip con esa información:
<audio controls="controls" title="Interpretado por Alipio y Los Alimonados"> <source src="urlaudio.mp3" type="audio/mpeg"> <source src="urlaudio.ogg" type="audio/ogg"> </audio>
De manera similar al audio, el elemento <video> se introduce con los mismos parámetros, en este caso, adaptados a la multimedia correspondiente. Al menos dos formatos y, en este caso conviene también, delimitar el ancho y alto que ocupará el reproductor.
El código quedaría así:
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> </video>
Lo que ocurre es que el vídeo es un formato extraordiariamente pesado: ocupa muchos megas. Por este motivo, no es un elemento usado normalmente. Se suele preferir trasladar embebido el formato de vídeo alojado en otros servidores especializados como Youtube, Dailymotion, Vimeo... con el elemento iframe.
Incluso si somos los creadores del vídeo, es mucho más eficaz trasladarlo a una de estas plataformas y, después, utilizar la opción compartir para acceder al código y copiarlo en nuestra web.
Es lo que estoy haciendo con los vídeos de apoyo a este curso. Yo los creo, los subo a Youtube y, desde allí, los embebo en estos documentos.
La gran mayoría de creadores de contenido multimedia dejan que los usuarios embeban sus producciones en las páginas webs o blogs de otros particulares. Cuando (ocurre también) un creador no deja que sus vídeos sean compartidos, te lo hace saber con un mensaje del tipo: El vídeo no está disponible. El propietario del vídeo ha inhabilitado su reproducción en otros sitios web.
Así que, vamos a explicar este proceso para colocar en nuestra web vídeos propios o de terceros, subidos a Youtube.
Una vez colocados en el vídeo correspondiente, le damos al botón Compartir y, luego a la opción Insertar. Nos aparecerá un código que va desde <iframe> a </iframe>. Lo copiamos y lo llevamos a nuestra página.
Pero, tenemos algún problema. En primer lugar, el atributo border que no es aceptado ya por el W3C Consortium. Youtube pone el border a cero. Pero esta forma de decirlo ya no es aceptable. Por otro lado, la inserción del vídeo no es adaptable al tamaño de la pantalla. No es reponsive. Así que tenemos que declarar un par de cosas en nuestro CSS.
En primer lugar, nuestro vídeo tenemos que meterlo dentro de un div al que le hemos puesto una class="container" con estos estilos:
.container { position: relative; overflow: hidden; width: 80%; padding-top: 56.25%; display: block; margin-left: auto; margin-right: auto; }
Y para el propio iframe:
.responsive-iframe { border:none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }
Y este sería el código de inserción:
<div class="container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/cQzPkCQo_n4" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe> </div>
Y aquí nuestro vídeo embebido perfectamente adaptable al tamaño de la pantalla: