En este artículo, veremos cuáles son los diferentes formatos de video que admite el navegador, además de comprender su implementación.
Los navegadores admiten texto en diferentes colores con diferentes fuentes y además admiten varios medios que incluyen imágenes, música, videos, animaciones, etc. Existe un video en diferentes formatos, como MP4, MPEG, WebM, Ogg, AVI, QuickTime, etc. Pero HTML admite solo 3 tipos de formatos de video, que incluyen MP4, Ogg y WebM.
Exploraremos en detalle todos aquellos tipos de formatos de video que son compatibles con los navegadores.
<video> : El elemento <video> en HTML se usa para mostrar un video en una página web.
Sintaxis:
<video controls="controls">
<source src="filename"
type="type_of_file">
</video>
Valores de las propiedades:
- Ancho: Especifica el ancho de la pantalla de video.
- altura: Especifica la altura del video de visualización.
- controles: proporciona controles para un video como volumen, pausa, pantalla completa, etc.
- reproducción automática: Reproduce el video cargado automáticamente.
- silenciado: Por defecto, silencia el video. Entonces, para activar el sonido, use la opción de controles.
- src: Acepta videos de formatos como .mp4, .ogg, .WebM
- tipo: según el tipo de archivo especificado en src, debemos especificar el tipo de archivo. Los tipos admitidos son video/mp4, video/Ogg y video/WebM.
Formatos de vídeo compatibles:
- Formato de video MP4: El formato de video MP4 es desarrollado por el Grupo de expertos en imágenes en movimiento. El otro nombre para el formato de video MP4 es MPEG-4. Es compatible con todos los navegadores y se utiliza en cámaras de video y hardware de TV. Es muy recomendado por YouTube. La extensión para este formato de video es .mp4. Veamos la sintaxis para cargar el video .mp4 en una página web.
- Formato de video Ogg : El formato de video Ogg es desarrollado por la Fundación Xiph.Org. También se llama Theora Ogg y una extensión de este tipo de formato de video es .ogg. Veamos la sintaxis para cargar el video .ogg en una página web.
- Formato de video WebM : el formato de video WebM es desarrollado por diferentes navegadores: Opera, Mozilla y compañías líderes como Google y Adobe. La extensión de este tipo de formato de video es .webm. Veamos la sintaxis para cargar el video .webm en una página web.
Ejemplo 1: este ejemplo describe los diversos formatos de video compatibles con el navegador. Aquí, hemos utilizado el formato de video .mp4 con el elemento <video> que tiene una opción de control para reproducir y pausar el video.
HTML
<!DOCTYPE html> <html> <head> <title> Various video formats supported by the Browser </title> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>MP4 video in webpage</h3> <video width="500" height="200" controls> <source src="gfg.mp4" type="video/mp4"> </video> </center> </body> </html>
Producción:
Ejemplo 2: en el siguiente ejemplo, cargamos un archivo de video con formato .ogg que se reproducirá automáticamente y se silenciará, de manera predeterminada, en una página web usando el elemento <video>. Por lo tanto, el video en la página web no contendrá controles para reproducir/pausar y el audio como propiedad silenciada se establece en el elemento <video>.
HTML
<!DOCTYPE html> <html> <head> <title> Various video formats supported by the Browser </title> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>OGG video in webpage</h3> <video width="400" height="250" autoplay muted> <source src="gfg.ogg" type="video/ogg"> </video> </center> </body> </html>
Producción
Ejemplo 3: en este ejemplo, hemos insertado un video en una página web del tipo WebM y debe reproducirse en silencio, de forma predeterminada, pero el usuario puede desactivarlo si lo desea. Esto se puede lograr pasando controles y propiedades silenciadas al elemento <video>.
HTML
<!DOCTYPE html> <html> <head> <title> Various video formats supported by the Browser </title> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>WebM video in webpage</h3> <video width="200" height="180" controls muted> <source src="river_video.webm" type="video/webm"> </video> </center> </body> </html>
Producción
Publicación traducida automáticamente
Artículo escrito por rahulkl8471 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA