👨‍💻
Coding Library
  • 👨‍💻Coding Library
  • 👾Linux
    • Basic Commands
    • Other commands
      • Ls
      • Mv
      • Chmod
      • Ln
      • Cat
      • Wc
      • Grep
      • Sed
      • Find
    • Sistema de ficheros
      • Inodos
  • 📦Git
    • Page 3
  • 🖊️Vim
    • Vim Basics
      • Gramatica de Vim
      • Moviendote por un archivo
    • Todo y mas
  • 🏛️C
    • Estructuras de datos
      • Listas Enlazadas
      • Colas
      • Pilas
      • Arboles
    • Valgrind
    • Operadores de bits
    • Procesos e Hilos
      • Fork
      • Wait
      • Waitpid
      • Semáforos
      • Estructura sigaction
      • Signals
    • MiniLibX
      • Ventanas (windows)
      • Imprimir Pixels
      • Imagenes
      • Colores
      • Eventos
      • Loops (bucles)
      • Leer imagenes
    • Readline
    • Funciones
      • opendir
      • access
    • Network Programming
      • Structs
      • Llamadas al sistema
      • Synchronous I/O Multiplexing
        • kqueue
  • 🌃C++
    • Clases
      • Herencia
      • Shallow and deeps copies
      • Clases abstractas y Interfaces
      • Reasignar operadores
    • Punteros y referencias
    • Manejo de ficheros
    • Punteros a funciones
    • Excepciones
    • Casting
    • Templates
    • Templated Containers
      • Iterators
      • std::vector
      • std::list
      • std::map
  • 🧠Pyhton
    • Sintaxis basica
    • Scripts
    • Tipos de datos
      • Listas
      • Set
      • Diccionarios
      • Generadores
    • Estructuras de control
      • Iterar con For
      • Iterar con zip
      • Iterar con enumerate
    • Map, Filter and Reduce
    • Funciones
    • Clases
      • Metodos
      • Herencia
    • Formateo con {} y format()
    • Decoradores
  • 📦JAVA
    • Conceptos basicos
    • Programacion estructurada
    • Clases predefinidas
    • POO
      • Clases
      • Herencia
      • Polimorfismo
      • Abstraccion
      • Encapsulacion
    • ArrayList
    • Excepciones
  • ⚒️HTML
    • HTML Basics
    • Elementos de bloque
      • Titulos y parrafos
      • Header, Main y Footer
      • Section, article y aside
    • Elementos en línea
    • Atributos
    • Enlaces <a>
    • Listas
    • Tablas
    • Formularios
      • Input
      • Select y datalist
      • GET y POST
    • Contenido embebido
      • Imagenes
      • Audio y video
      • Iframe
  • 🎨CSS
    • Introduccion
    • Selectores
    • Como funciona CSS
    • Box Model
    • Desbordamiento y Colapso de margenes
    • Display
    • Position
    • Medidas absolutas y relativas
  • 🟡JavaScript
    • Promesas
    • Async/Await
  • 📲Svelte
    • Componentes
    • Reactividad
    • Directivas
    • Eventos
  • 🖥️Sistemas
    • Particiones
  • 🕸️Redes
    • IP Adress
    • Subnet Mask
  • 🕷️Web Scrapping
    • Scrapy
      • Spiders
        • CrawlerSpider
      • Process data
      • Save data
        • CSV y JSON
        • SQLite
    • Splash
    • Selenium
Powered by GitBook
On this page
  • Audio
  • Video
  • Atributos
  • Bibliografia
  1. HTML
  2. Contenido embebido

Audio y video

Audio

Al igual que vimos en el tema anterior con los videos, es posible añadir archivos de audio a nuestras páginas web para colocar música, sonidos o simplemente usar música como ambientación.

En este caso, utilizaremos la etiqueta <audio> que funciona exactamente igual que <video>, pero con relación a archivos de audio.

Un primer ejemplo muy básico para colocar un audio en nuestra página web:

<audio src="audio.mp3" cotrols></audio>

Video

En HTML5 se introduce la interesante posibilidad de mostrar videos directamente desde nuestro navegador. De hecho, si arrastramos un video a la ventana del navegador, veremos que comienza a reproducirse en él. Para poder insertar videos en nuestras páginas HTML tenemos que utilizar la etiqueta <video>.

Un primer ejemplo muy básico para colocar un video en nuestra página web:

<video src="video.mp4" width="640" height="480" controls></video>

En el caso de queramos estabelcer una imagen como fondo por defecto antes de que se inicialice el video puedes utilizar el atributo poster y especificar la direccion de la imagen

Atributos

La etiqueta <audio> tiene varios atributos a nuestra disposición:

  • src: Audio o video a reproducir. Obligatoria si actua como etiqueta contenedora. Aqqui introduciremos al URL de nuestro audio.

  • autoplay: Comienza a reproducirse automáticamente. Los navegadores suelen deshabilitarlo

  • loop: Vuelve a iniciarse cuando finaliza su reporduccion (bucle)

  • muted: Establece el audio o video sin sonido

  • controls: Si está presente este atributo, el navegador ofrecerá controles para permitir que el usuario controle la reproducción de audio y video, incluyendo volumen, búsqueda y pausar/reanudar reproducción.

El atributo controls es necesario para que visualice le elemento de audio en pantalla o para poder iniciar los videos

Bibliografia

PreviousImagenesNextIframe

Last updated 2 years ago

⚒️
https://lenguajehtml.com/html/multimedia/etiquetas-html-de-video/
https://lenguajehtml.com/html/multimedia/etiquetas-html-de-audio/