¿Cómo definir la URL del archivo de video en HTML5?

En este artículo, aprenderemos cómo definir la URL de un video en HTML. La etiqueta <video> se usa para incrustar archivos de video en una página web. Esto muestra un reproductor de video junto con los controles del reproductor según el navegador. La fuente del video puede ser única o se puede hacer para admitir múltiples formatos de video para que múltiples navegadores admitan la reproducción de video.

Enfoque: la etiqueta <video> tiene un atributo src que se usa para especificar la ruta desde donde se cargaría el archivo de video. Cuando se deben especificar varias fuentes, el atributo src también se puede usar con cada una de las etiquetas <source> para definir la ruta de ese archivo de video fuente. Usaremos este atributo para definir la URL del archivo de video.

Sintaxis:

<video src="path_to_video.mp4"></video>

O

<video>
  <source src="path_to_video.mp4" type="video/mp4">
  <source src="path_to_video.ogg" type="video/ogg">
</video>

Ejemplo 1: en este ejemplo, el atributo se usa con la etiqueta <video> . Ilustra el atributo src para definir la URL de los archivos de video.

HTML

<html>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <h3>
    How to define the URL of 
    the video file in HTML5?
  </h3>
    
  <!-- Specify the source of
  the video file -->
  <video src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210314115545/sample-video.mp4"
        width="480" height="360" controls>
    The browser does not support videos.
  </video>
</body>
</html>

Producción:

Ejemplo 2: en este ejemplo, el atributo se usa con la etiqueta <source> para definir varias fuentes de video.

HTML

<html>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <h3>
    How to define the URL of the
    video file in HTML5?
  </h3>
  <video width="480" height="360" controls>
      
    <!-- Specify the source of
    the video file -->
    <source src="sample-video.mp4"
            type="video/mp4">
    <source src="sample-video.ogg" 
            type="video/ogg">
    The browser does not support videos.
  </video>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por sayantanm19 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 *