Skip to content

Latest commit

 

History

History
81 lines (59 loc) · 1.86 KB

README.md

File metadata and controls

81 lines (59 loc) · 1.86 KB

Reto 02 - Agregando controles de reproducción al video

Objetivos

  • Configurar el elemento de video para que muestre controles de reproducción.
  • Agregar una imagen para que el video muestre una pre-visualización del contenido.

Requisitos

  • Tener Git Bash si usas Windows.
  • Tener conocimientos básicos de HTML y CSS
  • Tener instalado Visual Studio Code

Instrucciones

Resulta que por defecto el navegador no agrega controles de reproducción al video, ¿puedes buscar cómo agregárselo?

TIP: Lo que buscas es un atributo de la etiqueta <video></video>.


Posible solución

Agrega el atributo controls a la etiqueta <video></video>.

<body>
  <!-- Contenido previo -->
  <!-- ... -->

  <!-- Contenedor de video -->
  <section>
    <video
      controls
      src="https://cdn.videvo.net/videvo_files/video/premium/video0036/small_watermarked/computer_code00_preview.mp4"
    ></video>
  </section>
</body>


Bien, nuestro videos ya cuenta con controles de reproducción. Sin embargo, sería genial poder definir la imagen que queremos que se vea antes de que se reproduzca el video. ¿Nos ayudas a agregar esta funcionalidad?

TIP: Esta funcionalidad también se logra a través de un atributo de la etiqueta <video></video>.

Posible solución

Agrega el atributo poster a la etiqueta <video></video>, asignándole el link de la imagen de portada como valor.

<section>
  <section>
    <video
      controls
      poster="https://cdn.videvo.net/videvo_files/video/premium/video0036/thumbnails/computer_code00_small.jpg"
      src="https://cdn.videvo.net/videvo_files/video/premium/video0036/small_watermarked/computer_code00_preview.mp4"
    ></video>
  </section>
</section>

Siguiente