JQuery Archives - InfoD 74

Experience 3D « Time dilatation »

info74 — Tue, 03 Dec 2024 15:25:28 +0000

Une nouvelle démo 3D qui permet de comprendre la dilatation du temps lors d’un voyage dans l’espace.

Vous choisissez la durée la vitesse de la fusée qui va décoller de la Terre (et aussi les durées d’accélération et décélération) et vous voyez en tant réel les différences de temps entre le référentiel de la fusée et celui de la Terre.

À la fin on voit la différence totale de temps entre les 2 référentiels. Plus la vitesse de la fusée et proche de celle de la lumière, plus il y aura de différence entre les 2 temps mesurés.

Pour en savoir plus sur ce sujet regarder cette vidéo de Science étonnante : Le paradoxe des jumeaux

L’article Experience 3D « Time dilatation » est apparu en premier sur InfoD 74.

Utiliser la balise canvas pour lire une vidéo – HTML5

info74 — Wed, 25 Jul 2012 14:25:27 +0000

La balise video de HTML permet de lire directement une vidéo dans le navigateur. Une autre possibilité que propose HTML5 est de lire une vidéo dans un

C’est ce que nous allons voir dans ce tutoriel. La première étape va être de définir le code HTML et CSS de base :




  
    

      
    
    
       Filtre :  (opacity : )

       Bruit :  (opacity : )

On a donc uniquement une balise canvas qui va servir à lire notre vidéo puis un div où on va définir 2 options de surimpression pour la vidéo : un filtre de couleur et du bruit.

Maintenant nous allons instancier un élément et la lire :

var video = document.createElement('video');
video.width = 600; video.height = 320;
$(video).html('');
video.volume = 0;
video.play();

On définit donc la vidéo avec sa taille et 2 sources pour être compatible avec la plupart des navigateurs (webm et mp4). Ensuite on rend la vidéo muette en mettant le volume a 0 et on lance la lecture. A ce stade notre vidéo n’est pas affiché puisque notre élément video n’est pas intégré à la page. Ce que nous voulons c’est que la lecture s’affiche dans le canvas donc :

var ctx = $('#video')[0].getContext('2d');
setInterval(video_to_canvas, 30);

function video_to_canvas()
{         
  ctx.drawImage(video, 0, 0, video.width, video.height);
}

On récupère le context du canvas pour dessiner dedans et on défini un appel à la fonction video_to_canvas toutes les 30 millisecondes.
Cette fonction va dessiner l’image courante de la vidéo dans la canvas.

Ajoutons maintenant les 2 fonctionnalités donc nous avons parlé tout à l’heure : un filtre de couleur et du bruit . Nous avons défini ce code HTML tout à l’heure :


   Filter :  (opacity : )

   Bruit :  (opacity : )

Nous avons pour chacune des fonctionnalités 3 champs : 1 case à cocher (fonction activée ou non), 2 champs texte (couleur et opacité). Modifions donc maintenant la fonction video_to_canvas de tout à l’heure pour prendre en compte ces champs et leurs valeurs :

function video_to_canvas()
{         
  ctx.drawImage(video, 0, 0, video.width, video.height);
  if($('#filter:checked').length > 0)
  {
    ctx.fillStyle = 'rgba('+$('#color_filter').val()+', '+$('#opacity_filter').val()+')';
    ctx.fillRect(0,0,video.width,video.height);
  }
  if($('#bruit:checked').length > 0)
  {
    for(var i=0; i<300; i++)
    {
      ctx.fillStyle = 'rgba('+$('#color_bruit').val()+', '+$('#opacity_bruit').val()+')';
      ctx.fillRect(Math.random()*video.width,Math.random()*video.height,1,2);
    }
  }
}

On dessine un rectangle de la couleur et de l’opacité choisis sur toutes la taille du canvas si le filtre est activé
On ajoute 300 « petits points de bruit » de la couleur et de l’opacité choisis à des emplacement aléatoire dans le canvas

Voila c’est terminé pour ce tuto ! A vous maintenant d’imaginer d’autres fonctionnalités avec les possibilités offertes par HTML5…

Démonstration video et canvas HTML5 – Télécharger le ZIP du tutoriel

