jeudi 9 juin 2011

Vidéo HTML5


Voici les raisons pour lesquelles, même avec HTML5, la vidéo c'est et ça restera avant tout du Flash, du moins tant que le format SWF sera reconnu par les navigateurs et que le Javascript ne trouvera pas une interface réellement intuitive pour la mettre en forme :
http://tv.adobe.com/fr/watch/chips-tips/vido-html5/

Pour résumer :
  • player Flash = le GPU gère désormais la vidéo, ce qui induit des performances inégalées comparées à HTML5.
  • player Flash = interactivité, ce qui offre une meilleure expérience utilisateur (cf Nissan Juke).
  • player Flash = compatible avec 98% des postes clients, alors que seuls 50% des navigateurs sont compatibles HTML5.
  • player Flash = permet de ne pas fragmenter les contenus par des encodages multiples inutiles (mpg, mov, avi, ovg, swf...) car les seules plateformes qui ne lisent pas le Flash utilisent néanmoins le même format vidéo que Flash. Donc, si par défaut on affiche du Flash, un encodage suffit au lieu des 5 obligatoires en HTML5.
  • player Flash = accessibilité pour la vidéo à l'aide de sous-titres, de contenus audio personnalisables, de commandes clavier, de descriptions.
  • player Flash = plein écran fonctionnel contrairement aux options HTML5.
  • player Flash = navigation plus précise dans une séquence vidéo.
  • player Flash = gestion de la qualité selon la configuration du poste client.
  • player Flash = sécurisation du contenu vidéo par gestion de la vidéo en vrai streaming.
  • player Flash = format encouragé par Youtube.
Lire aussi :
http://www.zdnet.fr/actualites/html5-le-remplacant-de-flash-sur-la-video-volet-4-39754865.htm

Pour intégrer la vidéo, utilisez le kit SWFObject. Téléchargez le kit d'intégration HTML5 SWFObject francisé et actualisé dans l'article suivant :

http://bloc-notes-arzhur.blogspot.fr/2012/05/kit-html5-dintegration-flash-canvasswf.html

Dans ce kit, si le navigateur ne peut lire le format SWF, un objet Canvas de substitution est affiché. Remplacez l'objet Canvas et le script s'y référant (balise <script> dans l'entête), par une balise HTML5 <video> telle que :


<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset="iso-8859-1" />
        <link href="scripts/stylesContenuAlternatif.css" rel="stylesheet" />
        <script src="scripts/swfobject.js"></script>
        <script>         
            var flashvars = {};
            var params = {};
            params.wmode = "direct";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "contenuFlash";
            swfobject.embedSWF("animation.swf", "contenuAlternatif", "100%", "100%", "10.2.0", "scripts/expressInstall.swf", flashvars, params, attributes);
        </script>
    </head>
    <body>
        <div id="contenuAlternatif">
           

        <video width="980" height="500" controls>
                <source src="monFilm.f4v" type="video/mp4" />
                <p>Coder ici le contenu alternatif au SWF et à la vidéo</p>
        </video>
          
        </div>
    </body>
</html>


2 commentaires: