Comments
Description
Transcript
Lezione12_Plugin
Multimedia e Plugin
Roberto Bruni e Daniela Giorgetti
Plugin
• PLUG-IN = Estensioni del browser per gestire (file
contenenti) dati particolari (es. audio, filmati, grafica 3D)
– introdotti la prima volta con NN3
• rendono modulare l’architettura del browser
– gli utenti possono scrivere il sw per gestire opportuni tipi di file e
collegarlo al browser per rendere la gestione trasparente all’utente
– esempi
• ShockWave e Flash (Macromedia) per animazioni e video
• Acrobat (Adobe) per testo formattato
• RealPlayer per audio e video
Bruni e Giorgetti
2
Plugin e browser
• NN e IE supportano molti plugin disponibili
gratuitamente (anche nelle configurazioni di base)
– di solito ci sono versioni diverse dello stesso plugin a
seconda del browser e della piattaforma dove risiede
• Per includere un file che usa i plugin in un
documento HTML si usa il tag <EMBED>
• La classificazione del tipo di file avviene con MIME
–
–
–
–
Multipurpose Internet Mail Extension
es. text/html, text/plain, image/gif
il tipo MIME viene sempre spedito dal server al browser
se il browser non supporta quel tipo chiede di salvare il
file
Bruni e Giorgetti
3
LiveConnect
• Come può JS interagire con i plugin?
– LiveConnect è uno “standard” Netscape che
permette l’interazione tra JS, Java e plugin
– i parametri dei plugin vengono visti come
oggetti
– questi oggetti diventano parte integrante del
DOM
– anche IE4+ supporta questo tipo di
interazione
• però non tutte le caratteristiche
Bruni e Giorgetti
4
Oggetto PLUGIN (solo NN)
• navigator.plugins: array degli oggetti
rappresentanti i plugin installati nel browser
• ogni plugin è un array di oggetti mimeTypes che
però ha anche le seguenti proprietà:
– name: il nome del plugin
– filename: l’eseguibile caricato durante
l’installazione
– description: descrizione fornita dal produttore
– length: lunghezza dell’array dei tipi MIME
supportati dal plugin
• Anche l’oggetto navigator (sotto NN) possiede
una proprietà mimeTypes
– array di tutti i tipi MIME riconosciuti dal browser
Bruni e Giorgetti
5
Oggetto MIMETYPES (solo NN)
• navigator.mimeTypes[i]
• navigator.plugins[i][j]
• ogni tipo MIME ha le seguenti proprietà:
– type: codifica del tipo MIME
– enabledPlugin: oggetto plugin installato
che gestisce quel tipo MIME
– description: descrizione del tipo MIME
– suffixes: estensione standard dei file di
quel tipo MIME
Bruni e Giorgetti
6
Controllare presenza di plugin
• Funziona solo su NN
• permette di introdurre animazioni etc essendo sicuri che
siano supportati (ed escluderle altrimenti)
• esempio
test = navigator.mimeTypes[“video/quicktime”];
if (test) {
document.writeln(
“<embed src=‘quick.mov’ height=‘100’ width=‘100’>”);
} else {
document.writeln(
“<img src=‘quick.gif’ height=‘100’ width=‘100’>”);
}
Bruni e Giorgetti
7
Orchestrazione
• Gli oggetti multimediali del documento sono
contenuti nell’array document.embeds (come
per immagini, form, etc)
– supportato anche da IE4+
• le proprietà e metodi degli oggetti “embedded”
dipendono dai plugin in uso
– esempio: metodi play() e stop() per file audio
Bruni e Giorgetti
8
Suonare con il mouse I
• Prepariamo un pagina che mostri una tastiera sul
quale l’utente può agire col cursore del mouse
– 2 immagini per rappresentare i tasti bianchi e neri
– 13 note (associate ad una ottava) salvate in file .wav
– il tag <embed> per includere i suoni con attributi
• hidden=true
• autostart=false
– possiamo catturare il click sui tasti e suonare la nota
corrispondente (oppure usare onmouseover)
Bruni e Giorgetti
9
Suonare con il mouse II
<body>
<embed
<embed
<embed
<embed
<embed
<embed
<embed
<embed
<embed
<embed
<embed
<embed
<embed
…
src=“C0.wav”
src=“Cs0.wav”
src=“D0.wav”
src=“Ds0.wav”
src=“E0.wav”
src=“F0.wav”
src=“Fs0.wav”
src=“G0.wav”
src=“Gs0.wav”
src=“A0.wav”
src=“As0.wav”
src=“B0.wav”
src=“C1.wav”
hidden=“true”
hidden=“true”
hidden=“true”
hidden=“true”
hidden=“true”
hidden=“true”
hidden=“true”
hidden=“true”
hidden=“true”
hidden=“true”
hidden=“true”
hidden=“true”
hidden=“true”
Bruni e Giorgetti
autostart=“false”/>
autostart=“false”/>
autostart=“false”/>
autostart=“alse”/>
autostart=“false”/>
autostart=“false”/>
autostart=“false”/>
autostart=“false”/>
autostart=“false”/>
autostart=“false”/>
autostart=“false”/>
autostart=“false”/>
autostart=“false”/>
10
Suonare con il mouse III
…
<h1>Suonare con il mouse</h1>
<hr />
<a onClick="playnote(0);">
<img border="0" src="whitekey.gif"
<a onClick="playnote(1);">
<img border="0" src="blackkey.gif"
<a onClick="playnote(2);">
<img border="0" src="whitekey.gif"
<a onClick="playnote(3);">
<img border="0" src="blackkey.gif"
<a onClick="playnote(4);">
<img border="0" src="whitekey.gif"
align="top"></a>
align="top"></a>
align="top"></a>
align="top"></a>
align="top"></a>
…
<a onClick="playnote(12);">
<img border="0" src="whitekey.gif" align="top"></a>
<hr />
</body>
Bruni e Giorgetti
11
Suonare con il mouse IV
<script language="JavaScript">
<!-function playnote(note) {
document.embeds[note].play();
}
//-->
</script>
Bruni e Giorgetti
12
Esercizi
Bruni e Giorgetti
13