El atributo de controles HTML <video> se usa para mostrar controles de video en HTML5. Es el valor booleano. HTML5 usa más comúnmente ogg, mp4, ogm y ogv como formatos de video en la etiqueta de video porque el soporte del navegador para ellos es diferente.
Sintaxis
<video controls> <source> </video>
Desde arriba, el atributo de controles de sintaxis agrega controles de video como volumen, pausa y reproducción, y el elemento <fuente> le permite especificar archivos de video alternativos. El control de video debe incluir:
- Tocar
- Pausa
- Volumen
- Modo de pantalla completa
- Buscando
- Títulos/Subtítulos (si están disponibles)
- Pista (si está disponible)
Atributos: la etiqueta de video admite principalmente 5 atributos, como se menciona a continuación:
- reproducción automática : hace que el video comience a reproducirse automáticamente, sin esperar a que termine de descargarse todo el archivo de video.
- bucle: a través del bucle puede reproducir el video una y otra vez.
- silenciado: hace que el reproductor esté silenciado de forma predeterminada.
- precarga: Esto se puede establecer en el siguiente valor.
- auto : Esto implica si el video debe cargarse tan pronto como se cargue la página.
- metadatos: Esto implica si solo se deben cargar los metadatos del video.
- ninguno: Esto implica que el navegador no debe cargar el video cuando se carga la página.
- src: Esto define la URL del video que debe ser reproducido por la etiqueta de video.
Nota: Siempre especifique el ancho y la altura del video, de lo contrario, la página web se confundirá con la cantidad de espacio que requerirá el video debido a que la página web se ralentiza.
Ejemplo 1: uso del atributo src en el código siguiente.
HTML
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>HTML video controls Attribute</h3> <video width="400" height="200" controls> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg" type="video/ogg"> </video> </center> </body> </html>
Producción:
Ejemplo 2: Uso del atributo de reproducción automática para reproducir video automáticamente.
HTML
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>HTML video controls Attribute</h3> <video width="400" height="200" autoplay controls> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg" type="video/ogg"> </video> </center> </body> </html>
Producción:
Ejemplo 3: el atributo de póster se usa para mostrar la imagen mientras se descarga el video o cuando el usuario hace clic en el botón de reproducción.
HTML
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>HTML video poster Attribute</h3> <video width="400" height="200" controls poster= "https://media.geeksforgeeks.org/wp-content/uploads/20190627130930/a218.png"> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg" type="video/ogg"> </video> </center> </body> </html>
Producción:
Navegadores compatibles: los navegadores compatibles con la etiqueta de video HTML se enumeran a continuación:
- Google Chrome 4.0
- Firefox 4.0
- Apple Safari 4.0
- Ópera 10.5
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA