HTML5 Archives - InfoD 74

Système solaire avec gravité Newtonienne

info74 — Sat, 24 Dec 2022 14:18:26 +0000

Une autre démo 3D demo faite avec Three JS « Système solaire avec gravité Newtonienne » :

Vous pouvez changer les masses, les positions et les vélocités du soleil, de la terre et de la lune.
Et aussi définir la position de la caméra et de l’objet à suivre.
Il est également possible de voir les trajectoires des objets et quelques statistiques (nombre de collision, distances minimales et maximales)

L’article Système solaire avec gravité Newtonienne est apparu en premier sur InfoD 74.

Universe Experience

info74 — Wed, 14 Dec 2022 12:02:25 +0000

Une petite démonstration 3D que j’ai appelé « Universe Experience » :

Elle simule les interactions entre les particules dans notre univers. Vous pouvez changer leurs paramètres : nombre, masse et charge. Et aussi modifier les distances pour la gravité et le magnétisme.

Développée avec Three JS et inspiré de cette vidéo « Artificial Particle Life » :

https://www.youtube.com/watch?v=0Kx4Y9TVMGg

L’article Universe Experience est apparu en premier sur InfoD 74.

Iron Maiden 3D Concert (démo Three JS)

info74 — Tue, 29 Aug 2017 09:19:23 +0000

Une petite démo de ce qu’on peut faire avec Three JS (moteur 3D webGL). Cliquez sur l’image pour accéder à la démo :

Le site officiel de Three JS : https://threejs.org/

Un petit tuto pour bien débuter avec Three JS : https://www.alsacreations.com/tuto/lire/1572-webgl-3d-three-canvas-threejs.html

L’article Iron Maiden 3D Concert (démo Three JS) est apparu en premier sur InfoD 74.

Island – Démo WebGL (Babylon JS)

info74 — Thu, 21 Jan 2016 16:44:56 +0000

Une petite démo WebGL crée avec l’excellente librairie BabylonJS :

Je mettrais à jour régulièrement cet article au fur et à mesure de l’avancement du projet

Mise à jour du 01/02/2016

Ajout d’un papillon et d’un peu de végétation :

L’article Island – Démo WebGL (Babylon JS) est apparu en premier sur InfoD 74.

Les websocket – Tutoriel avec Node JS

info74 — Wed, 17 Apr 2013 15:29:29 +0000

Qu’est ce que les websockets ?

Définition de wikipédia : Le protocole WebSocket vise à développer un canal de communication bidirectionnel et full-duplex sur un socket TCP pour les navigateurs et les serveurs web.

C’est une des technologies apportées par HTML5. En fait il s’agit de permettre l’ouverture d’une connexion réseau entre une page web et un serveur. Voici un petit schéma pour mieux comprendre :

Les avantages sont multiples :

permettre au serveur d’envoyer des données vers les pages connectées (impossible avec Ajax)
économie de bande passante. On ouvre la connexion vers le serveur et on transmet tout ce que l’on veut dans les 2 sens (page vers serveur, serveur vers page).
rapidité de transmission des données

Node JS

Node JS est un des nombreux serveurs permettant de faire du Web Socket. C’est celui que nous allons utiliser dans ce tutoriel.

Helloworld

Téléchargez la dernière version et installez-la. Ensuite créer un fichier test.js dans C:Progam Filesnodejs
Dans ce fichier placer le code suivant :

console.log('Helloworld');

Notre fichier serveur est fait. Il faut maintenant lancer votre serveur. Pour cela ouvrez une invite de commande et placez-vous dans le dossier nodejs : cd C:Progam Filesnodejs puis taper simplement node test.js. Vous devriez voir apparaitre Helloworld.

Socket IO

Maintenant pour faire communiquer une page web avec notre serveur nous allons utiliser le plugin socket.io. Toujours dans votre invite de commande tapez : npm install socket.io

Si vous obtenez des erreurs pendant l’installation relancez votre invite de commande en mode administrateur (cliquez droit puis ‘Exécuter en tant qu’administrateur’).

Une fois l’installation de socket.io terminé reprenez votre fichier test.js et placez y ce code :