L’article Utiliser la balise canvas pour lire une vidéo – HTML5 est apparu en premier sur InfoD 74.

HTML5 – Utiliser le localStorage

info74 — Thu, 19 Jul 2012 09:20:41 +0000

Une autre nouveauté proposé par le HTML5 va faire l’objet de ce tutoriel : le localStorage et le sessionStorage

Définition et utilité

Le localStorage et le sessionStorage permettent de faire sensiblement la même chose : stocker des données directement dans le navigateur, donc coté client. La différence entre les 2 est la même qu’il existe entre les cookies et les variables sessions : les données enregistrées avec le localStorage persistent à la fermeture du navigateur alors qu’avec sessionStorage elles seront détruites.

Cette fonctionnalité peut être très utile pour plusieurs raisons :

accélérer la rapidité d’exécution : tout ce qui est dans le localStorage n’est pas à recharger en ligne (très utiles pour les applications web mobile)
permettre d’avoir une quantité de stockage plus grande qu’avec les cookies (4Ko maximum). Apparemment la limite de poids du localStorage serait de 5Mo par domaine pour la plupart des navigateurs (à vérifier)
permettre l’utilisation d’une application web hors ligne grâce aux informations stockées en local

Fonctionnement de l’API

L’utilisation de localStorage et sessionStorage est très simple.

Enregistrer des données :

localStorage.setItem('key', data);

sessionStorage.setItem('key', data);

Lire des données :

var data = localStorage.getItem('key');

var data = sessionStorage.getItem('key');

Effacer des données :

localStorage.removeItem('key');

sessionStorage.removeItem('key');

Parcourir toutes les données stockées

var size = localStorage.length;
for(var i=0; i

Vous savez maintenant comment utiliser localStorage et sessionStorage.
J’ai mis en ligne cette petite démo pour voir le fonctionnement en live : Démonstration d’utilisation localStorage

Accéder au localStorage depuis le navigateur

Pour terminer voici quelques astuces permettant d’accéder aux informations stockées dans le localStorage depuis les différents navigateurs du marché.

Firefox

Sous Firefox vous pouvez consulter les données contenues dans le localStorage via l’extension Firebug. Ouvrez Firebug et tapez localStorage dans la console :

Chrome

Sous Chrome vous pouvez directement accéder au localStorage en passant par le menu Outils => Outils de développement, puis dans la fenêtre qui s’ouvre en bas de page => Ressources puis localStorage :

Opera

Sur Opera il suffit de taper dans la barre d’adresse opera:webstorage pour accéder au différents sites ayant stocké des données en local. Vous pouvez également modifier certaines paramètres :

Safari

Sur Safari il faut d’abord activer les Outils développeur dans Préférences => Avancées :

Ensuite faites un clic droit n’importe où dans la page puis choisissiez « Inspecter l’élément ». Vous allez retrouver exactement la même interface que sous Chrome :

Internet Explorer

Sous Internet Explorer (version 8) il n’est apparemment pas possible d’afficher directement le contenu du localStorage (du moins je n’ai pas trouver). J’ai donc fouiller un peu dans les dossiers de mon disque dur pour savoir où Internet Explorer enregistrait ces informations. Elles se trouvent dans C:Documents and SettingsLOGINLocal SettingsApplication DataMicrosoftInternet ExplorerDOMStore. Vous trouverez à cette emplacement des sous dossiers et dans chacun de ses sous dossiers un fichier XML pour chaque domaine contenant les informations du localStorage stockées pour chaque site :

Voila vous avez désormais toutes les informations vous permettant d’utiliser localStorage et sessionStorage dans vos sites et application web.

L’article HTML5 – Utiliser le localStorage est apparu en premier sur InfoD 74.

Réaliser un lecteur vidéo HTML5 personnalisé

info74 — Tue, 17 Jul 2012 13:33:48 +0000

Dans ce tutoriel nous allons voir comment réaliser un lecteur vidéo HTML5 personnalisé : voir la démonstration

La balise HTML5 permet la lecture de vidéos directement sans installation de plugins/codecs. La plupart des navigateurs propose un lecteur prédéfini mais il peut être intéressant de le personnaliser en fonction du design du site dans lequel on va l’intégrer. En effet il peut y avoir des différences de couleurs/formes suivant le navigateur utilisé comme montré ci-dessous :

Rendus des lecteurs vidéos HTML5 par défaut sous Firefox, Chrome et Opera

Formats vidéo

Avant d’attaquer le tutoriel nous allons un peu parler des différents formats vidéos qui peuvent être utilisé pour la balise . Ils sont au nombre de 3 : le Webm, le MP4, le OGV. Il est essentiel d’avoir au moins 2 de ces formats vidéo différents pour que la vidéo puisse être lue sur tous les navigateurs :

soit webm et MP4
soit OGV et MP4

En effet Webm et OGV peuvent être lu sur Firefox, Opera et Google Chrome alors que Safari et Internet Explorer 9 supporte uniquement le MP4. C’est un des inconvénient pour le moment du HTML5 pour lire des vidéo : la nécessité d’avoir 2 formats différents.

Voici les liens pour télécharger la vidéo de démo que nous allons utiliser (format webm et MP4) : Télécharger la vidéo WEBM – Télécharger la vidéo MP4

Pour que votre serveur web reconnaisse ces formats il faut ajouter un fichier .htaccess à la racine de votre dossier avec ces 3 lignes :

AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogg .ogv

Cela permettra à votre serveur web d’envoyer au navigateur les types MIME corrects pour les fichiers webm, mp4 et ogv. Ceci fait nous pouvons passer à proprement parlé au tutoriel.

Intégration HTML/CSS

Commençons par définir le code HTML de base pour l’intégration de la vidéo :






  
    
      
      
      Votre navigateur ne supporte pas la balise HTML5 vidéo
    
    
      " />
      " />

Et le minimum de CSS pour que le tout s’affiche correctement :

#content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

#video {
  z-index: 1;
}

