Diferentes formas de agregar medios en la página HTML

En estos días, una de las cosas más importantes en la web son los medios . Entonces, todos los desarrolladores y propietarios de sitios web quieren que sus sitios web sean atractivos e interactivos. Porque necesitan incluir medios en sus sitios. Hay muchos tipos de medios, audio, video, etc. Hay diferentes formas de incluir esos medios en los sitios web. Cada tipo de medio requería una forma específica. Todas las formas posibles se mencionan y describen a continuación una por una.

Diferentes formas de agregar medios a la página HTML:

Ejemplo 1: El siguiente ejemplo ilustra la adición de tipo de medios de audio en la página HTML. El desarrollador puede usar su propio archivo src para la implementación.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <p>Audio Sample</p>
  
    <!-- Audio tag starts here -->
    <audio controls>
        <source src="test.mp3" type="audio/mp3">
        <source src="test.ogg" type="audio/ogg">
    </audio>
    <!-- Audio tag ends here -->
      
</body>
  
</html>

Producción: 

Uso de la etiqueta de audio HTML

Uso de la etiqueta de audio HTML

Ejemplo 2: El siguiente ejemplo ilustra cómo agregar un tipo de medio de video a la página HTML.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <h3>HTML video tag</h3>
  
        <p>Adding video on the webpage
  
        <p>
            <video width="450" height="250" 
                controls preload="auto">
                <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:

Uso de la etiqueta de vídeo HTML

Publicación traducida automáticamente

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