HTML | Atributo de controles

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *