HTML5, video in autoplay e iOS4

Come sapete i dispositivi handheld di Apple (iPhone, iPad e iPod Touch) non permettono di visualizzare contenuti Flash (per fortuna, dico io), ma permettono di sfruttare tutte le nuove potenzialità messe a disposizione da HTML5, come la possibilità di visualizzare video e animazioni (che fino a poco tempo fa erano prerogative di Flash). In tempi molto rapidi, HTML5 è stato eletto come la soluzione alternativa a Flash, se non addirittura come soluzione definitiva a Flash.

Un’opportunità interessante che viene offerta da HTML5 su iOS4 (l’ultima release del sistema operativo di iPhone, iPad e iPod Touch) è la possibilità di visualizzare video integrati in una pagina web tramite il tag <video>, e realizzare il cosiddetto autoplay (il play automatico di un video non appena si visualizza la pagina).

Fino alla versione di iOS3, per realizzare l’autoplay esisteva un workaround che faceva ricorso ad un fakeclick in jQuery (simulava il click del video).

Da iOS4 in poi, il workaround non funziona e siamo costretti a modificare il codice (semplificandolo!). Vediamo come.

Prima di tutto dobbiamo utilizzare il nuovo tag di HTML5, ovvero il tag video, indicando il video di cui vogliamo che venga fatto il playback in automatico:

<video id="myVideo" width="640" height="480" controls>
<source src="video.mp4" type="video/mp4; codecs=’avc1.42E01E, mp4a.40.2′">
</video>

In secondo luogo, tramite JavaScript, indichiamo al browser che il video deve essere lanciato in autoplay:

window.onload = function() {
    var pElement = document.getElementById("myVideo");

    pElement.load();
    pElement.play();
};

Come vedete, rispetto alla soluzione “workaround” per iOS, il codice è più semplice e comprensibile (non richiede nemmeno jQuery).
E in più, la soluzione è retrocompatibile con iOS3.

Link alla Link al post [Matthew Congrove].