#controls {
  position: relative;
  z-index: 2;
  background: #ccc;
  padding: 3px;
}

#time {
  width: 505px;
  display: inline-block;
}

#btn_volume {
  margin-left: 5px;
}

#volume {
  float: right;
  width: 100px;
  margin-top: 12px;
}

#fullscreen {
  float: right;
  margin-left: 15px;
  margin-top: 5px;
}

Voici les différentes fonctionnalités que nous allons mettre en place pour notre lecteur :

un bouton lecture
un bouton pause
un bouton stop
une barre de progression
un réglage du volume
un bouton pour passer en plein écran

C’est à ça que va servir tout ce qui est dans le


  " />
  " />

Les 4 images sont les 4 boutons lecture, pause, stop et plein écran, le

avec l’id time servira pour la barre de progression, l’image et le dernier

pour le réglage du volume. Télécharger les icônes utilisées dans la démo

Ajoute de librairies JavaScript

Nous allons ajouter les librairies JQuery et JQuery UI, qui nous utiliserons par la suite, notamment pour réaliser la barre de progression de la vidéo ainsi que le régleur de volume. Voici le code à ajouter dans le :

Donc les 2 librairies JQuery et JQuery UI plus la feuille de styles propre à JQuery UI.

Réalisation des fonctionnalités de lecture avec Javascript/JQuery

Maintenant que tout est prêt commençons par réaliser les 3 fonctions de bases : lecture, pause et stop. Ajoutez ce code dans le après les 3 fichiers que nous avons inclut tout à l’heure :

Donc pour chaque bouton on effectue l’action correspondante lorsque l’événement click est déclenché :

pour lancer la lecture on appelle la méthode play sur la vidéo
pour mettre en pause on appelle la méthode pause sur la vidéo
pour stopper il n’existe pas de méthode stop. Il faut appeler la méthode pause et remettre la vidéo au début : currentTime = 0

Vous pouvez testez dans votre navigateur que vos 3 boutons fonctionnent correctement.

Passons maintenant à la barre de progression de la vidéo. Celle-ci doit avancer en même temps que la vidéo se lit et être cliquable pour l’internaute puisse atteindre directement le moment voulu.

Nous allons utiliser pour ce faire le plugin Progress Bar fournit par la librairie JQuery UI. Ce plugin permet comme son nom l’indique de créer une barre de progression. Voici le code pour l’initialiser (à placer dans le $(document).ready) :

$("#time").progressbar();

