HTML 5 aggiunge il tag video [it]

[fr] La nouvelle norme HTML 5 apporte pas mal de nouveautés, une est liée aux vidéos: l'ajout d'un tag video pour insérer des vidéos dans une page HTML sans utiliser des composantes externes (Flash, QuickTime, ...).

HTML 5Tra le varie novità apportate dalla nuova norma HTML 5 una è legata strettamente ai video: l’aggiunta di un tag <video> per inserire dei video all’interno di una pagina HTML senza dover utilizzare componenti esterni (Flash, QuickTime, …).

Specifiche

Il tag video propone alcuni attributi specifici, oltre a quelli generici di ogni tag::

  • src: l’indirizzo al quale si trova il video
  • poster: l’indirizzo di un immagine statica per rimpiazzare il video se il browser non è in grado di visualizzare quest’ultimo
  • autoplay: indica se la riproduzione del video deve venr avviata automaticamente, senza l’intervento dell’utente
  • loop: indica se la riproduzione deve riprendere dall’inizio automaticamente al momento che arriva alla fine del video
  • controls: indica se un interfaccia per controllare la riproduzione deve essere visualizzata, l’interfaccia può permettere le funzioni: play, pause, salto ad una posizione del video (seek), cambio del volume, …
  • width e height: le dimensioni occupate all’interno della pagina dal video


Sono presenti anche numerosi eventi per interagire con il video:

  • abort: la riproduzione è stata interrotta
  • canplay: i dati ricevuti sono sufficienti per iniziare la riproduzione
  • canplaythrough: i dati ricevuti sono sufficienti per l’intera riproduzione se la banda passante utilizzata resta costante
  • canshowcurrentframe: l’immagine corrente (frame) è disponibile
  • dataunavailable: i dati non sono disponibili
  • durationchange: la lunghezza conosciuta del video ha cambiato
  • emptied: il video è stato eliminato dalla memoria
  • empty: messaggio d’errore indicante che il video è vuoto
  • ended: la riproduzione è terminata
  • error: messaggio d’errore generico
  • load: il video è stato scaricato integralmente
  • loadedfirstframe: la prima immagine (frame) è disponibile
  • loadedmetadata: i metadati sono disponibili
  • loadstart lo scaricamento del video è cominciato
  • pause: la riproduzione è stata interrotta
  • play: la riproduzione è stata avviata o ripresa
  • ratechange: la velocità di riproduzione è stata modificata
  • seeked: è stato effettuato un salto nella riproduzione (seek)
  • seeking: è iniziato un salto nella riproduzione (seek)
  • timeupdate: il tempo indicante lo stato di riproduzione è cambiato
  • volumechange: il volume dell’audio è cambiato
  • waiting: un’operazione richiesta è ritardata in attesa della fine della precedente oerazione

Esempi d’utilizzo

L’utilizzo è molto semplice:
<video src="video.ogg" autoplay="true" >
    Your browser does not support the <code>video</code> element.
</video>

Se il browser non supporta un formato, si possono indicare formati alternativi:
<video autoplay="true">
    <source src="video.ogg" type="video/ogg">
    <source src="video.mov">
    Your browser does not support the <code>video</code> element.
</video>

Supporto

Questo nuovo tag è già supportato, almeno parzialmente, da Firefox 3.1, versione in fase di sviluppo.
Al momento l’unico formato video supportato è l’Ogg, in futuro anche altri formati dovrebbero essere pure supportati.

[fonte] [fonte]

CC BY-NC-SA 4.0 <span lang='it'>HTML 5 aggiunge il tag video <span class='bb-lang'>[it]</span></span> by Luca Palli is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Comments
4 Responses to “HTML 5 aggiunge il tag video [it]

@Gheso: Grazie per la segnalazione, a breve dovrei scrivere un nuovo articolo su questo tema visto che sembra essere sempre più d’attualità grazie in particolare a Firefox 3.5 e all’iPhone OS 3.0.

Io alla fine del video devo rimandare la pagina ad un altro sito.. come posso fare col ended??

@shake: Esatto puoi sfruttare l’evento ended per aprire una nuova pagina.

Il codice da usare è del tipo:
<video onended="window.location = 'http://example.com/'">
...

Sorry, the comment form is closed at this time.