 |
| INFO EXTRAÍDA DE IMAGINANET.COM [PINCHA EN LA FOTO Y ACCEDE] |
Siempre hay ocasiones en las que es necesario
insertar un video o un chero
de audio para que se
reproduzca de forma integrada en la web sin
neesidad de descargarlo a tu disco duro y abrirlo
con tu reproductor habitual.
Hasta ahora esto se ha hecho siempre mediante la
inserción de macros a través de la etiqueta html
iframe o mediante un reproductor ash.
Esto tiene
dos inconvenientes:
El primero de ellos es que para que todo cuadre en
la web. El que lo inserta debe saber el suciente
html para que ajuste el tamaño a la proporción
adecuada de tal forma que todo se ajuste a la
maqueta como debería.
El segundo de los inconvenientes es que la
inserción de macros siempre es un problema en
cuanto a seguridad, ya que se está cargando
contenido de otra web en la nuestra, lo cual puede
provocar que nuestra web sea portadora de virus si
no se utiliza con cuidado.
El ash
por su parte, en función de los navegadores,
puede generar graves problemas de rendimiento
(Especialmente en Internet Explorer). Además del
hecho de que no es posible reproducir ash
en
ciertos dispositivos, como los de Apple,
enórmemente extendidos ha día de hoy.
En el caso de que la web no esté pensada para ser
visualizada en dispositivos móviles o tablets, en
principio, de esta forma se puede obtener un reproductor de audio o de video muy facilmente. A
continuación vemos unos ejemplos de cómo
insertar videos v
en la web con un reproductor
ash,
Con este código cargaremos un reproductor de
video ash
que nos permitirá ver videos v
en
nuestra web insertándolo allí donde queramos que
se reproduzca el video. Sin embargo, los sitios como
youtube o vimeo, no permiten reproducir los videos
de forma directa a traves del reproductor ash,
porque ya tienen su propio sistema. En estos casos,
debemos, o bien insertar diréctamente le código
iframe que nos ofrece youtube o vimeo para que
todo funcione corréctamente ajustando los
parámetros de anchura y altura del iframe que nos
dan para que cuadre en donde lo queramos poner.
Existe una alternativa que, aunque tambien pasa por los iframes, facilita mucho la labor para alguien que no sabe HTML. Tanto Youtube como Vimeo, tienen un código asociado a cada uno de sus videos que acompaña a la url mediante parámetros get. De cara al porgramador es algo más laborioso, porque debe procesar el enlace por php, extraer el código citado de youtube o vimeo, y acoplarlo a un enlace de tipo embed de la web que corresponda (Youtube o Vimeo). Básicamente, se trata de montar nuestro propio iframe sabiendo cual es el formato de los enlacess embed de Vimeo y de Youtube, los cuales podemos ver facilmente en los iframes para insertar un video que nos proporcionan dichas webs.
En el caso del audio, tambien se usa un código Flash que carga el reproductor instalado por defecto en nuestro navegador. El más utilizado suele ser Windows media player, debido a al gran expansión de los sistemas operativos Windows.
Etiquetas audio y video de HTML 5
En HTML 5 tenemos la posibilidad de reproducir audio y video diréctamente mediante el uso de las etiquetas audio y video.
La etiqueta Audio
Nos permite insertar un chero de audio con un reproductor en nuestra web, que nos permitira escucharlo sin necesidad de tener instalado ningún programa adicional para dicho fin.
A continuación se expone una breve descripción de algunos de los atributos disponibles para esta etiqueta. src. Indica la ruta del archivo a reproducir. autoplay. Permite que la reproducción comience de forma automática sin previo aviso. En ocasiones no se recomienda su uso para dejar que el usuario decida cuando reproducir audio cuando lo desee. autobuffer. Nos permite cargar de forma automática el archivo para que sea más rápida su reproducción a posteriori y reducir aí tiempos de espera para el usuario. width y height. Denen respectivamente la anchura y la altura que deberaá tener la etiqueta de audio. loop. Ejecuta la reproducción en bucle de forma que al nalizar vuelve a empezar.
controls. Muestra los controles de reproducción. type. Dene el tipo de archivo a reproducir y su extensión (video, audio...)/(mp3, ogg...). La etiqueta Video En el caso de la etiqueta de video, atributos son muy similares a los de la etiqueta audio
controls. Muestra los controles de reproducción. type. Dene el tipo de archivo a reproducir y su extensión (video, audio...)/(mp3, ogg...). La etiqueta Video En el caso de la etiqueta de video, atributos son muy similares a los de la etiqueta audio
Existe una alternativa que, aunque tambien pasa por los iframes, facilita mucho la labor para alguien que no sabe HTML. Tanto Youtube como Vimeo, tienen un código asociado a cada uno de sus videos que acompaña a la url mediante parámetros get. De cara al porgramador es algo más laborioso, porque debe procesar el enlace por php, extraer el código citado de youtube o vimeo, y acoplarlo a un enlace de tipo embed de la web que corresponda (Youtube o Vimeo). Básicamente, se trata de montar nuestro propio iframe sabiendo cual es el formato de los enlacess embed de Vimeo y de Youtube, los cuales podemos ver facilmente en los iframes para insertar un video que nos proporcionan dichas webs.
En el caso del audio, tambien se usa un código Flash que carga el reproductor instalado por defecto en nuestro navegador. El más utilizado suele ser Windows media player, debido a al gran expansión de los sistemas operativos Windows.
Etiquetas audio y video de HTML 5
En HTML 5 tenemos la posibilidad de reproducir audio y video diréctamente mediante el uso de las etiquetas audio y video.
La etiqueta Audio
Nos permite insertar un chero de audio con un reproductor en nuestra web, que nos permitira escucharlo sin necesidad de tener instalado ningún programa adicional para dicho fin.
A continuación se expone una breve descripción de algunos de los atributos disponibles para esta etiqueta. src. Indica la ruta del archivo a reproducir. autoplay. Permite que la reproducción comience de forma automática sin previo aviso. En ocasiones no se recomienda su uso para dejar que el usuario decida cuando reproducir audio cuando lo desee. autobuffer. Nos permite cargar de forma automática el archivo para que sea más rápida su reproducción a posteriori y reducir aí tiempos de espera para el usuario. width y height. Denen respectivamente la anchura y la altura que deberaá tener la etiqueta de audio. loop. Ejecuta la reproducción en bucle de forma que al nalizar vuelve a empezar.
controls. Muestra los controles de reproducción. type. Dene el tipo de archivo a reproducir y su extensión (video, audio...)/(mp3, ogg...). La etiqueta Video En el caso de la etiqueta de video, atributos son muy similares a los de la etiqueta audio
controls. Muestra los controles de reproducción. type. Dene el tipo de archivo a reproducir y su extensión (video, audio...)/(mp3, ogg...). La etiqueta Video En el caso de la etiqueta de video, atributos son muy similares a los de la etiqueta audio
![HTML 5. Inserción de video o audio en la web [IMAGINANET]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLVwD6JDerArEJS2BgoOm-p9rdtzVGu5IVRciM35Hb6ox28o3E3KFNIUWIAsDbv0Atl8LWbuDEUwHK9F68fwww3riOnp7WmXmUd-DOjqryo7i3KOrZ7vsFVZ-QkwOyFKlZR0A7rcG4Oq8/s72-c/lenguaje-html-300x169.jpg "HTML 5. Inserción de video o audio en la web [IMAGINANET]")
0 comentarios: