Incorporare contenuto esterno e multimediale in una pagina web



files multimediali nel browser:

i formati "nativi": sono i formati in grado di essere visualizzati da tutti i browser senza problemi

  • testi (txt e html)
  • immagini (bmp) jpg gif png

tag <img>
lo storico tag per introdurre le immagini nei formati suddetti

due tipi di soluzione per i files diversi

1) il browser "chiama" un software installato sul client per eseguire il files

2)il browser ha installato un programma "terzo" (plug-in) in grado di visualizzare il file


Plug-in


Usare un Plug-In

Un plug-in è un programma installato sul client e legato ad uno o più browser per visualizzare un file di un tipo non nativamente eseguibile/visualizzabile direttamente.

I plug-in multimediali possono essere lanciati con i tag <embed> e/o <object>

il vantaggio di usare un plug-in è quello di poter consentire all'utente di utilizzare i controlli del programma installato sul client.

Ovviamente la riproduzione del flusso multimediale non avverrà se l'utente non ha installato l'apposito client. Inoltre i plug-in possono essere diversi in relazione ai browser.

Usare il tag <embed>

The purpose of the <embed> tag is to embed multimedia elements in web page.

The following code fragment displays an AVI file embedded in a web page:

<embed src="video.avi" type="video/x-msvideo" />



Vedi elenco mediatype http://en.wikipedia.org/wiki/Internet_media_type


tip: quali plugins sono installati sul tuo browser ?

IE : Strumenti → gestione → componenti aggiuntivi

FF / Opera / Chrome / Savari: nella barra degli indirizzi about:plugins

i più comuni
  • Acrobat Reader plug-in
  • flash player / shockwave plug-in
  • Java (Java virtual machine)




I tag HTML4 e xhtml



embed / object

embed

attributi
src = "..." il file linkato

loop ="true/false"

Con l'attributo loop si stabilisce se il brano deve essere ripetuto all'infinito (true) o una sola volta (false).

autostart = "true/false"

Con l'attributo autostart si stabilisce se il brano deve avviarsi da solo: automaticamente (true), oppure no (false).
<embed src="..." autostart="false">


hidden = "true/false"

Con l'attributo hidden si stabilisce se l'interfaccia grafica sia visibile (false), oppure nascosta (true).
<embed src="..." hidden="false">


width e height

Con questi attributi è possibile stabilire la porzione dell'interfaccia grafica da visualizzare. Questa varia a seconda del browser adoperato, per IE la mancanza di valori farà si che sia visualizzata per intero. A volte è più comodo avere solo i pulsanti.
<embed src="..." width="145" height="35">

esempio
<embed src="/media/video.avi" loop="true" autostart ="true" width="320" height="200" />

Using The <object> Tag

The purpose of the <object> tag is to embed multimedia elements in web page.

The following code fragment displays an AVI file embedded in a web page:

Example

<object data="video.avi" type="video/avi" />




flash









video:


http://flowplayer.org/



audio

http://www.flashmp3player.org/
http://musicplayer.sourceforge.net/


http://www.boutell.com/xspf/

soundcloud

auditii - concurs mozart by educatieprinarta



HTML 5


http://videojs.com/


http://diveintohtml5.org/video.html