HTMLTag <object>

Novità HTML5: Audio e Video

Alice Pavarani2

Tag <object> Il tag <object> viene utilizzato per inserire oggetti

(immagini, audio, video, Java applets, ActiveX, filmati flash, …) all’interno di una pagina HTML Per l’inserimento delle immagini è preferibile il tag <img> Per l’inserimento di audio e video si utilizzano i tag <audio> e <video>

E’ supportato da tutti i principali browser

Può essere utilizzato per inserire una pagina HTML all’interno di un’altra<object type=“text/html” height=“500” width=“500” data=“http://www.itis.pr.it”></object>

HTML 5

Alice Pavarani3

Attributi principali di <object> data specifica l’URL della risorsa da usare come oggetto form specifica uno o più form a cui l’oggetto appartiene height, width altezza e larghezza dell’oggetto nella pagina name nome identificativo dell’oggetto type MIME della risorsa specificata nell’attributo data

Almeno uno tra gli attributi data e type deve essere definito

Alice Pavarani4

MIME Multipurpose Internet Mail Extension E’ uno standard di Internet che specifica il tipo di dati che vengono trasferiti attraverso i

protocolli di comunicazione HTTP o SMTP (il protocollo di trasmissione delle email) La versione MIME è formalmente rimasta la 1.0 dal 1992… (

http://en.wikipedia.org/wiki/Internet_media_type)

I tipi di contenuto predefiniti sono sette: text audio image video application

(rappresenta il tipo di dati generato o utilizzato da un particolare applicativo) message multipart

Ogni tipo ha dei sottotipi

Riferimento MIME http://www.iana.org/assignments/media-types/media-types.xhtml

tipi elementari

tipi composti

Alice Pavarani5

MIME: esempi text

text/html text/vcard text/plain (.c/.c++)

audio audio/mpeg audio/vnd.rn-realaudio

image image/gif image/jpg image/vnd.adobe.photoshop

video video/quicktime

video/mp4 video/x-flv (flash video .flv) video/avi

application application/zip application/pdf application/java (.class) application/x-latex (.tex) application/x-shockwave-flash

message message/http

multipart multipart/form-data

Alice Pavarani6

Audio e Video in HTML5 In HTML5 audio e video vengono incorporati in una

pagina Web mediante tag specifici: <audio> <video>

Entrambi possono contenere (tra tag di apertura e tag di chiusura)

il tag <source> per definire una (o più) risorse audio/video da eseguire nell’elemento incorporato Il browser sceglie poi la risorsa in base ai codec installati

Entrambi possono contenere (tra tag di apertura e tag di chiusura)

il tag <track> per definire un testo relativo ai media (es. sottotitoli)

HTML 5

Alice Pavarani7

Tag <source> , <audio> , <video> Attributi del tag <source>:

src URL del file della risorsa type MIME della risorsa specificata nell’attributo src

Attributi del tag <audio>: controls inserisce i controlli nel player

Attributi del tag <video>: height, width altezza e larghezza del video nella pagina controls inserisce i controlli nel player

HTML 5

<audio controls><source src=“audio.mp3” type=“audio/mpeg>Il browser non supporta l’elemento audio

</audio>

<video height=“320” width=“240” controls><source src=“video.mp4” type=“video/mp4>Il browser non supporta l’elemento video

</video>

Alice Pavarani8

Formati supportati dai Browser Audio Video

MIME typesaudio/mpeg audio/wav audio/ogg

Browser MP3 Wav Ogg

Internet Explorer

YES NO NO

Chrome YES YES YES

Firefox NOUpdate: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3

YES YES

Safari YES YES NO

Opera NO YES YES

MIME typesvideo/mp4 video/webm video/ogg

Browser MP4 WebM Ogg

Internet Explorer

YES NO NO

Chrome YES YES YES

Firefox NOUpdate: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4

YES YES

Safari YES NO NO

Opera NO YES YES

http://www.w3schools.com/html/html5_intro.asp