Lecture d'une vidéo FLV avec un repli sur HTML5

Question

J'ai dit à mon patron d'utiliser HTML5 avec un repli sur FLASH. Mais il a dit qu'il veut FLASH comme première option, et si le navigateur (ipad ou tout autre) ne peut pas reconnaître le FLASH, il devrait lire le fichier MP4 que nous avons.

J'ai suggéré HTML5 avec repli sur Flash. Mais il veut le contraire.

Comment puis-je faire cela? Est-ce que vous avez un exemple de code?

Solution En utilisant SWFObject (google) et un contrôleur SWF (comme FlashMediaPlayback.swf). Il est très important de comprendre que l'iPad a des limites avec la taille de la vidéo. Ainsi, le fichier MP4 ne peut pas être plus grand que 720p et 160kbps pour l'audio.

Je vais poster mon code ci-dessous. Vous pouvez le faire vôtre et l'utiliser à votre façon.

<div style="text-align:center" > 
<script type="text/javascript" src="swfobject.js"></script> 
<script type="text/javascript"> 
    var flashvars = {}; 
    flashvars.src = "demo.flv"; 
    flashvars.controlBarMode = "floating"; 
    flashvars.autostart="true"; 
    var params = {}; 
    params.allowfullscreen = "true"; 
    params.allowscriptaccess = "always"; 
    params.bgcolor = "#1a1a1a"; 
    params.scale = "showall"; 
    var attributes = {}; 
    swfobject.embedSWF("demo_controller.swf", "videoDiv", "920", "560", "10.1.0", "expressInstall.swf", flashvars, params, attributes); 
</script> 

<div id="videoDiv" style="text-align:center"> 
<video controls="controls" width="720" height="480"> 
<source src="demo.mp4" type="video/mp4"/> 
<source src="demo.ogv" type="video/ogg"/> 
</video> 
</div> 
</div> 

Answer 1

Si vous utilisez SWFObject Je suppose que vous pouvez mettre un vidéo dans la div qui SWFObject remplace avec Flash si Flash est installé.

Answer 2

Les créateurs de lecteurs vidéo appellent cela «fall-forward», ce qui peut vous aider dans votre recherche.

Je vous encourage à regarder certaines des solutions existantes, qui enveloppent souvent le lecteur flash dans une API de type HTML5 pour une meilleure compatibilité. La version bêta de Kaltura HTML5 a un exemple en avant au http://www.kaltura.org/advanced-examples.