var http = require("http");
httpServer = http.createServer()
httpServer.listen(8888);
var io = require('socket.io').listen(httpServer);
io.sockets.on('connection', function (socket) {
   socket.emit('connected', 'Connexion ok');
});

On fait écouter notre serveur sur le port 8888 et lorsque l’on reçoit une connexion on émet l’événement connected avec comme données envoyés au client : ‘Connexion ok’.

Maintenant nous allons créer une page web qui va communiquer avec notre serveur : on va se connecter sur le serveur sur le port 8888 et attendre l’événement connected. Avant de pouvoir réaliser ça on va devoir télécharger la version client de socket.io : socket.io.js. Placer ce fichier dans le même dossier que votre future page web. Voici le code de la page en question :

Maintenant lancez votre serveur (node test.js) et accédez à votre page web. Vous devriez voir ‘Connexion ok’.

Pour faire simple il y a 2 choses à retenir :
quand vous voulez envoyés des données : socket.emit(‘event’, data);
quand vous recevez des données : socket.on(‘event’, function(data){ });

Et ce que vous soyez coté client ou coté serveur.

Du coté du serveur socket.broadcast.emit(‘event’, data); permet d’envoyer des données à tous les client connectés.

Vidéo de démonstration

Pour terminer voici une petite démonstration de communication entre un IPhone et un Firefox sur un PC de bureau grâce à Node JS :

Cette technologie ouvre bien des portes, notamment dans le domaine du jeux vidéo et des applications multi-utilisateurs.

L’article Les websocket – Tutoriel avec Node JS est apparu en premier sur InfoD 74.

Responsive Web design et media queries

info74 — Thu, 17 Jan 2013 15:58:24 +0000

Qu’est ce que le Responsive Web Design

Le Responsive Web design est un terme que l’on rencontre de plus en plus souvent dernièrement. Sous ce terme se cache en fait un concept simple : le design d’un site ou d’une application web va s’adapter automatiquement à l’appareil (PC de bureau, Smartphone, IPad, etc) qui est utilisé suivants ses caractéristiques techniques (la taille de l’écran principalement).

Le tutoriel Media Queries

Une des manières de faire du Responsive Web Design : les Media Queries de CSS3. Je vous propose donc un tutoriel sur les Media Queries dans cette article. Je ne vais donc pas détailler tous les aspects des Media Queries (Vous pouvez consulter l’article d’Alsa Creations à ce sujet : Les Media Queries CSS3), le but étant de montrer directement leur utilisation dans un exemple (Voir la page d’exemple de Responsive Web design).

Pour ce tutoriel nous allons donc créer une page qui va s’adapter pour 3 types de résolutions :

PC de bureau
Tablettes
Smartphones

Commençons par le gabarit de notre page HTML. Notre page va se composer d’une bannière, un menu, un contenu principal (texte + images), une liste d’articles et un pied de page. Voici le code :

Lien 1
Lien 2
Lien 3
Lien 4

Titre
Mauris viverra augue purus, vitae ornare tortor. Sed fringilla pharetra luctus. Proin vehicula, erat ac egestas dictum, elit lectus pharetra massa, vel consequat massa quam cursus tellus. Integer sed augue arcu. Proin vestibulum urna fringilla mauris convallis pretium. Quisque mattis euismod turpis ut feugiat. Quisque lobortis, magna sit amet convallis lacinia, magna nibh mattis elit, nec mollis orci sapien ultrices lectus. Pellentesque egestas ipsum et libero viverra ut blandit dolor lacinia. Cras eget nulla a nulla tristique ullamcorper. Aenean ut lorem non diam dictum luctus eu vel lorem. Donec interdum rhoncus dui. Fusce ac massa nec augue aliquet interdum. Etiam egestas, justo vel lacinia sagittis, lorem purus rutrum lorem, non tristique massa dui ut erat.

