El atributo de controles HTML se utiliza para especificar que se deben mostrar los controles de audio y video. Es un atributo booleano y también nuevo en HTML5. Podemos usar este atributo en dos etiquetas <audio> y <video>
El atributo de controles incluye las siguientes propiedades en la etiqueta <audio>:
- Tocar
- Pausa
- Buscando
- Volumen
El atributo de controles incluye las siguientes propiedades en la etiqueta <video>:
- Tocar
- Pausa
- Buscando
- Volumen
- Alternar pantalla completa (solo para video)
- Títulos/Subtítulos (solo para video, cuando estén disponibles)
- Pista (solo para video, cuando esté disponible)
Sintaxis:
<element controls>
El siguiente ejemplo ilustra el uso del atributo de controles en el elemento <audio>.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> HTML Audio controls Attribute </title> </head> <body style="text-align: center"> <h1 style="color: green"> GeeksforGeeks </h1> <h2 style="font-family: Impact"> HTML Audio controls Attribute </h2> <br> <audio id="Test_Audio" controls autoplay> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.ogg" type="audio/ogg"> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.mp3" type="audio/mpeg"> </audio> </body> </html>
Producción:
El siguiente ejemplo ilustra el uso del atributo de controles en el elemento <video>.
Ejemplo:
<!DOCTYPE html> <html> <head> <title>HTML video controls Attribute</title> </head> <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:
Navegadores compatibles: los navegadores compatibles con los atributos de controles HTML se enumeran a continuación:
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.5
- Safari 4.0
- Ópera 10.5
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA