Créer son blog LMS Elearning avec H5P (Drupal, Wordpress)

08 février 2016 HTML5, OUTILS TICE
wordpress TICE Timeline Vidéo Learning HTML5

Créer facilement des exercices elearning au format HTM5 et intégration dans un blog wordpress et Drupal.

Lire la suite

Vidéo chapitrée enrichie avec moteur recherche VTT

15 janvier 2016 HTML5, VIDEO
HTML5 VTT VIDEO RICHMEDIA

Il est parfois utile lors de longue vidéo de permettre aux utilisateurs de rechercher un passage dans la vidéo par un mot-clef.

Lire la suite

Stockage données en HTML5

23 juillet 2015 HTML5
aucun

Le  HTML5, apporte de nombreuses fonctions au développeur web, parmi les fonctions on trouve la méthode de stockage des données: Le stockage local (localStorage).

Il est désormais possible de stocker des données localement dans votre navigateur (supportant la propriété bien sûr).

Les données sont stockées pour un site précis et peuvent récupérées sur n'importe quelle autre page du site.

Cette propriété s'annonce comme le remplacement des cookies à la différence qu'il est possible de stocker bien plus d'informations (Environ 5 Mb) et que seul le client peut accéder à ces données.

Voici un exemple de code afin de le mettre en pratique :

2 méthodes pour stocker localement:

Tester la compatibilité du navigateur pour le LocalStorage + d'infos

if (localStorage) {
  // Le navigateur supporte le localStorage
} else {
  // localStorage non supporté
}

Récupérer une variable locale (HTML5)

localStorage['Ma variable']

ou bien

localStorage.getitem['Ma variable']

Supprimer une variable locale (HTML5)

removeItem("key");

Pour supprimer toutes les combinaisons clé - valeurs (key-value) vous pouvez utiliser la méthode clear: localStorage.clear(); 

 Concernant les compatibilités navigateurs:

• Firefox: 3.5
• Chrome: 4+
• Internet Explorer: 8+
• Safari: 4+
• Opera: 10.5+
• iPhone: 2.0+
• Android: 2.0+

Player Video HTML 5 (source vidéo WebM et MP4)

23 juillet 2015 HTML5, VIDEO
HTML5 Vidéo

00:00 / loading...

Star wars : épisode 1 la menace fantôme - 20th Century Fox

Vidéo en chargement : loading...

Player Vidéo HTML5

Les compatibilités de Player en HTML5 en utilisant deux formats vidéos (exemple MP4 & WebM). Le player au standard HTML5 arrive à lire la vidéo dans son browser. On ressort du tableau que seule Opéra et Internet Explorer on besoin du WebM. Il existe une alternative si vous voulez utiliser qu'un seul format (exemple MP4), il suffit d'utiliser la technologie présentée par JWPlayer (Longtail.com) voir exemple. Explication : si le player n'est pas compatible HTML5, la vidéo est diffusée en Flash Player voir exemple

TABLEAU DE COMPARAISON

CHROME (version 17.0.9)MP4 FIREFOX (version 10.02)WebM INTERNET EXPLORER (version 9)MP4 OPERA (version 11.61)WebM SAFARI (version 5.1.2)MP4

Chapitrer une vidéo en HTML5

10 février 2015 HTML5, VIDEO
HTML5 Vidéo

Il est désormais possible de caler une vidéo à l'aide du Javascript et du HTML. Dans l'exemple ci dessous la vidéo est encodée dans les 2 formats (MP4 et WEBM).

Lire la suite