• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

Comment intégrer un player video HTML5 - partie HTML/CSS

par Benjamin SANCHEZle 03/06/2011

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

Player

Demo

Player

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.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

3Commentaires

  • Avatar_thumb
    Jérôme

    le 05/06/2011 | #1

    Merci pour ce tuto, tu devrais peut être spécifier la compatibilité avec les navigateurs car pour l'instant la balise vidéo n'est pas prise en compte par tous les navigateurs...juste une petite suggestion.

  • Avatar_thumb
    Benjamin SANCHEZ

    le 06/06/2011 | #2

    La balise vidéo est prise en compte par la dernière génération de tout les navigateurs. C'est les codecs, qui ne sont pas pris en compte par tout les navigateurs, et effectivement, une liste précise pourrait être intéressante. Je t'en trouverais une et te la posterais.

  • Avatar_thumb
    Yves

    le 01/08/2011 | #3

    Merci pour ce tuto il est vraiment bien sympa.
    En ce qui concerne la balise vidéo elle est effectivement supportée par tous les browsers "dernières générations" mais il faut bien faire attention au format de la vidéo (.mp4, .ogv, .webm).

Ecrire un commentaire

captcha

Ouvrir