Nel primo dei suoi blog per PC Pro , sviluppatore web Ian Devlin rivela come incorporare video nel tuo sito Web con HTML5
quando ho creato il mio account google?
Probabilmente la caratteristica più grande e più discussa di HTML5 è il video incorporato. Attualmente, l'unico metodo per aggiungere contenuti video al tuo sito Web è con un plug-in di terze parti come Flash, QuickTime o RealPlayer. Con l'avvento di HTML5 e dell'elemento video tutto questo cambierà, con il supporto video gestito dal browser web, eliminando la necessità di qualsiasi supporto di terze parti.
Diversi browser Web offrono già il supporto per HTML5. Qui riveleremo come incorporare video senza plug-in nel tuo sito e i problemi che dovrai affrontare.
Tipi di file e compatibilità del browser
Per cominciare, daremo brevemente un'occhiata ai diversi tipi di file video supportati in HTML5. Questi sono Theora OGG e H.264 (.mp4). Browser diversi supportano tipi diversi e alcuni non ne supportano affatto. La tabella seguente lo indica:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | X |
| Cromo 3+ | ✓ | ✓ |
| Safari 3+ | X | ✓ |
| Opera 10.5+ | ✓ | X |
| Internet Explorer 8 | X | X |
| Internet Explorer 9 | X | ✓ |
| i phone | X | ✓ |
| Android | X | ✓ |
Codec e altri problemi tecnici
Lo stesso HTML5 non specifica un codec video da utilizzare e questo ha portato a discussioni su quale sia il migliore da usare per il web . Quindi, per coprire tutti i browser, dobbiamo supportare entrambi i codec.
E poi, ovviamente, c'è Internet Explorer. Al momento, nessuna delle versioni rilasciate di Internet Explorer supporta l'elemento video ed è ancora necessario un plug-in per riprodurre il video. Questo cambierà con il rilascio di Internet Explorer 9 (probabilmente all'inizio del prossimo anno), quando sarà supportato H.264, insieme a molte altre chicche HTML5.
Nel caso ti stia chiedendo come, puoi convertire i tuoi file video in OGG (puoi leggere di più sul tipo Theora OGG su TheoraCookbook ) utilizzando il Convertitore video Miro .
Per ulteriori informazioni approfondite sull'elemento video e sui codec, vai su tuffati in html5: video sul web di Marco Pellegrino.
Codice HTML5
Ora passiamo al codice HTML5 effettivo e a come possiamo far funzionare la cosa. HTML5 ci fornisce due nuovi elementi che possiamo usare per aggiungere video alle nostre pagine web: il |_+_| elemento, di cui abbiamo già parlato, e il |_+_|_ elemento. Diamo un'occhiata a ciascuno di questi a turno.
L'elemento
L'elemento video può avere i seguenti attributi:
| Attributo | Descrizione |
|---|---|
| src | un URL valido per il file video stesso |
| riproduzione automatica | un booleano che indica se il video deve essere riprodotto automaticamente |
| controlli | un booleano che indica che i controlli multimediali predefiniti devono essere visualizzati dal browser |
| ciclo continuo | un booleano che indica se il video deve essere riprodotto ripetutamente |
| precarico | indica al browser se è necessario il download preventivo del video stesso o se i soli metadati sono tutto ciò che è necessario. I valori possibili sono:
|
| manifesto | l'URL di un file immagine da visualizzare quando non sono disponibili dati video |
| larghezza | la larghezza del video, in pixel CSS |
| altezza | l'altezza del video, in pixel CSS |
Da ciò, si può vedere quanto sia facile incorporare un video OGG nel tuo sito Web utilizzando solo l'elemento video:
Questo è davvero tutto quello che c'è da fare.
Qualsiasi browser che supporta il formato Theora OGG dovrebbe ora visualizzare e riprodurre correttamente il tuo video senza ulteriori indugi. Ovviamente non è così facile, perché come abbiamo visto dalla tabella sopra, il codice funzionerebbe solo in Firefox, Chrome e Opera. Quindi abbiamo bisogno anche di un fallback a H.264. Ciò può essere ottenuto utilizzando |_+_| elemento, che ci consente di definire più fonti multimediali per l'elemento video.
la tv samsung si riavvia mentre guardi netflix
L'elemento
L'elemento sorgente ha i seguenti attributi:
| Attributo | Descrizione |
|---|---|
| src | un URL valido per il file multimediale (in questo caso video) stesso |
| genere | il tipo di file multimediale che deve essere a Tipo MIME , per esempio. |_+_| indica che si tratta di un video Theora OGG e puoi anche fornire il codec MIME per aiutare il browser a decidere come riprodurre il video usando |_+_|. |
| metà | fornisce il tipo di supporto previsto della risorsa multimediale e deve essere un valido query multimediale media , per esempio. |_+_| indica che il video è adatto per dispositivi palmari o |_+_| che indica che il video è appropriato per schermi di 720 pixel o più. |
Nota: l'elemento sorgente è nullo e ha un tag iniziale ma nessun tag di chiusura
La cosa più utile dell'elemento sorgente è che possiamo usarlo per impilare i diversi tipi di file, consentendo al browser di provarli a turno finché non ne trova uno che può riprodurre.
Usando e insieme
Per impilare i video nei diversi tipi all'interno dell'elemento video, inseriamo il codice come segue:
Il codice sopra ora funzionerà in tutti i browser tranne Internet Explorer, che visualizzerà il messaggio sopra indicato.
Puoi verificarlo da solo visualizzando la pagina HTML5 Test Video , che contiene un video di esempio di una farfalla sia in formato Theora OGG che MP4, quindi se lo stai visualizzando in Firefox, Chrome, Safari, Opera o su iPhone o un Android, dovresti essere in grado di vederlo.
I coltelli affilati tra di voi ora noteranno che possiamo trarre vantaggio da questo impilamento e avere un fallback su Flash (o qualche altro plugin) in basso invece di visualizzare un messaggio di scusa se non riesci a vedere questo video, usando il seguente codice :
Conclusione
Come con la maggior parte degli elementi HTML5, il supporto del browser per gli elementi sorgente e video è attualmente irregolare. Al momento è in corso anche un ampio dibattito sul fatto che l'elemento sorgente interromperà l'utilizzo di Flash come metodo più popolare per aggiungere contenuti video ai siti Web. Non sono sicuro che ucciderà completamente Flash, ma comunque penso che sia giusto dire che è qui per restare e fornirà agli sviluppatori web un approccio più semplice e pulito all'incorporamento di video.
