Atributo controls de HTML
El atributo controls de HTML es un atributo booleano que especifica que los controles de audio/vídeo deben mostrarse. Es nuevo en HTML5.
Puedes usar el atributo controls en los siguientes elementos: <audio> y <video>.
Para la etiqueta <audio>, el atributo controls suele proporcionar:
- Reproducción
- Pausa
- Búsqueda
- Volumen
Para la etiqueta <video>, el atributo controls suele proporcionar:
- Reproducción
- Pausa
- Búsqueda
- Volumen
- Alternar pantalla completa
- Subtítulos
- Pista
Nota: Los controles exactos que se muestran dependen de la implementación del navegador y del soporte de formatos multimedia.
Sintaxis
Sintaxis del atributo controls de HTML
<audio controls></audio>Ejemplo del atributo controls de HTML utilizado en el elemento <audio>:
Ejemplo del atributo "controls " de HTML utilizado en el elemento <audio>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="https://es.w3docs.com/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Ejemplo del atributo controls de HTML utilizado en el elemento <video>:
Ejemplo del atributo "controls " de HTML utilizado en el elemento <video>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
<source src="https://es.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
</video>
<p>Some information about video</p>
</body>
</html>Nota: Al usar autoplay junto con controls, se recomienda incluir también el atributo muted para cumplir con las políticas de reproducción automática de los navegadores modernos.
Practice
¿Para qué se utiliza el atributo 'controls' de HTML?