Voila notre barre de progression est créer. Il faut maintenant la synchroniser avec la vidéo. Mettons donc en place une petite fonction que nous nommerons setTime et qui se chargera de faire avancer la barre de progression (à placer avant $(document).ready) :

function setTime() {
  $("#time").progressbar({ value: $('video')[0].currentTime*100/$('video')[0].duration });
}

On récupère où en est la vidéo (currentTime) et on ramène en pourcentage par rapport à la durée totale de la vidéo : duration

Maintenant il ne nous reste plus qu’a appeler cette fonction régulièrement pour que la barre de progression reste synchronisée avec la vidéo. Il suffit de rajouter cette ligne dans $(« #play »).click :

 setInterval("setTime()", 10);

On appelle la fonction setTime() toutes les 10 millisecondes, ainsi la barre de progression reste tout le temps en phase avec la vidéo.

Maintenant il faudrait que lorsque l’internaute se déplace dans la barre de progression la vidéo fasse de même. C’est la partie la plus complexe à réaliser… En effet lorsque l’utilisateur va cliquer dans la barre de progression on ne va pas pouvoir directement récupérer une valeur entre 0 et 100 qui nous indiquerait à quel endroit lire la vidéo : on va récupérer la distance en pixels entre le bord de la fenêtre du navigateur et la position du curseur de la souris. Un petit schéma pour mieux comprendre :

On va récupérer la distance rouge (distance bord de la fenêtre – curseur). La valeur qui nous intéresse c’est la verte (distance bord de la barre – curseur). Il faut donc faire rouge moins bleu (distance bord de la fenêtre – bord de la barre).

Nous allons utiliser cette fonction qui permet de déterminer la position d’un élément HTML dans la page (à placer avant $(document).ready) :

function findPos(el) {
  var x = y = 0;    
  if(el.offsetParent) {    
    x = el.offsetLeft;    
    y = el.offsetTop;    
    while(el = el.offsetParent) {    
      x += el.offsetLeft;    
      y += el.offsetTop;    
    }    
  }    
  return {'x':x, 'y':y};    
}

Ensuite placez ce code dans $(document).ready :

$('#time').click(function(e) {
  var ev = e || window.event;
  var pos = findPos(this);      
  var diffx = ev.clientX - pos.x;      
  $("#time").progressbar({value: diffx*100/$(this).width()});
  var duration = $('video')[0].duration;
  $('video')[0].currentTime = diffx*duration/$(this).width();      
});

On récupère donc la distance rouge du schéma plus haut (ev.clientX) à laquelle on va soustraire le distance bleu (pos.x). Ensuite il suffit de placer la barre de progression à l’endroit cliqué : diffx ramené en pourcentage par rapport à la longueur total de la barre de progression. Et de définir où on doit se placer dans la vidéo : diffx ramené par rapport à la durée total de la vidéo.

Voila pour la barre de progression, passons au réglage du volume.

Nous allons pour cette étape utiliser un autre plugin de JQuery UI : Slider. Celui ci va nous permettre de créer un sélecteur glissant permettant de choisir le niveau du voulme.

Voici le code pour l’initialiser (à placer dans $(document).ready) :

$("#volume").slider({
  slide: function(event, ui) {
  var volume = ui.value/100;
  setVolume(volume);
  },
  value: 50
});

On réalise ici 2 choses en même temps :

on initialise le sélecteur glissant avec une valeur par défaut à la moitié (50 sur 100)
on définit quoi faire lorsque l’internaute bougera le sélecteur : on appellera la fonction setVolume() qui va s’occuper de définir le niveau du volume qu’on lui passe en paramètre

Cette fonction n’existe pas il faut la créer :

function setVolume(value)
{
  if(value == 0)
    $("#btn_volume").css('opacity', 0.3);
  else
    $("#btn_volume").css('opacity', 1.0);
  $("#volume").slider("option", "value", value*100);
  $('video')[0].volume = value;
}

On grise/dégrise l’icône de volume si le niveau du volume est définit à 0 ou non, on définit la position du sélecteur de volume suivant le niveau de volume et enfin on définit le niveau de volume de la vidéo.

Voila notre sélecteur de volume fonctionne. On peut faire une dernière chose : permettre à l’internaute de couper le son quand il clique sur l’icône de volume :

$("#btn_volume").click(function(){
  var volume = $("#volume").slider("option", "value");
  if(volume > 0)
    setVolume(0);
  else
    setVolume(0.5);
});

On définit le volume à 0 si il n’est pas déjà coupé ou on le rétablit à la moitié si c’est le cas.

Notre lecteur vidéo HTML5 est presque terminé ! Passons à la dernière étape : le plein écran.

//plein écran
$("#fullscreen").click(function(){
      
        var video = $('#video').get(0);
        if(video.requestFullScreen) {
                //fonction officielle du w3c
                video.requestFullScreen();
        } else if(video.webkitRequestFullScreen) {
                //fonction pour Google Chrome (on lui passe un argument pour autoriser le plein écran lors d'une pression sur le clavier)
                video.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if(video.mozRequestFullScreen){
                //fonction pour Firefox
                video.mozRequestFullScreen();
        } else { //fallback pour anciens navigateurs
              //si pas déjà en pleine écran
              if($('#video').attr('rel') != 'fullscreen')
              {
                //on met la vidéo en pleine écran
                $('#video').css({position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}).attr('rel', 'fullscreen');
                //on met la barre de controles en bas de la page
                $('#controls').css({position: 'absolute', bottom: 0, marginLeft: 'auto', marginRight: 'auto'});
                //la barre apparait si on passe dessus
                setTimeout("$('#controls').animate({opacity : 0.0}, 500);", 1000);
                $('#controls').hover(function(){
                  $(this).animate({opacity : 1.0}, 200);
                }, function(){
                  $(this).animate({opacity : 0.0}, 500);
                });
              }
              else
              {
                //on remet la vidéo en mode normal
                $('#video').removeAttr('style').removeAttr('rel');
                //on remet la barre de control en dessous de la vidéo
                $('#controls').animate({opacity : 1.0}, 1).off('hover').removeAttr('style').removeAttr('style');
              }    
        }
        
      });
    $('#controls').animate({opacity : 1.0}, 1).off('hover').removeAttr('style');
  }    
});

