Blog d'un Éternel Geek

Oyez Oyez la Foule internet. Flash est mort Vive le nouveau Html5

http://vivageek.livehost.fr/data/images/codge/flashdied.jpg

 

Steve Job l'avait annoncé il y a déjà plus de 4 ans en arrière que Flash serait progressivement remplacé par HTML5. Quoi de plus normal me direz vous entre le choix qui s'impose à utiliser un système lié à une société qui plus est gourmand en ressource et un système libre et surtout économique.

On pensait que CSS3 allait réduire HTML5 à une simple succession d'architecture web mais le bougre n'a pas dit son dernier mot et ses dernières innovations promettent de belles choses.

 

On attendait les dernières mises à jour Firefox (il est comme ce petit dernier de la classe qu'on attend toujours pour fermer la porte de l'école) afin de permettre de lancer la bête. On nous parler vidéo en background, en intégration page web et bien d'autres nouveautés. Aujourd'hui on va voir en détail ce qu'il en est de HTML5 versus Vidéo.

 

Comme le montre cette vidéo amusante et bien réalisé, HTML5 était un peu le rêve des attentes des internautes, webmaster et designer.

 

HTML5 a préparé le futur de notre navigation et bien plus encore. Des possibilités multiples encore irréalisable jusqu'à il y a un an comme partager des photos, boutique, lire les nouvelles et rechercher des informations n'importe où sur n'importe quel appareil.

 

HMTL5 fournit un ensemble de caractéristiques Interopérable. Ce qui n'était pas le cas avant.

 

HTML4 standard                                                HTML5 Interopérabilité

http://vivageek.livehost.fr/data/images/codge/operabilite-compatibilite.png                                                        http://vivageek.livehost.fr/data/images/codge/operabilite-interoperabilite.png

 

Définition :

L’interopérabilité est la capacité que possède un produit ou un système, dont les interfaces sont intégralement connues, à fonctionner avec d'autres produits ou systèmes existants ou futurs et ce sans restriction d'accès ou de mise en œuvre.

 

HTML5 a permis de simplifier le langage de manière significative mais aussi de mieux structurer les pages de façon plus logique.

 

Voici la plupart des balises qui sont retenues :

 

< header > Balise dédiée à l’en-tête d’une page, généralement vouée plus à sa présentation qu’à son contenu.

 

< footer > Même logique que précédent, mais concernant le pied de page, partie où se trouvent communément les informations de moindre importance, comme le sitemap, les coordonnées extérieures, les mentions légales …

 

< nav > Spécifique pour la navigation interne du site web, le plus souvent en barre horizontale ou latérale.

 

< section > Permet de définir les grandes parties d’une page. Comme par exemple celles des articles, des actualités, des réseaux sociaux ou une présentation générale …

 

< article > Balise spéciale concernant l’emplacement d’un article de type blog, comme élément entier. Plusieurs articles pouvant être présents dans une section.

 

< aside > Elle concerne les éléments présents dans la barre latérale, qui servent habituellement à une navigation secondaire, un accès rapide aux contenus associés, ou bien à des call-to-action.

 

< embed > Sert à déclarer un contenu externe qui est chargé à l’intérieur de la page, tel qu’une vidéo, un encart publicitaire, une offre partenaire, etc.

 

 

Voici ce que cela donne mis en pratique sur une page Web :

http://vivageek.livehost.fr/data/images/codge/pageweb.jpg

 

Ce nouveau découpage permet d'une part une meilleure logique de présentation web mais surtout une meilleure compréhension de la page. Ne pas oublier que le point commun de tout langage est qu'ils puissent être compris par le plus grand nombre.

 

Avec HTML5 on y est arrivé et ces petits détails sont importants.

 

Nous allons voir ensemble la fonction vidéo propre à HTML5 qui a fait beaucoup couler d'encre. Nous verrons plus tard les avantages tiré de cette simplification à l'extrême d'HTML5.

 

C'est Google qui a tiré le premier sur Flash en préférant mettre son service youtube par défaut en HTML5.

 

Lecteur vidéo HTML5 YouTube

 

 

Google s'est justifié en donnant comme réponse :

 

Flash est une technologie brevetée, détenue par une entreprise, une source fréquente de vulnérabilités critiques qui exposent des centaines de millions d'utilisateurs d'Internet à des attaques sur leurs ordinateurs et tout ce qu'ils protègent.

On ne peut nier les nombreuses failles de Flash qui ont value des frayeurs chez les utilisateurs tant qu'ils se posaient la question de son avenir. HTML5 a répondus aux exigences et plus il a entériné la décision en proposant une solution plus rapide, moins fragile et moins gourmande.

 

Repris en boucle par Mozilla et d'autres grands groupe cela a mis un coup sûr à Adobe Flash.

Ce qui nous ramène à Youtube. Maintenant, vous pouvez accéder à toutes les vidéos Youtube sans avoir à utiliser des logiciels propriétaires d'Adobe, aussi longtemps que votre navigateur prend en charge la version du W3C du logiciel propriétaire d'Adobe. Si vous utilisez Firefox, vous pouvez accéder à toutes les vidéos de Youtube sans Flash, sauf que, dans certains cas, vous aurez besoin de leur version du W3C-normalisé "Encrypted médias Extension", ce qui exige que vous utilisez un logiciel propriétaire d'Adobe.

 

