come fare un video a regola d’arte

Ho avuto una domenica tribolata perché la sintesi video della partita (pubblicata su inter.it), inizialmente  fruibile sui mac, è proditoriamente  stata sostituita da un messaggio “MIME type non corretto”. Com’è stato possibile? Sabotaggio? File sostituito?

A complicare la cosa… gli highlights erano fruibili da chrome e safari su mac, e da chrome su windows. Ma non da firefox su windows.

L’inghippo era duplice: solo online-convert garantisce una coppia di codec audio/video compatibile con tutti. E poi, la nostra configurazione AWS amazon faceva servire da S3 un file non modificato da oltre 12 ore. Nella riscrittura degli header http si passava da un MIME TYPE video/webm a un più generico binary-octet stream.

L’idiosincrasia era dovuta al fatto che firefox è più ligio al content-type, e con il degradamento progressivo chrome e safari chiedevano il file mp4 mentre Firefox la clip webm.

 

html5 video generator

Dopo una controversa domenica passata sulle piste di Estoul, ho avuto una folgorazione:  gli highlights video del sito dell’INTE non si visualizzano correttamente su Internet Explorer.

Mi sono esaltato per aver risolto un baco nello slider con  il vecchio laptop sulle gambe,  sul balcone al sole di Marzo. Ma era un sollievo fugace.  Convertire in proprio un video è sicuramente più error-prone che mandarlo su youtube.

Questo è il caso ideale, ma ovviamente non sempre funziona.

Questo è un ottimo tutorial, che ci mostra ad esempio che il browser perfetto non esiste: questo limitandosi alla situazione (ormai marginale dei desktop).

La soluzione, per Explorer 10+ per windows, è stata di approntare anche una versione .ogv del video. Come fare? Senza tanti patemi d’animo, rivolgendosi a online-convert oppure, in locale, utilizzando MIROVIDEO. Quindi in definitiva servono 4 versioni della stessa clip: OGV MP4 WEBM e FLV

La versione ‘master’ del video è quella mp4. La seconda e quarta versione vengono realizzate con Sorenson Squeeze. La prima e la terza con online convert oppure mirovideo.

Questo link aiuta a programmare il decadimento progressivo.

www.gianmarcopoma.com revamped

Settimana di grandi cambiamenti, di febbrili preparativi.  Di voci incontrollate e speranze da germogliare. E’ anche un’occasione per voltare pagina, e provare cose nuove. Ho intanto rilasciato il mio nuovo sito, completamente responsivo e html5. Un pretesto per riscrivere il curriculum.

A questo indirizzo si spalancano nuove possibilità  su come gestire e configurare un video e un videoplayer, come se fosse un elemento  qualsiasi del DOM  della pagina. Real Player, che voleva migliaia di dollari per licenziare il proprio screaming server, si morderà  le mani.

Questo post apre nuovi orizzonti all’utilizzo di video fullscreen

Pulito pulito, il codice per il video

<video autoplay loop poster="polina.jpg" id="bgvid">

<source src="polina.webm" type="video/webm">

<source src="polina.mp4" type="video/mp4">

</video>

E l’essenziale javascript per definire il canvas.

video#bgvid {

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto; height: auto; z-index: -100;

background: url(polina.jpg) no-repeat;

background-size: cover;

}

un paio di informazioni su youtube che valgono oro

ultimamente sto lavorando sempre di piu’ su youtube, e talvolta occorre che un semplice link sia completo ed esauriente.

ecco perche’ link come questi sono davvero importanti

occorre poi notare che la specifica del video HD si e’ poi semplificata

If you have to link to a 720p HD video on YouTube from your web pages or share those links in an email, here’s a simple hack – just append &hd=1 to the YouTube video URL and it will directly play the high-res widescreen version of that video in the browser.

For instance, the URL youtube.com/watch?v=ZOmLnGrq-bA links to the standard (grainy) version of the YouTube video while youtube.com/watch?v=ZOmLnGrq-bA&hd=1 will prompt YouTube to show the high quality HD version of that video.

qui tutti i dettagli