http://slides.html5rocks.com/


Elementi multimediali



audio e video

l'xhtml e html4 ha un solo tag nativo multimediale (img)

nativamente supporta solo i formati immagini (png, gif, jpeg)

embed

object

che destinano una porzione della pagina html a riprodurre un flusso (file ) specificato

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


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







html normale -> html 5


tag audio in HTML 5

<audio controls="controls">
 
  <source src="file-audio.ogg" type="audio/ogg" />
 
  <source src="file-audio.mp3" type="audio/mpeg" />
 
  Spiacente il tuo browser non supporta il tag audio.
 
</audio>
parametri del tag audio


Attributo
Valore
Descrizione
autoplay
autoplay
Partenza automatica
controls
controls
Specifica se mostrare o no i controlli
loop
loop
L'audio si riproduce ciclicamente
preload
auto
metadata
none
preload del file con la pagina
src
URL
URL del file audio

Alternative
mini player in flash
es:
http://flash-mp3-player.net/




<video width="320" height="240" controls="controls"><!-- attributo controls con valore
                                                     per compatibilità xhtml -->
   <source src="video/aquarium.webm" type="video/webm" />
   <source src="video/aquarium.mp4" type="video/mp4" />
   <source src="video/aquarium.ogg" type="video/ogg" />
   Spiacente il tuo browser non supporta il tag video / il formato video
 </video>





Attribti video

Attributo
Valore
Descrizione
autoplay
autoplay
Specifies that the video will start playing as soon as it is ready
controls
controls
Specifies that video controls should be displayed (such as a play/pause button etc).
height
pixels
Sets the height of the video player
loop
loop
Specifies that the video will start over again, every time it is finished
muted
muted
Specifies that the audio output of the video should be muted
poster
URL
Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload
auto
metadata
none
Specifies if and how the author thinks the video should be loaded when the page loads
src
URL
Specifies the URL of the video file
width
pixels
Sets the width of the video player




tabella compatibilità formati video

Video codec support in upcoming browsers||~ Codecs/container
IE
Firefox
Safari
Chrome
Opera
iPhone
Android
Theora+Vorbis+Ogg
·
3.5+

5.0+
10.5+
·
·
H.264+AAC+MP4
9.0+
·
3.0+
·
·
3.0+
2.0
WebM
9.0+*
4.0+

6.0+
10.6+
·
2.3








con il risultato

Risorse

audio
miniplayer mp3
jplayer -
http://www.jplayer.org/

social
soundcloud -
audioboo http://audioboo.fm/

spreaker

video