Pour tout savoir sur la balise vidéo du HTML5, voici le troisième d’une série d’articles traitant de l’histoire, le fonctionnement et les façons d’intégrer la balise Vidéo dans vos sites web. Au programme aujourd’hui: la première partie de l’intégration d’un player vidéo: CSS/HTML

Pour ceux qui se demandaient comment intégrer le player Vidéo de Sebastien Gabriel, voici un tuto très complet sur « comment transformer un PSD en HTML ». Nottez que cet article ne traite que de la partie HTML et CSS. Pas une ligne de javascript ne sera écrite dans cet article, et la balise vidéo est en réalité une balise image. Ne vous attendez donc pas à un player fonctionnel à la sortie, il vous faudra suivre le deuxième tutoriel, pour ça, ou nous ajouterons le javascript nécessaire.

Pour bien suivre, je vous conseil de télécharger la source et de la lire en parallèle

Demo

I – Travail préliminaire

La première chose à faire, pour gagner du temps ensuite, est de découper le psd. Oui, c’est pas le plus marrant, mais autant commencer par ça. On note aussi quelques tailles: la largeur et longueur du player, la taille des boutons en bas, des miniatures de vidéos. On pense aux trames ( Ces images de quelques pixels à peine qui se répètent à l’infini pour former un background), ça peut servir. Sur notre exemple, il y a deux trames: un carré de 2 sur 2, dans le slide, et une ligne de 1 pixel de large, pour les barres de progressions.

Bon, la torture est terminée, nous avons nos ressources et nos cotes. Maintenant, faisons un schéma des différentes parties de notre maquette. Nous voyons ici le slide, la barre de contrôles, et la vidéo en fond. Nous ne traîterons pas réelement de la vidéo, qui est juste une balise <video> à mettre en fond, occupons nous donc de du slide.

II – Le slide

Commençons par la base: Notre slide à une taille définie, donc nous lui réglons sa largeur et sa hauteur. Il doit ensuite être au dessus de tout le reste, et pour ça, il faut utiliser le z-index.

Quelles sont les particularités de ce slide ? Il a une barre de défilement, et une liste de miniatures. En HTML/CSS, cela se traduit par un overflow et une liste (<ul>).

L’overflow permet de gérer ce qui se passe quand le contenu d’un bloc dépasse de son conteneur. Par exemple, notre liste de miniature dépasse du conteneur à partir du moment ou nous avons 3 images. Par défaut, le contenu devrait donc dépasser, et se voir, comme si le bloc n’était pas fini.

Nous aimerions pouvoir naviguer dedans avec un ascenceur, donc nous choissisons un overflow:auto.

Maintenant, notre slide a aussi une autre particularité : il doit pouvoir se ranger sur la gauche. Pour ça, c’est très simple: on met un overflow:hidden (qui permet de masquer le contenu qui dépasse d’un bloc) sur le player lui même, et on met une margin-left négative égale à sa largeur au slide. Au survol, ensuite, on lui rend une margin-left égale à 0.

Premier soucis: quand le volet est caché, il ne peut pas être survolé… Nous pourrions laisser dépasser un peu du slide, pour pouvoir le survoler, mais d’une, c’est pas pratique, de deux, c’est assez moche.

Ma solution est simple: on met le ul dans une div, et on met une largeur un peu plus grande que le <ul>, et on lui applique la margin négative de la taille du slide. Quelques  transitions CSS3, et nous voilà avec notre slide!

III – Les contrôles

Pour nos contrôles, nous allons aussi utiliser une liste. La différence est que nous allons mettre un float:left sur nos <li>, ainsi, les boutons vont tous bien se ranger dans l’ordre.

Nos boutons en eux mêmes sont des <a> avec un background, ce qui nous permettrais de mettre des sprites pour avoir plusieurs état (survol, activés, au clic, …). Seul soucis : les <a> ne peuvent pas avoir de taille, car çe ne sont pas des blocs, mais des inlines. Nous ajoutons donc à notre CSS un display:block. Pour l’effet de survol, ajoutons un petit opacity. Evidemment, c’est moins sympa qu’un sprite, mais pour notre exemple, ça sera tres bien.

Maintenant, les barres de progressions/volume. Ce sont des divs imbriquées. Le « fond de la barre » sert de div parentes, et les autres divs sont dedans. En faisant comme ça, nous pouvons donner aux différentes barres une taille en pourcentage, qui sera en fonction de lu fond de la barre. 100% voudra dire que la barre est pleine, et 0% qu’elle est vide, et c’est exactement ce dont on a besoins. (Notez que leur taille est donné en % dans le HTML pour l’instant, mais sera contrôlé par javascript en réalité).

IV – Conclusion

Voilà, le player est intêgré et surtout… non fonctionnel. Il lui manque la balise vidéo, bien sur, mais surtout les contrôles javascript pour interragir avec la vidéo, qui seront le sujet de notre prochain tutoriel.