Attributo poster HTML5 Video in Safari e Chrome

Question

In Firefox l'immagine specificata dall'attributo poster del tag VIDEO rimane sullo schermo fino a quando non viene premuto il pulsante di riproduzione. Tuttavia nei browser Webkit (Safari e Chrome) il poster viene scaricato a favore del primo fotogramma del video non appena vengono recuperati i metadati del video.

Desidero evitare di dover posizionare manualmente il poster sopra l'elemento video se possibile. qualcuno sa come aggiustare questo?

<video src="some_url" poster="images/poster.jpg"> 
    <source type="video/ogg" src="some_url" /> 
</video> 

Answer 1

Sembra che WebKit spoglia l'attributo non appena il video è fethced, perché iOS 3.x per Iphone e Ipad ha un grave bug in cui non è possibile riprodurre il video a tutti quando c'è un attributo poster specificato. Questo problema è stato risolto in iOS 4, ma la soluzione rimane ancora, anche in Safari 5 ... Ci sono molti utenti che non hanno ancora effettuato l'aggiornamento a iOS 4, quindi non c'è fortuna con il poster ...

I proveremo a posizionare l'immagine assolutamente sul video usando Javascript e rimuovendola quando il video è riprodotto - sembra la soluzione migliore ...

Answer 2

Se riesci a farla finita con il non precaricamento del video puoi imposta preload = "none" sull'elemento video. In Safari ciò comporta la visualizzazione del poster.

Safari su iOS probabilmente imposta preload = "none" come valore predefinito per risparmiare larghezza di banda, mentre la versione desktop si precarica a meno che tu non le dica esplicitamente di non farlo.