Web 2.0
Multimédia
Internet - AI
Programmation...

Intégrateur Multimédia Web - Raphael Lecerf Gestionnaire Plateforme

Fonctions avancées Player Youtube


23 juillet 2015 LABO & TESTS, VIDEO


Il existe des astuces et fonctions avancées pour le lecteur video Youtube quand vous voulez l'intégrer dans une de vos pages web ou blog.

Vous avez envie de lire une partie de la vidéo de 10 secondes à partir de 185 secondes à partir du début par exemple pour créer une Feedback Vidéo, il suffit d'ajouter la balise ?start=[début de la vidéo] et si vous souhaitez arrêter la vidéo il suffit d'ajouter la balise &end=[temps de vision en secondes]. voir le code ci dessous.

Lire la suite


Stockage données en HTML5


23 juillet 2015 HTML5


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:

 

localStorage['key'] = "Ma variable";
 
ou bien
 
localStorage.setitem("key", "Ma variable");
 

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


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

 


Player natif & API de VIMEO


20 juillet 2015 VIDEO, LABO & TESTS


Le player natif utilise la classe javascript "froogaloop2.min.js" & "jquery.min.js" version 1.11. Dans l'interface client, il est possible d'y insérer des captions ou sous-titres au format SRT, mais il existe une table de sous-titrage online. Dans cette exemple, les sous-titres sont indépendant du player, il est possible de charger différents sous-titres au format SRT et de les enrichir (gras, italique,couleur...).

Lire la suite


LearningApps, qu'est-ce que c'est ?


14 juin 2015 OUTILS TICE, LABO & TESTS


LearningApps est une application Web 2.0 qui propose des Exerciseurs gratuits en ligne  pour créer des activités interactives en ligne.

Ces activités peuvent être partagées dans la communauté LearningApps ou tout simplement postées sur votre blog, site internet ou plateforme LMS par un simple code iframe fourni ou par un paquet SCORM dans le cas du plateforme d'apprentissage type Moodle. Retrouvez toutes ces infos dans votre espaces personnel.

LearningApps logo

Lire la suite