Video HTML5

[stesil]

Il tag video, una delle novità di HTML5, permette di inserire in una pagina un file video con estrema semplicità. Richiede un tag source in cui viene specificato il percorso della risorsa multimediale. I formati accettati sono MP4, ogg e WebM. Di fatto i browser riescono ad utilizzare solo alcuni tipi di file, quindi è necessario inserire almeno due formati diversi. Per maggiori informazioni sui codec video, in particolare per l'uso di file mp4, consultare questo articolo di html.it.

Codice:

Only registered users can see contents. Please click here to Register or Login.
Gli attributi width e height specificano rispettivamente la larghezza e l'altezza del video.
Possono essere anche utilizzati diversi attributi opzionali, come

• controls: il browser visualizza un player di default con la barra dei controlli, con cui è possibile avviare/mettere in pausa il video, regolarne il volume, abilitare la visione in fullscreen (non disponibile con IE9)

• poster: specifica il percorso dell'immagine che deve essere visualizzata finché non è iniziato il download del file

• autoplay: il video parte automaticamente al caricamento della pagina

L'unico problema nell'uso di questo metodo è che su browser più datati, come Internet Explorer 6/7/8 ... non si visualizza nulla. Per rendere il contenuto fruibile con tutti i browser occorre predisporre un'alternativa in flash che venga visualizzata solo quando il browser non supporta il tag html5 video.

Come procedere in pratica per utilizzare questo tag con wsx5 9 o 8?
Questo è quanto ho provato (e sicuramente si potrà fare di meglio...): qui la DEMO.

Per stabilire se il browser supporta il tag video utilizzeremo una libreria javascript, modernizr.js: nella sezione download c'è la possibilità di creare un file javascript personalizzato, scegliendo solo le funzioni necessarie. In questo caso è sufficiente selezionare l'opzione "HTML5 Video" e quindi cliccare su "GENERATE!": salvare il file ottenuto come modernizrvideo.js.

Inserire video HTML5 in evo9

1. Inserire nella griglia di creazione della pagina un oggetto "Video e suono". Scegliere come "File locale sul pc" il video in formato flv e impostare le opzioni relative.

2. Scaricare il file: [ Guests cannot view attachments ]

Lo script contenuto in questo file sostituisce, al codice generato dal programma per l'inserimento del video con il player in flash, il tag video solo se il browser che si sta utilizzando lo supporta.
Il file necessita di alcune personalizzazioni (in rosso i valori da controllare):

nel codice relativo al tag video sono da verificare la larghezza del video, l'altezza, il percorso dell'immagine (se presente) e il percorso dei file video nei diversi formati.

<video width="400" height="350" controls poster="files/poster.png"><source src="files/video.mp4" type="video/mp4"><source src="files/video.ogv" type="video/ogg"><source src="files/video.webm" type="video/webm"></video>

Mentre in questa riga di codice

$('#imObjectVideo_1').replaceWith(videohtml5);

       
il valore inserito è da verificare nel codice sorgente della pagina. Ogni oggetto video ha un id univoco che lo identifica: se nella pagina vengono inseriti più oggetti, questi vengono numerati in modo progressivo.

3. In una pagina inserire un oggetto "HTML e Widgets", impostare l'altezza a 0 e, nella scheda esperto, aggiungere i seguenti file da allegare al codice, lasciando come "percorso relativo sul server" la cartella files proposta di default:

• il video nei diversi formati

• l'immagine da visualizzare

• il file modernizrvideo.js creato precedentemente

• il file jsvideonove.js precedentemente modificato

In alternativa è possibile esportare tutti i file in una cartella attraverso un programma FTP. Il vantaggio di questo metodo è che, ad ogni aggiornamento del programma, non verranno ricaricati ex-novo. Lo svantaggio è che non sono direttamente visualizzabili in anteprima.

4. Da ultimo in "Creazione mappa" selezionare la scheda esperto delle proprietà della pagina ed inserire il seguente codice "Prima del tag /HEAD":

Codice:

Only registered users can see contents. Please click here to Register or Login.
Anche in questo caso, se i file sono stati esportati in una cartella diversa dalla cartella files occorre modificare il percorso.

Inserire video HTML5 in evo8

La procedura è identica a quella descritta con la versione nove, con queste modifiche:

1. il file js da allegare:

[ Guests cannot view attachments ]

Anche in questo caso vanno controllati i valori di width, height e i percorsi dei file video e dell'eventuale immagine. In particolare in questa riga di codice

$('#imObj3_00').replaceWith(videohtml5);

occorre controllare il valore di id dell'oggetto dal codice sorgente della pagina.

2. Scaricare la libreria jQuery , salvare il file come jquery.js e allegarlo al progetto sempre tramite oggetto html.

3. In Proprietà della pagina inserire questo codice:

Codice:

Only registered users can see contents. Please click here to Register or Login.