La tarea es establecer varios recursos de medios para el elemento de medios. Podemos usar varias etiquetas de origen en la etiqueta de medios.
Sintaxis:
<media_element> <source src="geeksforgeekslogo.resourse_extension"> <-- Example 1 --> <source src="hpnotebook.jpg"> <-- Example 2 --> <source src="earth_from_moon.mp4"> </media_element>
En la sintaxis anterior, los elementos multimedia pueden incluir imágenes, videos y audio. Úselo según sus necesidades.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>The picture element</h1> <p>Resize the browser window to change different images.</p> <picture> <source media="(min-width:650px)" srcset= "https://media.geeksforgeeks.org/wp-content/uploads/20210324012752/GfG14-300x83.png"> <source media="(min-width:465px)" srcset= "https://media.geeksforgeeks.org/wp-content/uploads/20210324012751/GfG13.png"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210324013154/GfG16-300x300.jpg" alt="Geeks for Geeks" style="width:auto;"> </picture> </body> </html>
Salida: en el caso de imágenes dentro de la etiqueta <picture>, podemos usar la etiqueta <source> seguida de 2 atributos: ‘media’ y ‘srcset’. Donde el atributo de medios se usa para verificar la resolución de la ventana del navegador y srcset se usa para configurar la imagen.
Ejemplo 2: en el caso del audio, use la etiqueta <audio> y dentro de ella configure varias etiquetas <source> para agregar múltiples recursos de audio.
HTML
<!DOCTYPE html> <html> <head> <title>Multiple Audio Resources</title> </head> <body> <div> <h2>Set up multiple media resources for audios:</h2> <div> <audio controls> <source src="GFG.mp3"> <source src="GFG.wav"> Sorry!! Your browser doesn't support the <code>audio</code> element. </audio> </div> </div> </body> </html>
Salida: aquí configuramos múltiples recursos como puede ver en el código base, pero el navegador ya está actualizado y está reproduciendo el primer ejemplo de audio. En caso de que el navegador no lo admita, saltará al siguiente recurso e intentará jugar.
Ejemplo 3: en el caso de los videos, use la etiqueta <video> y dentro de ella configure varias etiquetas <source> para agregar múltiples recursos de video.
HTML
<!DOCTYPE html> <html> <body> <p>Adding Video on my webpage</p> <p> <video width="400" height="350" autoplay> <source src="myvid.mp4" type="video/mp4" /> <source src="myvid.ogg" type="video/ogg" /> </video> </p> </body> </html>
Producción :
Publicación traducida automáticamente
Artículo escrito por anirbanchand54 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA