La soluzione migliore (per chi scrive)

La soluzione migliore, per chi scrive, è quella di affidarsi a VideoJS: semplice, personalizzabile e funzionale. L’unico neo è dato dal fatto che non supporta i comandi da tastiera.

Tralasciando il javascript da richiamare nella pagina, il codice base di VideoJS è il seguente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<video id="example_video_1" class="video-js" width="640" height="264" title="Titolo di prova" poster="img/screenshot.png" controls="controls" preload="auto">
 
	<!-- MP4 must be first for iPad! -->
	<source src="video/test.mp4" type="video/mp4" />
	<source src="video/test.webm" type="video/webm" />
	<source src="video/test.ogg" type="video/ogg" />
 
	<object id="myvideo" class="vjs-flash-fallback" width="620" height="280" type="application/x-shockwave-flash" data="video/player.swf">
		<param name="movie" value="video/player.swf" />
		<param name="flashvars" value="image=./img/screenshot.png&file=test.mp4" />
		<img src="img/screenshot.png" width="640" height="360" alt="No video capabilities" title="No video capabilities" />
	</object>
 
</video>
 
<p class="vjs-no-video">
	<strong>Download Video:</strong>
	<a href="video/test.mp4">MP4</a>,
	<a href="video/test.webm">WebM</a>,
	<a href="video/test.ogg">Ogg</a><br>
</p>

L’analisi del codice è tutto sommato semplice:

• Il tag video è il primo ad essere proposto per tutti quei browser che supportano HTML5
• I browser più obsoleti, invece, leggono il tag object all’interno del tag video
• In caso di Javascript disabilitato l’interfaccia dei comandi lascia spazio ai link per scaricare i filmati

Un codice di questo tipo è funzionale alla maggior parte dei siti ma se ci trovassimo in ambito Pubblica Amministrazione non basterebbe perchè il tag object unico, come visto nel precedente articolo “Inserire un video con codice validato senza Javascript“, non è sufficiente per raggiungere la piena compatibilità con gli Explorer più vecchi.

La soluzione finale richiede sicuramente del markup aggiuntivo ma permette di raggiungere un risultato compatibile con la maggior parte dei devices attualmente in circolazione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<video id="example_video_1" class="video-js" width="640" height="264" title="Titolo di prova" poster="img/screenshot.png" controls="controls" preload="auto">
 
	<!-- MP4 must be first for iPad! -->
	<source src="video/test.mp4" type="video/mp4" />
	<source src="video/test.webm" type="video/webm" />
	<source src="video/test.ogg" type="video/ogg" />
 
	<object id="myvideo" class="vjs-flash-fallback" width="620" height="280" type="application/x-shockwave-flash" data="video/player.swf">
		<param name="movie" value="video/player.swf" />
		<param name="flashvars" value="image=./img/screenshot.png&file=test.mp4" />
		<img src="img/screenshot.png" width="640" height="360" alt="No video capabilities" title="No video capabilities" />
		<br /><a href="#">Scarica il plugin Flash</a> oppure scarica i video nel formato che preferisci:
		<a href="video/test.mp4">MP4</a>,
		<a href="video/test.webm">WebM</a>,
		<a href="video/test.ogg">Ogg</a>
	</object>
 
</video>

Guarda l’esempio finale

Come si può notare si è preferito spostare il download dei file all’interno del tag object. In questa maniera si potranno scaricare i video solamente se queste due condizioni sono vere:

• l’utente ha un browser che non supporta HTML5
• l’utente non ha il plugin Flash installato

Il vantaggio principale di questo codice è che non dipende in nessun caso da javascript. Infatti se l’utente ha un browser con supporto HTML5 ma con javascript disabilitato, potrà comunque usufruire del player con i comandi nativi. Se invece è presente un software di vecchia generazione entrerà in gioco il player Flash che poco ha a che fare con la presenza o meno di Javascript (sempre che non si usino librerie come SWFObject).

Il difetto maggiore è che, con browser datati come IE 6 o 7, in caso di mancanza del plugin Flash non verrà proposto il download automatico del componente.
Questo perchè, per attivare l’ActiveX che si occupa di questa procedura, sarebbe necessario il parametro “classid” all’interno del tag object. Tale parametro, però è deprecato in HTML5 e quindi non più utilizzabile.

Pagina: 1 2 3 4 5 6