Mauris viverra augue purus, vitae ornare tortor. Sed fringilla pharetra luctus. Proin vehicula, erat ac egestas dictum, elit lectus pharetra massa, vel consequat massa quam cursus tellus. Integer sed augue arcu. Proin vestibulum urna fringilla mauris convallis pretium. Quisque mattis euismod turpis ut feugiat. Quisque lobortis, magna sit amet convallis lacinia, magna nibh mattis elit, nec mollis orci sapien ultrices lectus. Pellentesque egestas ipsum et libero viverra ut blandit dolor lacinia. Cras eget nulla a nulla tristique ullamcorper. Aenean ut lorem non diam dictum luctus eu vel lorem. Donec interdum rhoncus dui. Fusce ac massa nec augue aliquet interdum. Etiam egestas, justo vel lacinia sagittis, lorem purus rutrum lorem, non tristique massa dui ut erat.

dfdfd

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna sem, tempor sit amet posuere non, semper non magna. Praesent felis urna, congue quis tempor non, imperdiet id lacus.

dfdfd

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna sem, tempor sit amet posuere non, semper non magna. Praesent felis urna, congue quis tempor non, imperdiet id lacus.

dfdfd

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna sem, tempor sit amet posuere non, semper non magna. Praesent felis urna, congue quis tempor non, imperdiet id lacus.

Footer

Maintenant commençons avec notre feuille de styles CSS. Nous allons dans un premier temps mettre en place le CSS pour la version bureau, puis nous viendrons ajouter les Media Queries pour les versions tablettes et Smartphones. Voila la feuille de styles de base :

body {
  display: block;
  width: 900px;
  margin: 0 auto;
  font-size: 14px;
}

header {
  background-image: url(img/banner.jpg);
  height: 150px;
  width: 100%;
}

menu {
  height: 30px;
  background: #4d68b3;
  margin: 0;
  padding: 10px; 
}

menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

menu ul li {
  float: left;
  margin-right: 10px;
  background: #fff;
  padding: 5px; 
}

#main {
  background: #a4b9f6;
  padding: 10px;
}

#main #content, #main #right { 
  float: left;
}

#main #content {
  width: 600px;
  padding-right: 10px;
}

#main #right {
  width: 260px;
  clear: after;
}

#main h1 {
  font-size: 22px;
  font-weight: bold;
}

#main h2 {
  font-size: 18px;
  font-weight: bold;
}

#right article {
  border-bottom: 1px solid #4D68B3;
}

.fl_left {
  float: left;
}

img.fl_left {
  padding-right: 5px;
}

footer {
  text-align: center;
  padding: 10px;
  background: #dcdcdc;
}

.clear {
  clear: both;
}

Nous avons les styles de bases qui permettent d’obtenir ce résultat :

Passons maintenant aux fameuses Media Queries. Notre site faisant 900px de large nous allons devoir spécifier 2 alternatives de styles :

pour les résolutions de largeur entre 900px et 768px (tablettes)
pour toutes les résolutions inférieures à 768px (Smartphone)

Pour les résolutions de tablettes nous allons réduire le body à 768px de large, afficher une bannière à la bonne taille, faire en sorte que le contenu principal prennent 100% de la largeur et que les articles de droite s’affichent en dessous. Pour les résolutions inférieures (Smartphones) on donne simplement au body une largeur de 100% pour que tout l’écran soit utilisé et on affiche une bannière encore plus petite. Voila le code CSS Media Queries à ajouter au fichier style.css pour réaliser tout ça :

@media screen and (max-width: 768px) {
  body {
    width: 100%;
  }

  header {
    background: #DCDCDC url(img/banner_mobile.jpg) top left no-repeat;
    height: 104px;
  }

  #main #content, #main #right {
    width: 100%;
    float: none;
  }
}

@media screen and (min-width: 769px) and (max-width: 900px) {
  body {
    width: 768px;
  }

  header {
    background-image: url(img/banner_tablette.jpg);
  }

  #main #content, #main #right {
    width: 100%;
    float: none;
  }
}

