English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Ci sono molti modi per riprodurre video in HTML.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial (oldtoolbag.com)</title> </head> <body> <video width="320" height="240" controls autoplay> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed width="320" height="240" src="movie.swf"> </object> </video> </body> </html>Testa per ‹/›
Non è facile riprodurre video in HTML!
Devi essere esperto di molte tecniche per assicurarti che i tuoi file video possano essere riprodotti in tutti i browser (Internet Explorer, Chrome, Firefox, Safari, Opera) e su tutte le hardware (PC, Mac, iPad, iPhone).
In questa sezione, la guida di base ti riassume i problemi e le soluzioni.
Il tag <embed> ha la funzione di incorporare elementi multimediali nelle pagine HTML.
Il codice HTML seguente mostra come incorporare un video Flash nella pagina web:
Problema
HTML4 non riconosce il tag <embed>. La tua pagina non può essere validata.
Se il browser non supporta Flash, il video non verrà riprodotto
iPad e iPhone non possono visualizzare video Flash.
Se converti il video in altri formati, potrebbe non funzionare in tutti i browser.
Il tag <object> viene utilizzato per incorporare elementi multimediali nelle pagine HTML.
Di seguito è riportato un frammento HTML che visualizza un video Flash incorporato nel sito web:
Problema:
Se il browser non supporta Flash, il video non verrà riprodotto.
iPad e iPhone non possono visualizzare video Flash.
Se converti il video in altri formati, potrebbe non funzionare in tutti i browser.
Il tag <video> di HTML5 definisce un video o un film.
L'elemento <video> è supportato in tutti i browser moderni.
Di seguito è riportato un frammento HTML che visualizza un video incorporato nel sito web in formato ogg, mp4 o webm:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial (oldtoolbag.com)</title> </head> <body> <video width="320" height="240" controls autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> Il tuo browser non supporta l'attributo video. </video> </body> </html>Testa per ‹/›
Problema:
Devi convertire il video in molti formati diversi.
L'elemento <video> non funziona nei browser obsoleti.
In questo esempio sono stati utilizzati 4 formati di video diversi. L'elemento <video> di HTML5 tenta di riprodurre il video in uno dei formati mp4, ogg o webm. Se tutto fallisce, si torna all'elemento <embed>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Base Tutorial (oldtoolbag.com)</title> </head> <body> <video width="320" height="240" controls autoplay> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed width="320" height="240" src="movie.swf"> </object> </video> </body> </html>Testa per ‹/›
Problema:
Devi convertire il video in molti formati diversi
Il modo più semplice per mostrare un video in HTML è utilizzare siti di video come Youku.
Se desideri riprodurre un video nella tua pagina web, puoi caricare il video su Youku o altri siti di video e poi inserire il codice HTML nella tua pagina web per riprodurre il video.
Puoi trovare il codice HTML incorporato negli sportelli di condivisione di vari siti di video.
<embed src='https://player.youku.com/player.php/sid/XNDQ0MTI1NzE1Mg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>Testa per ‹/›
Se la pagina web contiene link a file multimediali, la maggior parte dei browser utilizzerà un "programma di assistenza" per riprodurre i file.
Il seguente frammento di codice mostra un link a un file AVI. Se l'utente fa clic sul link, il browser avvierà un "programma di assistenza", come Windows Media Player, per riprodurre questo file AVI:
Quando un video è incluso nella pagina web, viene chiamato video in linea.
Se intendi utilizzare video in linea in un'applicazione web, devi essere consapevole che molte persone trovano fastidiosi i video in linea.
Allo stesso tempo, nota che l'utente potrebbe aver disattivato l'opzione dei video in linea nel browser.
Il nostro consiglio migliore è includere questi tag solo nei punti in cui l'utente desidera vedere un video in linea. Un esempio positivo è quando l'utente deve vedere un video e fare clic su un link, viene aperta una pagina e il video viene riprodotto.
| Etichetta | Descrizione |
| <embed> | Definisce un oggetto incorporato. Non approvato in HTML4, permesso in HTML5. |
| <object> | Definisce un oggetto incorporato. Non approvato in HTML4, permesso in HTML5. |
| <param> | Definisce i parametri dell'oggetto. |
| <audio>HTML5 | Definisce il contenuto audio |
| <video>HTML5 | Definisce un video o un film |
| <source>HTML5 | Definisce le risorse multimediali dell'elemento media (<video> e <audio>) |
| <track>HTML5 | File di Sottotitoli per l'Elemento media o altri file che contengono testo (video e audio) |