3D e 3E SIA: Come utilizzare le immagini, i file audio e video in una pagina Html 5

IMMAGINI NELLE PAGINE HTML 5

Ci sono diversi tipi di formati per le immagini e quelli principali sono:

GIF: formato adatto per i loghi, bottoni, banner, e possono essere anche immagini animate;

JPG: formato ad alta risoluzione e quindi adatto per le foto;

PNG: utilizzato molto nei software di grafica e molto portabile su tutte le piattaforme.

ATTENZIONE: vi consiglio di non utilizzare immagini troppo pesanti in quanto potrebbero rallentare il caricamento della pagina web.

Il Tag <img> e l’attributo src

Per poter inserire le immagini in una pagina web si deve far uso del tag <img>. Tale tag viene definito “vuoto”, dato che non prevede l’omonimo tag di chiusura.

L’attributo principale da utilizzare è src che definisce la URL dell’immagine che si vuole incorporare nella pagina.

Diversamente, se volessimo inserire l’immagine che è reperibile direttamente dal nostro pc avremmo la seguente dicitura.

L’attributo alt

L’attributo alt è molto importante in quanto definisce un testo alternativo che verrà visualizzato ogni qualvolta che l’immagine (per qualsiasi ragione) non verrà visualizzata (perché rimossa o magari non disponibile per un problema di connessione).

Altri attributi del tag <img>

Vediamo ora insieme altri possibili attributi del tag <img>.

border imposta la dimensione (in pixel) dell’eventuale bordo all’immagine (0 = nessun bordo)

width imposta la larghezza in pixel dell’immagine (facoltativo);

height imposta l’altezza in pixel dell’immagine (facoltativo);

hspace imposta la distanza in orizzontale tra l’immagine ed altri elementi;

vspace imposta la distanza in verticale tra l’immagine ed altri elementi;

align imposta un’allineamento dell’immagine;

ESEMPIO COMPLETO:

<img src="immagine.jpg" alt="descrizione della foto" with="150 height="93">

AUDIO E VIDEO NELLE PAGINE HTML 5

HTML5 introduce un supporto integrato per i media attraverso gli elementi <audio> e <video>, offrendo la capacità di integrare facilmente media in documenti HTML
Incorporare i media

Integrare i media nel documento HTML è banale:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Your browser does not support the <code>video</code> element.
</video>

Questo esempio riproduce un video d'esempio, con controlli di riproduzione, dal sito web Theora.

Ecco un esempio per incorporare audio nel tuo documento HTML

<audio src="/test/audio.ogg">
<p>Your browser does not support the audio element.</p>
</audio>

L'attributo src può essere una URL del file audio o il percorso al file sul sistema locale.

audio src="audio.ogg" controls autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>

Questo esempio di codice utilizza gli attributi dell'elemento <audio>:

controls : Visualizza di controlli standard di HTML5 per l'audio su pagina web.
autoplay : Rende automatica la riproduzione dell'audio.
loop : Rende automatica la ripetizione (ciclo) dell'audio.

<audio src="audio.mp3" preload="auto" controls></audio>

L'attributo preload è utilizzato nell'elemento audio per bufferizzare file di grandi dimensioni:
"none" non bufferizza il file
"auto" bufferizza il media
"metadata" bufferizza solo i metadati del file

Possono essere specificati più file sorgenti utilizzando l'elemento <source> al fine di fornire codifiche audio e video differenti per differenti browser. Per esempio:

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

In tal modo è riprodotto il file Ogg nei browser che supportano lo supportano. Se non supportato, il browser utilizza il file MPEG-4. Vedi anche la lista dei formati supportati dagli elementi audio e video nei differenti browser.

E' anche possibile specificare quali codec sono necessari ai media; ciò permette al browser di prendere decisioni più intelligenti:

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  Your browser does not support the <code>video</code> element.
</video>

Nell'esempio è specificato che il video utilizza i codec Dirac e Speex. Se il browser supporta Ogg, ma non i codec specificati, il video non sarà caricato.

SE l'attributo type non è specificato, il tipo del media è recuperato dal server e controllato per verificare che il browser possa gestirlo; se non può essere riprodotto, è controllata la sorgente successiva. Se nessuno degli elementi sorgente specificati può essere utilizzato, un evento di errore è inviato all'elemento video. Se è specificato l'attributo type, questi è confrontato con i tipi riproducibili dal browser e se non riconosciuto, il server non viene interrogato; invece, la sorgente successiva è immediatamente controllata.

Vedere eventi dei media per un elenco completo degli eventi associati con la riproduzione dei media. Per dettagli sui formati dei media supportati dai differenti browser, vedere formati dei media supportati degli elementi audio e video.

Controllare la riproduzione dei media

Una volta incorporato il media nel documento HTML utilizzando i nuovi elementi, è possibile controllarli tramite codice JavaScript. Per esempio, per avviare (o riavviare) la riproduzione, puoi fare:

var v = document.getElementsByTagName("video")[0];
v.play();

La prima linea ottiene il primo elemento video nel documenti, e il secondo chiama il metodo play() dell'elemento, come definitto nell'interfaccia nsIDOMHTMLMediaElement che è utilizzata per implementare gli elementi dei media.

Controllare un riproduttore audio in HTML5 per riprodurre, porre in pausa, aumentare e diminuire il volume utilizzando Javascript è semplice.

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>

Fermare il download del media

Se fermare la riproduzione del media è tanto semplice quanto chiamare il metodo pause() dell'elemento, il browser continua a scaricare il media finché l'elemento non è elimitao tramite il garbage collector.

Segue un trucco per fermare immediatamente il download:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src = "";

Impostando l'attributo src dell'elemento del media a una stringa vuota, è distrutto il decoder interno dell'elemento, che ferma il download della rete.
Cercare attraverso i media

Gli elementi per i media forniscono il supporto per spostare la posizione corrente di riproduzione ad un punto specificato nel contenuto del media. Ciò è fatto impostando il valore della proprietà currentTime dell'elemento; vedere HTMLMediaElement per ulteriori dettagli sulle proprietà dell'elemento. Settare semplicemente il valore del tempo, in secondi, al punto in cui si desidera far continuare la riproduzione.

E' possibile utilizzare la proprietà seekable per determinare l'intervallo dei media che è attualmente disponibile per la ricerca. Questi ritorna un oggetto TimeRanges che elenca gli intervalli di tempo in cui cercare.

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // Returns the starting time (in seconds)
mediaElement.seekable.end();    // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end();      // Returns the number of seconds the browser has played

fonte per la parte audio e video :
https://developer.mozilla.org/it/docs/Web/HTML/Using_HTML5_audio_and_video

Link per trasformare i file video e audio on line: https://savemp3.cc/youtube/WOOTF1Sy4jw

Cerca nel blog

Il BLOG di Paolo Latella