Graças ao HTML5, reproduzir videos na web tornou-se algo extremamente simples, mas a coisa engrossa quando o cliente exige compatibilidade com IE8 – falecido em 2014 (leia).
O desafio é encontrar um código que funcione facilmente em todas as plataformas e para isso funcione com HTML5 e Flash quando necessário.
Recentemente encontrei esse site Video For Everybody Generator e o código gerado é assim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody --> <video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /> <object type="application/x-shockwave-flash" data="http://flashfox.googlecode.com/svn/trunk/flashfox.swf" width="640" height="360"> <param name="movie" value="http://flashfox.googlecode.com/svn/trunk/flashfox.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashVars" value="controls=true&poster=http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg&src=http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4" /> <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download video:</strong> <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a> </p> |
No projeto em questão, tínhamos uma integração com a API do Instagram, então só tínhamos o vídeo no formato MP4 e o código funciona muito bem com somente um formato.
😉
