¿Cómo insertar un enlace de video dentro de un archivo de imagen?

Existen principalmente dos métodos para insertar un enlace de video en un archivo de imagen:

Método 1:

Vincular el archivo HTML que contiene el video con la imagen en un archivo HTML diferente.

Pasos:

Cree un archivo html y agregue el video.
Sintaxis:
```
<video src="video_url" controls></video>
```
Cree otro archivo HTML que tenga la imagen, en el que la imagen debe contener el enlace del archivo HTML anterior.
Sintaxis:
```
<a href="html_file_url">
            <img src="image_url">
</a>
```

Ejemplo: A continuación se muestra el archivo HTML que contiene el video.

video source.html

<!DOCTYPE html>
<html>
    <body bgcolor="black">
        <!--adding the video file-->
        <video width="50%" 
               height="50%"
               src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200513195558/Placement100-_-GeeksforGeeks-1.mp4" 
               controls>
      </video>
    </body>
</html>

A continuación se muestra el archivo principal que tiene la imagen en la que la imagen está vinculada con el archivo HTML anterior.

web.html

<!DOCTYPE html>
<html>
    <body bgcolor="black">
        <!--Adding the image file-->
        <!--also adding the link of video source.html to the image-->
        <a href=
"https://media.geeksforgeeks.org/wp-content/uploads/20200513195558/Placement100-_-GeeksforGeeks-1.mp4">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200717172614/authPreLogo.png" 
                 width="100" 
                 height="100" />
        </a>
    </body>
</html>

Producción:

Método 2:

Cree un solo archivo HTML que contenga tanto la imagen como el video. El video se abre al hacer clic en la imagen.

Pasos:

Cree un archivo HTML con la imagen.

Agregue un enlace para el video a esa imagen.
Sintaxis:

<video poster="image_url">
     <source src="video_url" type="video_type">
</video>

Ejemplo: A continuación se muestra el archivo html principal.

<!DOCTYPE html>
<!--web.html.html-->
<html>
   
   <body bgcolor="black">
      <p align='center'>  
            
        <!--Adding the video file along with the image-->
        <video controls 
               width="400" 
              height="200" 
              poster=
"https://media.geeksforgeeks.org/wp-content/uploads/20200717172614/authPreLogo.png">
            <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200513195558/Placement100-_-GeeksforGeeks-1.mp4"
                    type="video/mp4">
        </video>
         
      </p>
   </body>
   
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por riturajsaha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

video source.html

web.html

Deja una respuesta Cancelar la respuesta