Mais qu'en est-il de cette nouvelle fonction ? Comment la mettre en œuvre ?

 

Cette vidéo est un bel étalage de la beauté d'HTML5.

 

Balise

La syntaxe est simpliste à l'instar d'HTML5 :

 

<video controls src="http://vivageek.livehost.fr/video.ogg">Ici la description alternative</video>

 

Comme vous le constatez elle se compose de video et de src l'adresse url de cette vidéo.

 

Cela ressemble beaucoup à la balise connus depuis img. Pour définir les dimensions de la vidéo idem avec les attributs height et width.

 

Cela ne s'arrête pas la HTML5 permet également l'affichage de plusieurs source d'adresse vidéo ainsi:

 

<videowidth="320"height="240"controls="controls"><sourcesrc="http://vivageek.livehost.fr/video.mp4"type="video/mp4" />

<sourcesrc="http://vivageek.livehost.fr/video.webm"type="video/webm" /><sourcesrc="http://vivageek.livehost.fr/video.ogv"type="video/ogg" />

Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.

</video> 

 

Ce qui donne dans le code général en respectant les standards HTML5 : 

 

<!DOCTYPE html>

<html>

<header>

<body> 

<video width="320" height="240" controls><sourcesrc="http://vivageek.livehost.fr/video.mp4"type="video/mp4" />

<sourcesrc="http://vivageek.livehost.fr/video.webm"type="video/webm" /><sourcesrc="http://vivageek.livehost.fr/video.ogv"type="video/ogg" />

</video>

 </body>

</header>

</html> 

 

Très simple non ? 

 

Pourquoi plusieurs type de vidéo ?

 

Suivant les navigateurs vous pouvez avoir des soucis de lecture car vous être bien conscient que l'on demande au navigateur de comprendre et lire ce qu'on lui montre ce qui signifie que s'il ne peut pas le faire il lira un autre type jusqu'à ce qu'il trouve le type qu'il lui convienne. Cela demande de convertir sa vidéo en plusieur codec les 3 principaux permettant de proposer sur la plupart des navigateurs étant : 

 

  • MP4 = MPEG 4 files with H264 video codec et AAC audio codec
  • WebM = WebM files with VP8 video codec etVorbis audio codec
  • Ogg = Ogg files with Theora video codec et Vorbis audio codec

 

Ceux ci vous permettront de satisfaire la majorité des navigateurs. C'est le point négatif de cette technique.On peut comme avec flash définir en plus du type, format et différents attributs qui permettent de personnaliser la lecture et l'affichage de notre vidéo.

 

Voyons cela ensemble. 

controls                 permet d'afficher les commandes audio / vidéo standard. 2 choix true ou false.

autoplay="true" Lancement automatique de la vidéo 2 choix true ou false.

muted="muted" Lorsqu'il est présent, il précise que la sortie audio de la vidéo doit être coupée.

preload="auto" spécifie si et comment l'auteur pense que la vidéo doit être chargé lorsque la page se charge. 3 réglages possible :  

  • auto : le navigateur chargera la vidéo en entier de la page
  • Metadata: le navigateur ne chargera que les Metadata de la vidéo ·        
  • none: Le navigateur ne chargera pas la vidéo  

 

Le petit plus sympathique, on peut à l'aide de l'attribut poster="image.jpg"     placer une image par défaut dans l'espace de la vidéo qui s'effacera au lancement de celle-ci. Beaucoup plus agréable visuellement.  

L'attribut loop indique que la lecture doit s'effectuer en boucle.

Afin de permettre la précision au navigateur.

On peut  via un .htaccess le signaler ainsi :

 

# ADD MIME TYPES FOR VIDEO FILES

AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm

 

J'ai repris le tableau de W3schools qui montre bien la disparité entre les navigateurs pour les codecs.

Browser

MP4

WebM

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES
from Firefox 21
from Firefox 30 for Linux

YES

YES

Safari

YES

NO

NO

Opera

YES
From Opera 25

YES

YES

Conclusion:

Malgré une différence certaine entre les navigateurs et les codecs qui poussent à devoir convertir ses fichiers en 3 fois, le résultat est plus agréable et stylé. De plus, la facilité du codage mais aussi le peu de demande pour charger la page par rapport à flash en fond le candidat idéal du futur de la vidéo.

 

Je ne sais pas si flash prépare une contre-offensive mais il serait temps car à ce rythme la je pense qu'il fera partis de l'histoire ancienne.

 

Moi dès que je change de serveur je mettrais mes vidéo en HTML5 directement comme mes images via mon propre site et se sera plus gratifiant pour moi et élégant pour les internautes.

 

un Exemple chez video.js : http://www.videojs.com/

 

 

Merci à bientôt.

 

 

 

 






 Geek me     Je suis un Geek dans l'âme. 18 ans à silloner internet pour récolter des informations afin de comprendre son fonctionnement. Idéalement j'étudie également le comportement humain.

C'est afin de vous partager mes connaissances que j'ai ouvert ce blog alors je vous souhaite une bonne lecture.



À lire également


Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée.

Quelle est la troisième lettre du mot gioyuc ? :