HTML
Elementos de los medios
Buscar..
Parámetros
| Atributo | Detalles |
|---|---|
| anchura | Establece el ancho del elemento en píxeles. |
| altura | Establece la altura del elemento en píxeles. |
<source> | Define los recursos de los archivos de audio o video. |
| pista | Define la pista de texto para elementos multimedia. |
| controles | Controles de pantallas |
| auto-reproducción | Empieza a reproducir automáticamente los medios de comunicación. |
| lazo | Reproduce los medios en un ciclo repetido. |
| apagado | Reproduce los medios sin sonido. |
| póster | Asigna una imagen para mostrar hasta que se carga un video |
Observaciones
Soporte en los navegadores.
| Característica | Cromo | Firefox (Gecko) | explorador de Internet | Ópera | Safari |
|---|---|---|---|---|---|
| Soporte basico | 3.0 | 3.5 (1.9.1) | 9.0 | 10.50 | 3.1 |
<audio> : PCM en WAVE | (Sí) | 3.5 (1.9.1) | Sin soporte | 10.50 | 3.1 |
<audio> : Vorbis en WebM | (Sí) | 4.0 (2.0) | Sin soporte | 10.60 | 3.1 |
<audio> : Streaming Vorbis / Opus en WebM a través de MSE | ? | 36.0 | ? | ? | ? |
<audio> : Vorbis en Ogg | (Sí) | 3.5 (1.9.1) | Sin soporte | 10.50 | Sin soporte |
<audio> : MP3 | (Sí) | (Sí) | 9.0 | (Sí) | 3.1 |
<audio> : MP3 en MP4 | ? | ? | ? | ? | (Sí) |
<audio> : AAC en MP4 | (Sí) | (Sí) | 9.0 | (Sí) | 3.1 |
<audio> : Opus en Ogg | 27.0 | 15.0 (15.0) | ? | ? | ? |
<video> : VP8 y Vorbis en WebM | 6.0 | 4.0 (2.0) | 9.0 | 10.60 | 3.1 |
<video> : VP9 y Opus en WebM | 29.0 | 28.0 (28.0) | ? | (Sí) | ? |
<video> : Streaming WebM a través de MSE | ? | 42.0 (42.0) | ? | ? | ? |
<video> : Theora y Vorbis en Ogg | (Sí) | 3.5 (1.9.1) | Sin soporte | 10.50 | Sin soporte |
<video> : H.264 y MP3 en MP4 | (Sí) | (Sí) | 9.0 | (Sí) | (Sí) |
<video> : H.264 y AAC en MP4 | (Sí) | (Sí) | 9.0 | (Sí) | 3.1 |
| cualquier otro formato | Sin soporte | Sin soporte | Sin soporte | Sin soporte | 3.1 |
Utilizando `
Use el elemento HTML o <audio> para incrustar contenido de video / audio en un documento. El elemento de video / audio contiene una o más fuentes de video / audio. Para especificar una fuente, use el atributo src o el elemento <source> ; El navegador elegirá el más adecuado.
Ejemplo de etiqueta de audio:
<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>
<!-- Video with subtitles -->
<video src="foo.webm">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
<!-- Simple video example -->
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
Your browser doesn't support HTML5 video tag.
</video>
Ejemplo de etiqueta de audio:
<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
Audio
HTML5 proporciona un nuevo estándar para incrustar un archivo de audio en una página web.
Puede incrustar un archivo de audio en una página utilizando el elemento <audio> :
<audio controls>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Vídeo
También puede insertar un video en una página web utilizando el elemento <video> :
<video width="500" height="700" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Encabezado de video o fondo
Agregar un video que se reproducirá automáticamente en un bucle y no tiene controles ni sonido. Perfecto para un encabezado de video o fondo.
<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>
Este CSS proporciona un respaldo si el video no se puede cargar. Tenga en cuenta que se recomienda utilizar el primer fotograma del video como el video poster.jpg.
#videobg {
background: url(video.jpg) no-repeat;
background-size: cover;
}
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow
