Cómo incrustar archivos multimedia en una página web

Muchas de las técnicas para la incorporación de archivos de audio y vídeo en una página web han surgido desde los primeros días de la Internet, incluyendo reproductores Adobe Flash, que utiliza YouTube, los applets de Java y el clásico "embed" tag en HTML. Por desgracia, cada uno de estos métodos es problemática en la práctica debido a la aplicación inconsistente entre los navegadores Web y / o el requisito de software de terceros. El estándar HTML5 se muestra prometedor como el estándar Web más fiable y compatible en el futuro, y especifica el soporte nativo completo para medios incorporados.

Instrucciones

Audio

1

Inserte el siguiente código en el cuerpo del documento HTML para incrustar un archivo de audio:

<Controles de audio> </ audio>

2

Escriba la ruta y el nombre de su archivo de audio en lugar de "filename.mp3" en el atributo "src".

3

Añadir el atributo "precarga" con el valor "auto" para comenzar a cargar el archivo cuando se carga la página, incluso si el usuario no ha jugado todavía. Por ejemplo:

<Precarga de audio = "auto" controla> </ audio>

4

Quite el atributo "src" de la etiqueta "audio", a continuación, añadir dos o más etiquetas "fuente" entre las etiquetas de "audio" para permitir que el navegador para elegir entre diferentes formatos de audio disponibles para jugar. Con el siguiente código, el navegador seleccionará entre un archivo de audio OGG y un MP3:

<controles de audio>

<Source type = "audio / ogg" />

<Source type = "audio / mpeg" />

</ Audio>

Vídeo

5

Inserte el siguiente código en el cuerpo del documento HTML para incrustar un archivo de vídeo:

<Controles de video> </ video>

6

Escriba la ruta y el nombre de su archivo de vídeo en lugar de "filename.mp4" en el atributo "src".

7

Especifique la anchura y la altura de su vídeo en píxeles usando el "ancho" y "altura" atributos. Por ejemplo:

<Ancho video = "500" height = "300" controla> </ video>

8

Añadir el atributo "precarga" con el valor "auto" para comenzar a cargar el vídeo cuando se carga la página, incluso si el usuario no ha jugado todavía. Por ejemplo:

<Precarga video = "auto" controla> </ video>

9

Quite el atributo "src" de la etiqueta "video", a continuación, añadir dos o más etiquetas "fuente" entre las etiquetas "video" para permitir que el navegador para elegir entre los diferentes formatos de vídeo disponibles para jugar. Con el siguiente código, el navegador seleccionará entre un vídeo OGG y un vídeo MP4:

<controles de video>

<Source type = "video / ogg" />

<Source type = "video / mp4" />

</ Video>

Si ha especificado una anchura y altura para el video, deje esos atributos en la etiqueta "video".

Consejos y advertencias

  • Utilice las etiquetas de "fuente" para apuntar plataformas específicas que se pueden esperar los usuarios a visitar su sitio web desde. Por ejemplo, la familia iPod de los dispositivos móviles son más compatibles con videos MP4.
  • Cualquier cosa colocada entre el "audio" o etiquetas de "video" (además de las etiquetas "fuente") aparecerá en su lugar si alguien visita su sitio web utilizando un navegador obsoleto que no soporta HTML5. Una forma de apoyar estos navegadores es insertar código de inserción pre-HTML5 (por ejemplo, una etiqueta de "objeto" para incrustar un reproductor Flash) entre las etiquetas, de modo que los navegadores antiguos usarán ese código en su lugar.