jeudi 13 septembre 2012

Accordéon simpliste

L'idée est de créer un accordéon simpliste pour afficher des infos uniquement lorsque l'utilisateur sélectionne un élément.

avec un html très simple :

<div class="toggler">
Je suis un déclencheur
</div>
<div class="element">
   je suis le contenu
</div>

Et une fonction jquery tout aussi simple.

function initToggler()
{
    $(document).on('click','.toggler'function(){
        var $this $(this);
        $this.addClass('open').next('.element').slideDown();
    });
    $(document).on('click','.open.toggler'function(){
        var $this $(this);
        $this.removeClass('open').next('.element').slideUp();
    });
}
$(initToggler);

Le jsfiddle pour tester :
http://jsfiddle.net/powerMugen/Fj9HU/


Et voilà c'est tout pour aujourd'hui.

samedi 23 juin 2012

Le streaming mp4 avec mediaelement.js

Avec l'utilisation de mediaelement.js, est possible que des vidéos mp4 au format video h.264 ne se lisent pas immédiatement avec IE et Firefox mais uniquement lorsque le fichier est chargé en entier.

En effet ce format est lu via le lecteur flash de mediaelement et le "streaming" ne fonctionne parfois pas du tout.

Il semble que ce problème soit lié à un mauvais en-tête du fichier .mp4 (le MOOV atom certainement cf : http://www.adobe.com/devnet/video/articles/mp4_movie_atom.html)

Heureusement pour nous il existe un outil adobe air qui permet de réécrite l'index des fichiers mp4 : 

http://renaun.com/blog/code/qtindexswapper/ 

(vous pouvez aussi trouver un logiciel en python qui le fait aussi https://github.com/danielgtaylor/qtfaststart)

 Le fichier .air s'installe comme un package linux une fois que adobe air est installé sur un poste, il faut ensuite choisir les vidéos à modifier.




Et c'est merveilleux, la nouvelle vidéo va se charger et se lire en "streaming" partout grâce à l'excellent mediaelement.js.


Bug et solution pour l'inspection css dans chrome

Inspecter le css dans la console de chrome est vraiment pratique, par contre quand les sauts de lignes ne sont pas interprétés on se retrouve avec un fichier d'une seule ligne et donc c'est peu intéressant pour connaitre la ligne d'une propriété et l'éditer.

Le bug vient de l'interprétation unicode des sauts de lignes : CR / LF / NL  http://fr.wikipedia.org/wiki/Fin_de_ligne

En général les éditeurs de textes peuvent indiquer quels sont les fins de lignes des fichiers utilisés.
Par exemple dans notepad++ on peut afficher les fins de lignes.

Sur cet exemple on voit que le même fichier est d'un côté encodé avec des fins de lignes en CR et en dessous en CR LF.

Et c'est cet encodage de fin de ligne qui provoque un "bug" dans Chrome.

En effet, le fichier en CR est interprété par la console comme un fichier d'une ligne.
Et donc toutes mes propriétés se retrouvent à la ligne  1.














J'ai trouvé une première solution via Intype ! Cet éditeur ultra léger est vraiment pratique et il permet de changer l'encodage de fin de ligne des fichiers.


Et voilà le bug de la console de chrome est résolu et en plus vous utilisez désormais un éditeur de texte vraiment bien qui permet de gérer des projets !

Edit : et en fait je découvre aujourd'hui grâce à un collègue que Notepad++ sait le faire aussi ! Merveilleux :