On voit que les Media Queries sont très simples à utiliser : on donne les conditions d’applications des styles contenus dans la Media Queries (ici min-width et max-width, mais il existe de nombreux autres paramètres pour les Media Queries. Voir : http://www.w3.org/TR/css3-mediaqueries/)

Voila un petit aperçu du résultat dans Chrome :

Et Internet Explorer dans tout ça ?

Les Media Queries sont supportées par la plupart des navigateur du marché (je n’ai rencontré aucun problème sous FireFox, Chrome, Opera et Safari). Mais comme souvent avec les nouvelles technologies du Web Internet Explorer n’est pas le plus en avance des navigateurs ! Les Medias Queries ne dérogent pas à ce constat car si vous testez sur Internet Explorer 8 cela ne fonctionnera pas. 2 raisons à cela :

les versions d’Internet Explorer inférieures à 9 ne prend pas en charge les nouvelles balises HTML5 (section, article, etc)
les versions d’Internet Explorer inférieures à 9 ne gère pas les Media Queries

Heureusement il existe des solutions Javascript pour résoudre ces 2 problèmes. Pour qu’Internet Explorer gère les balises HTML5 nous allons utiliser html5shiv et pour les Media Queries Reponsd.js. Ces 2 solutions sont très simples à utiliser puisqu’il suffit d’ajouter un fichier JavaScript pour chacune :

Une fois ceci fait notre Responsive Web Design fonctionne également sous Internet Explorer 8 (6 et 7 aussi normalement, mais je n’ai pas testé).

Voir la page du tutoriel en ligne

Voila ce petit tutoriel est terminé, j’espère qu’il vous aura aidé. Il y a bien sûr beaucoup d’autres aspects des Media Queries que je n’ai pas abordé ici (comme la détection de l’orientation de l’écran par exemple) mais vous connaissez maintenant les bases de leur utilisation. Si vous voulez en savoir plus je vous conseille l’article d’Alsa Creation dont j’ai déjà donné le lien plus haut : Les Media Queries CSS3

L’article Responsive Web design et media queries est apparu en premier sur InfoD 74.

Utiliser WebGL avec CubicVR

info74 — Thu, 06 Dec 2012 14:11:59 +0000

Qu’est ce que WebGL ?

WebGL, voila une des grandes nouveautés qu’amène HTML5 ! En effet WebGL permet de faire tourner des applications 3D dans votre navigateur sans installation préalable d’un quelconque plugin (Flash ou Java pour ne citer qu’eux).

Démonstration WebGL (CubicVR)

WebGL est donc un standard de HTML5 qui est déjà pris en charge par de nombreux navigateurs.

Compatibilité de WebGL

Voici une démo que j’ai réalisé et que nous allons mettre en place pas à pas dans ce tutoriel : https://www.info-d-74.com/demos/webGL_CubicVR_HTML5/

A noter que j’ai réussi à la faire tourner uniquement dans Firefox (16.0.2) et Chrome (23.0.1271.95). Sous Opera l’affichage ne se fait pas correctement (bug de textures) et Safari ne prend en charge WebGL qu’à partir de la version 5.2 apparemment. Pour IE8, 9 et 10 il existe IEWebGL qui permet la prise en charge de WebGL. Malheureusement sous IE8 il y a de nombreuses erreurs javascript lors du chargement des librairies CubicVR (peut être que cela fonctionne sous IE9 et 10, je n’ai pas testé).

Un autre point important, WebGL est souvent désactiver par défaut : il vous faut l’activer manuellement. Voici pour chaque navigateur les manipulations à faire :

FireFox : taper about:config dans la barre d’adresse, puis taper ‘WebGL’ dans la barre de recherche. Mettez true à l’option webgl.force-enabled
Chrome : activé par défaut il me semble
Safari : allez dans les préférences puis ‘Avancées’ et cocher ‘Afficher le menu Développement…’. Ensuite allez dans le menu ‘Développement’ et cliquez sur ‘Activer WebGL’
Opera : taper opera:config dans la barre d’adresse, puis taper ‘WebGL’ dans la barre de recherche. Mettez 1 à l’option Enable WebGL
Internet Explorer : installez IEWebGL

Télécharger CubicVR

CubicVR est un moteur 3D disponible en Javascript et C++. Je le trouve simple d’utilisation et puissant. Il propose de nombreuses possibilités :

prise en charge des fichiers 3D Collada (tuto pour plus d’infos)
gestion de la physique
prise en charge du bump mapping
etc…

Nous allons donc l’utiliser dans ce tutoriel pour réaliser la démo vu plus haut. Rendez-vous à cette adresse pour télécharger CubicVR : https://github.com/cjcliffe/CubicVR.js/

Dézipper le contenu de l’archive. Vous pouvez tester les exemples présents dans le dossier samples. Attention pour fonctionner il faut placer les fichiers sur un serveur Web (local ou distant), si vous ouvrez le fichier directement depuis votre disque dur dans votre navigateur cela ne fonctionnera pas.

Charger CubiCVR

Commençons par définir notre page HTML5 et chargeons CubicVR :

On charge CubicVR et Ammo (qui servira pour la gestion de la physique) et on demande d’initialiser WebGL au chargement de la page. Ensuite on définit la scène avec une caméra qui affichera la scène de la taille du canvas avec un champ vision de 80°.
A ce stade si vous testez vous obtiendrez une page noir qui indique que CubicVR a bien initialisé un canvas WebGL sur toute la page.

Afficher un sphère

Nous allons maintenant ajouter une sphère à la scène. Ajoutez ce code après var scene = new CubicVR.Scene(canvas.width,canvas.height, 80); :

var sphereMat = new CubicVR.Material({
  color: [1.0, 0.2, 0]
});
var sphereMesh = new CubicVR.Mesh({
  primitive: {
    type: "sphere",
    radius: 1.5,
    lat: 60,
    lon: 60,
    material: sphereMat
  }, compile: true
});
var sphereObject = new CubicVR.SceneObject({mesh:sphereMesh, position:[0,0,0]});
scene.bindSceneObject(sphereObject);
scene.camera.position = [-10, 0, 0];
scene.camera.target = [0, 0, 0];

CubicVR.setGlobalAmbient([1.0,1.0,1.0]);
CubicVR.MainLoop(function(timer, gl) {
  scene.render();
});

On définit un matériau avec une couleur Orange pour la sphère ([1.0, 0.2, 0]).
On crée ensuite la sphère avec un rayon de 1.5, latitude et longitude de 60 et on l’ajoute à la scène en position 0, 0, 0. La caméra est ensuite placer en -10, 0, 0 et regarde vers la sphère (0, 0, 0). Enfin on définit une lumière ambiante blanche (sinon on ne verra rien…) et on spécifie affiche le rendu de la scène. Voilà le résultat que vous devez obtenir :

Ajoutons maintenant une texture pour rendre notre sphère plus jolie. Voici la texture que nous allons utiliser : Texture metal

Modifions note code comme ceci :

var sphereMat = new CubicVR.Material({
  textures: {
    color: "textures/metal.png"
  }
});
var sphereMesh = new CubicVR.Mesh({
  primitive: {
    type: "sphere",
    radius: 1.5,
    lat: 60,
    lon: 60,
    material: sphereMat,
    uvmapper:  {
      projectionMode: CubicVR.enums.uv.projection.CUBIC,
      scale: [3, 3, 3]
    }
  }, compile: true
});

On donne donc notre texture au matériau au lieu d’une simple couleur et on ajoute le paramètre uvmapper à la création de la sphère. Ce paramètre permet à CubicVR de savoir comment appliquer la texture sur l’objet. A noter que pour une raison que j’ignore le résultat est plus jolie avec le projectionMode en mode CUBIC plutôt que SPHERICAL (tester avec CubicVR.enums.uv.projection.SPHERICAL vous verrez). Modifiez le scale permet de changer la taille de la texture sur l’objet. Voila le résultat :

Afficher un sol et gérer la physique

Ajoutons maintenant un sol au dessous de notre sphère. Voici la texture que nous allons utiliser : Texture carrelage

Ajouter ce code après scene.bindSceneObject(sphereObject); :

var solMat = new CubicVR.Material({
  textures: {
    color: "textures/carrelage.png"
  },
});
var solUV = {
  projectionMode: "cubic",
  scale: [0.25, 1, 0.25]
};
var solMesh = new CubicVR.Mesh({
  primitive: {
    type: "box",
    size: 1.0,
    material: solMat,
    uvmapper: {
      projectionMode: "cubic",
      scale: [0.25, 1, 0.25]
    }
  },
  compile: true
});
var solObject = new CubicVR.SceneObject({mesh:solMesh, scale: [50, 1, 50], position:[0, -10, 0]});
scene.bindSceneObject(solObject);

De la même manière que pour la sphère nous créer le sol mais type box (boite). On lui définit une taille de 50x1x50 et on le place juste en dessous de la sphère (0, -10, 0). Le scale du uvmapper permet de réduire la texture pour qu’elle ne soit pas trop grande sur les axe x et z (0.25, 1, 0.25) :

Ajouter maintenant la gestion de la physique. Notre sphère devrait tomber sur le sol suivant la loi de la gravité. Voici comment faire (à ajouter juste après le code précédant) :

var physics = new CubicVR.ScenePhysics();

var rigidSphere = new CubicVR.RigidBody(sphereObject, {
  type: "dynamic",
  mass:400,
  collision: {
    type: "sphere",
    mesh: sphereMesh,
    radius: 1.5
  }
});
physics.bind(rigidSphere);

var rigidFloor = new CubicVR.RigidBody(solObject, {
  type: "static",
  mass: 0,
  collision: {
    type: "box",
    size: solObject.scale
  }
});
physics.bind(rigidFloor);

On définit pour la sphère un ‘corps rigide’ dynamique (elle peut bouger), d’une masse de 400 et son type de collision est sphere. Pour le sol c’est pareil sauf qu’il est statique (il ne bouge pas), qu’il ne possède pas de masse et que son type de collision est de type box. Il ne reste plus qu’a ajouter la prise en compte de la physique dans le MainLoop :

CubicVR.MainLoop(function(timer, gl) {
  physics.stepSimulation(timer.getLastUpdateSeconds());
  scene.render();
});

Si vous testez votre sphère doit tomber sur le sol.

Dernière étape : mur de briques et cône

Pour terminer nous allons ajouter un mur de brique et faire en sorte que la sphère aille taper dedans. Pour cela nous allons dévier sa trajectoire à l’aide d’un cône placé en dessous de la sphère.

Commençons déjà par créer notre mur de brique : Texture brique
Voila le code :

var WALL_WIDTH = 10;
var WALL_HEIGHT = 10;

var briqueMat = new CubicVR.Material({
  textures: {
    color: "textures/brique.png"
  }
});

var briqueMesh = new CubicVR.Mesh({
  primitive: {
    type: "box",
    size: 1.0,
    material: briqueMat,
    uvmapper: {
      projectionMode: CubicVR.enums.uv.projection.CUBIC,
      scale: [3, 1, 1]
    }
  },
  compile: true
});

for(var i=0; i

On crée un mur de 10×10 briques derrière la sphère. Les briques ont une masse de 4 et sont soumises aux collisions. Ce qui veut dire que quand la sphère rentrera en collision elles vont subir la poussée de la sphère.

Il ne nous reste plus qu’a créer notre cône pour dévier la sphère lorsqu’elle tombe :

var coneMesh = new CubicVR.Mesh({
  primitive: {
    type: "cone",
    base: 6,
    height: 6,
    material: sphereMat,
    uvmapper: {
      projectionMode: "cubic",
      scale: [3, 3, 3]
    }
  },
  compile: true
});

var coneObject = new CubicVR.SceneObject({mesh:coneMesh, position:[-1,-7,0]});
scene.bindSceneObject(coneObject);

var rigidCone = new CubicVR.RigidBody(coneObject, {
  type: "static",
  mass:0,
  collision: {
    type: CubicVR.enums.collision.shape.CONE,
    radius: 6,
    height: 6,
    mesh: coneMesh
  }
});
physics.bind(rigidCone);

Le cône est défini comme static (il ne bougera pas). Voilà le résultat que nous obtenons :

Nous pouvons ajouter une dernière chose : la possibilité de tourner la caméra à la souris.
Ajoutez simplement cette ligne à la fin :

mvc = new CubicVR.MouseViewController(canvas, scene.camera);

Voila nous en avons terminé avec ce tutoriel. J’espère que j’ai été assez clair dans les explications et que cela vous sera utile. N’hésitez pas envoyer vos remarques.

Ressources sur WebGL et CubicVR :

Éditeur de terrain : http://cjcliffe.github.com/CubicVR.js/experiment/landscape_editor/landscape_edit_500m.html
Blog sur WebGl (en anglais) : http://learningwebgl.com/blog/
très bon tuto sur Blender et WebGL : Blender to WebGL

L’article Utiliser WebGL avec CubicVR 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.