Para nosotros colocar un archivo de audio o video en nuestra paǵina se utiliza la instrucción <embed> cuyos parámetros son:
_src="nombre.extensión": se utiliza para indicar que archivo vamos a colocar el la web; el audio o video debe estar guardado en la misma ruta en la que se está guardando el documento web
_autostart="true/false":para indica si se desea iniciar automáticamente o manual
_loop="true/false":indica si se desea que la reproducción sea de forma repetitiva o solo una vez
_controls="smallconsole": visualiza una serie de controles
Ejemplo:
<embed src="pista1.mp3" autostart="true" loop="false">
también se puede editar su altura y anchura con height y width respectivamente
Ejemplo:
<embed src="pista1.mp3" autostart="true" loop="false" height="200px" width="500px" >
INSERCIÓN CON ETIQUETAS DE HTML5
En este caso html 5determina maneras de insertar multimedia que cuando sean reproducidos no necesiten de algun reproductor adicional, se debe tener en cuenta que para que funcione en algunos navegadores como I.E es necesario coloca al inicio de la página (antes de <html>) la etiqueta <!DOCTYPE html> y se debe tener en cuenta algunos codecs a usar
Insertando audio.Para insertar audio usamos la siguiente tag:
<audio
src="nombre.mp3" controls></audio>
pudiendo usar los siguientes atributos:
_autoplay = para hacer que inicie automáticamente, si no se quiere iniciar automáticamente pues no colocar
este tag, como en el ejemplo superior,de lo contrario quedaría algo así
<audio
src="nombre.mp3" autoplay="autoplay" controls></audio> o así<audio
src="nombre.mp3" autoplay controls></audio>
_loop = para reproducir de manera repetitiva
_controls = de esta forma podremos ver el reproductor con sus controles como pausa o volumen, también
suele colocarse controls="controls", aunque poniéndolo una sola vez funciona bien
_preload = esto hace que el archivo se cargue en segundo plano, en otras palabras, carga al archivo suele colocarse controls="controls", aunque poniéndolo una sola vez funciona bien
mientras el usuario realiza búsquedas en la página, así cuando le de play, el archivo estará
cargado para su reproducción sin interrupciones, se puede usar:
- none, desactiva el sistema de buffer
- auto, el navegador maneja el buffer del archivo
- metadata, carga la metadata solamente
Controles con Javascript
. En el siguiente ejemplo (tomado del libro HTML5 for WebDesigners) se muestra como añadir los controles básicos (Reproducir, Pausa, Aumentar Volumen, Disminuir Volumen) usando HTML y JavaScript.
<audio id="player" src="sound.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>
Ahora en el caso que se desee insertar varios archivo, de tal manera que nos aseguramos la reproducción en todos los navegadores, pues usamos SOURCE, con ello simplemente colocamos la ruta y tipo:
Incluso se le pued poner un pequeño mensaje dentro de la etiqueta para indicar al usuario la compatibilidad de su navegador
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Tu navegador no soporta html5
</audio>
Insertando Video
Consiste prácticamente en lo mismo que audio, sólo cambien audio por video
Ejemplo:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
A esta herramienta se le puede agregar además un atributo que nos permitirá colocar una imagen de muestra al video con POSTER
Ejemplo:
<video width="320" height="240" controls="controls" poster="imagen.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Incluso se le pued poner un pequeño mensaje dentro de la etiqueta para indicar al usuario la compatibilidad de su navegador
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Tu navegador no soporta html5
</audio>
Insertando Video
Consiste prácticamente en lo mismo que audio, sólo cambien audio por video
Ejemplo:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
A esta herramienta se le puede agregar además un atributo que nos permitirá colocar una imagen de muestra al video con POSTER
Ejemplo:
<video width="320" height="240" controls="controls" poster="imagen.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.