html5 video player: adattare l’immagine poster al canvas video

Problema:  l’attributo POSTER del tag VIDEO di Html 5 a volte non ha la stessa ratio(altezza/larghezza) del video che si andrà  a riprodurre. In questo modo possono apparire delle barre laterali verticali o orizzontali, davvero brutte.

In ogni notizia del post partita di inter.it c’è un tag <VIDEO>

Il dubbio è che tu pensi ancora di avere a che fare con un plugin (come flash) per riprodurre il video, in realtà  ora tutto il lavoro lo fa il browser. E quindi stiamo parlando di un tag come tutti gli altri, con eventi e attributi configurabili da JavaScript e CSS.  Quindi  puoi giocare con la JPG del poster frame come vuoi.

Esistono soluzioni più spartane

Ma io ho scelto questa, definitivamente più elegante,  con un dummy poster frame fatto di png trasparente.