On vérifié si la vidéo est déjà en pleine écran (attribut rel=’fullscreen’). Si elle ne l’est pas :

on l’agrandit à la taille de la fenêtre (position en 0,0 et taille 100%)
on position les contrôles du lecteur en bas de page (bottom = 0) et on la cache (opacity = 0.0)
au survol de la barre de contrôle et on la fait réapparaitre

Si la vidéo est déjà en plein écran on la ramène en mode « normal » :

on supprime les attributs ‘style’ et ‘rel’ de la vidéo
on refait apparaitre la barre de contrôle, on supprime l’événement de survol et on supprime l’attribut ‘style’

Voila notre lecteur personnalisé est maintenant terminé. Vous pouvez consulter la démonstration finale et télécharger l’archive ZIP de ce tutoriel. N’hésitez à laisser un commentaire ou des remarques si besoin.

L’article Réaliser un lecteur vidéo HTML5 personnalisé est apparu en premier sur InfoD 74.

Slider HTML5 JQUERY

info74 — Wed, 18 Jan 2012 17:30:46 +0000

Voici un petit plugin Jquery que j’ai développé. Il permet simplement d’afficher un slider photos mais en utilisant le HTML5 : balise «

Il faut inclure JQuery et le plugin dans le .

HTML :


        img/1.jpg" alt="" />
        img/2.jpg" alt="" />
        img/3.jpg" alt="" />
        img/4.jpg" alt="" />

Javascript :

$(document).ready(function() {

  $('#slider').slider_html5({width: 1024, height: 640, transition: 'fade_in', autoplay: false});

});

Paramètres du plugin :

width : largeur du slider
height : hauteur du slider
transition : type de transition (valeurs possibles : fade_in (foudu), extension (agrandissement), appear (glissement depuis la gauche)
autoplay : défilement automatique ? (activé par défaut)
time : temps en millisecondes pour le défilement automatique (5000 par défaut)
show_next_prev : activer les boutons précédent et suivant ? (activé par défaut)
show_nav :activer la navigation en dessous du slider ? (activé par défaut)

Télécharger le plugin – Démonstration

L’article Slider HTML5 JQUERY est apparu en premier sur InfoD 74.