HTML MULTIMEDIA

html5Nell’introduzione del post “HTML MULTIMEDIA” partiamo dicendo che i contenuti multimediali sono disponibili in molti formati diversi. Può essere quasi tutto ciò che puoi sentire o vedere, come immagini, musica, suoni, video, dischi, film, animazioni e altro ancora. Le pagine web contengono spesso elementi multimediali di diverso tipo e formato. Gli elementi multimediali (come audio o video) sono archiviati nei file multimediali. Il modo più comune per scoprire il tipo di un file è guardarne l’estensione. I file hanno formati ed estensioni diverse come: .wav, .mp3, .mp4, .mpg, .wmv e .avi.

Formati audio e video

VIDEO

Ci sono molti formati video. I formati MP4, WebM e Ogg sono supportati da HTML. Il formato MP4 è consigliato da YouTube. Per mostrare un video in HTML, usa l’elemento <video>. L’attributo controls aggiunge i controlli video, come riproduzione, pausa e volume. È una buona norma includere sempre gli attributi di larghezza e altezza. Se l’altezza e la larghezza non fossero impostate, la pagina potrebbe sfarfallare durante il caricamento del video. L’elemento <source> consente di specificare file video alternativi tra cui il browser può scegliere, esso utilizzerà il primo formato riconosciuto. Il testo tra i tag <video> e </video> verrà visualizzato solo nei browser che non supportano l’elemento <video>.

  • Per avviare automaticamente un video, utilizza l’attributo autoplay
  • Per disattivare l’audio aggiungi l’attributo muted.

HTML VIDEO FORMATS

Browser compatibility

RIPRODUZIONE DI VIDEO YOUTUBE

Per riprodurre un video su una pagina web, procedi come segue:

  • Prendi nota dell’id video
  • Definisci un elemento <iframe> nella tua pagina web
  • Lascia che l’attributo src punti all’URL del video
  • Usa gli attributi di larghezza e altezza per specificare la dimensione del player

YOUTUBE AUTOPLAY + MUTE

  • Puoi consentire la riproduzione automatica quando un utente visita la pagina, aggiungendo autoplay=1 all’URL di YouTube.
  • Aggiungi mute=1 dopo autoplay=1 per consentire la riproduzione automatica del video (con audio disattivato).

YOUTUBE PLAYLIST

  • Un elenco separato da virgole di video da riprodurre (oltre all’URL originale).

LOOP

  • Valore 0 (predefinito) il video verrà riprodotto solo una volta
  • Valore 1 il video verrà riprodotto in loop.

CONTROLS

Aggiungi controls=0 per non visualizzare i controlli nel lettore video.

  • Valore 0 i controlli del lettore non vengono visualizzati
  • Valore 1 (predefinito) vengono visualizzati i controlli del lettore.

AUDIO

Per riprodurre un file audio in HTML, usa l’elemento <audio>. L’attributo control aggiunge controlli audio, come riproduzione, pausa e volume. L’elemento <source> consente di specificare file audio alternativi tra cui il browser può scegliere, esso utilizzerà il primo formato riconosciuto. Il testo tra i tag <audio> e </audio> verrà visualizzato solo nei browser che non supportano l’elemento <audio>. Esistono tre formati audio supportati: MP3, WAV e OGG. Il supporto del browser per i diversi formati è:

Browser compatibility audio

IFRAME

Nel post “Multimedia in HTML” abbiamo introdotto i video YouTube. Nel video YouTube tutto il contenuto si trova all’interno di un tag <iframe> vediamo di spiegarne il significato. Il tag HTML <iframe> specifica un frame inline. Un frame inline viene utilizzato per incorporare un altro documento all’interno del documento HTML corrente.

  • Il tag HTML <iframe> specifica un frame inline
  • L’attributo src definisce l’URL della risorsa da incorporare
  • Gli attributi di altezza e larghezza specificano la dimensione dell’iframe
  • Usa border: none; per rimuovere il bordo attorno all’iframe
Copy to Clipboard

LINK AI POST PRECEDENTI

PREVIOUS POST LINKS

LINK AL CODICE SU GITHUB

GITHUB