Esercitazione 5 (13/05/2011) - e-Lite

Transcript

Esercitazione 5 (13/05/2011) - e-Lite
Linguaggi e ambienti per la multimedialità
Ingegneria Del Cinema e dei Mezzi Di Comunicazione - A.A. 2010/2011
Esercitazione 5 (13/05/2011)
Esercizio 1 (utilizzare oggetto swfobject)
Data la pagina web esercizio1.html, contenente un elenco di id di filmati di YouTube:
1. sostituire all'id del video il titolo, il nome dell'autore e la thumbnail del filmato
2. al click sulla thumbnail dei filmati,
▪ eliminare il video caricato in precedenza se diverso da quello attuale 1
▪ creare un div con id="videocaricato"
▪ caricare il video nel div con id="videocaricato"
Esercizio 2
Data la pagina esercizio2.html
1. al caricamento della pagina includere un'immagine SVG dell'Italia 2 nel div con
id="mappa"
2. al click su una regione, visualizzare nel div con id="video_per_regione" un elenco
contenente thumbnail e titolo dei 15 filmati ordinati per rilevanza che hanno come
parole chiave "Immagini della Regione nome della regione"
3. al click sul titolo del filmato si deve rimandare alla relativa pagina YouTube
Esercizio 3(utilizzare YouTube iFrame Api)
Data la pagina esercizio3.html contenente una casella di testo (name='testo_cerca') e un
bottone (name='cerca')
1. Quando le api YouTube iFrame sono state caricate, abilitare il bottone cerca
2. alla pressione del bottone cerca, se è stato inserito un testo nella casella di testo
1. eliminare se esiste il bottone "sincronizza fine" (id="sincronizza")
2. visualizzare e caricare, all'interno del div con id='video', i primi 5 video di
YouTube, ordinati per durata decrescente3 che contengano come parola chiave
il testo della casella di testo
3.
Visualizzare un bottone con testo "sincronizza fine" quando tutti i player sono
pronti
1 swfobject.removeSWF(objElemIdStr)
2 L'immagine SVG è la stessa dell'esercitazione 4, per conoscere gli id e le classi delle regioni fare riferimento al testo
dell'esercitazione precedente.
3 Per ordinare un array in javascript http://www.w3schools.com/jsref/jsref_sort.asp. Sul sito web del corso è
disponibile un esempio di ordinamento custom di oggetti javascript
4. al click sul bottone sincronizza fine, eseguire il play dei filmati in modo tale che
finiscano in contemporanea.
Ad esempio:
- video 1 durata 300 s
- video 2 durata 300 s
- video 3 durata 250 s
- video 4 durata 200 s
- video 5 durata 60 s
Alla pressione del bottone i video 1 e2 partiranno in contemporanea, dopo 50 s partirà il
video 3, dopo 100 s il video 4 e dopo 240 s il video 1 (utilizzare setTimeout 4)
4 http://www.w3schools.com/js/js_timing.asp