¿Cómo mostrar controles de video en HTML5?

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:

  1. 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.
  2. bucle: a través del bucle puede reproducir el video una y otra vez.
  3. silenciado: hace que el reproductor esté silenciado de forma predeterminada.
  4. 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.
  5. 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

Deja una respuesta

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