Contrôler le lecteur vidéo HTML5 avec JavaScript

En plus des contrôles intégrés, nous pouvons également contrôler une vidéo avec la nouvelle API médias de HTML5.

Contrôler le lecteur vidéo HTML5 avec JavaScript

Detection:

Détecter si le navigateur support les balise <video> et <audio> est simple (Feature Detection HTML5).

Nous avons seulement besoin de déterminer si la méthode "canPlayType" est disponible.

Si le navigateur reconnaît la balise <video>, il a également reconnaît la balise <audio>. 

Tous les navigateurs qui reconnaissent une, sera également reconnaître l'autre.

if ( 'canPlayType' in document.createElement('video') ) {
  // Code
}

if ( 'canPlayType' in document.createElement('audio') ) {
  // Code
}

Ou bien:

var supportMedia = (function() {
  return ('canPlayType' in document.createElement('video'));
})();
if ( supportMedia ) { 
  // Code
}

Si vous utilisez Modernizr, vous pouvez écrit:

if ( Modernizr.video ) { ... }
if ( Modernizr.audio ) { ... }

Dans certains cas, il est aussi utile de déterminer si les navigateurs reconnaissent un codec particulier(mp4, webm, ogg, ...). Est-il possible?

Oui bien sûre. Modernizr fournit une solution élégante. Par exemple:

Modernizr.video  // navigateur prend en charge la balise video
Modernizr.video.webm // navigateur prend en charge le format WebM
Modernizr.video.h264 // navigateur prend en charge le format H.264

Les API HTML5 audio et vidéo sont identiques. Donc on pourra tester le support de l'audio avec:

Modernizr.audio.mp3
Modernizr.audio.ogg
Modernizr.audio.wav

Méthodes:

Les méthodes disponibles pour les médias que ce soit audio ou video sont:

• play() => commence ou continue la vidéo référencée.
• pause() => pause la vidéo.
• load() => récupérer une nouvelle ressource multimédia.
• canPlayType() => détermine si le navigateur supporte un codec particulier.

Ces méthodes peuvent être utilisées, comme ceci:

var video = document.getElementById('video');
video.play();
video.pause();
video.canPlayType('audio/ogg');

événements:

• play: Lorsque la vidéo est lancée.
• pause: Lorsque la vidéo est en pause.
• ended: Lorsque la vidéo est terminée.
• progress: Lorsque les médias ont été récupérées.
• canplay: Lorsque la vidéo a été entièrement chargées.

attributs:

• duration: La durée de la vidéo associée.
• currentTime: La position actuelle de la vidéo. Par exemple, lorsque la vidéo est en pause.
• autoplay: Une valeur booléenne indiquant si la vidéo a été fixé à autostart.
• poster: L'image d'affiche fourni.
• paused: Une valeur booléenne indiquant si la vidéo est actuellement pause.
• ended: Une valeur booléenne indiquant si la vidéo est terminée.

Prenons un exemple pratique:

Code HTML5:

<video id="video" width="500" height="500">
  <source src="video.mp4">
  <source src="video.webm">
  <source src="video.ogg">
</video>
<button id="button">Play</button>

Code JavaScript:

var video = document.getElementById("video"),
var button = document.getElementById("button");

// Lancer la vidéo lorsque le bouton est cliqué.
button.addEventListener('click', function() {
  video[video.paused ? 'play' : 'pause'](); 
}, false);

// Changer le text en Pause si la vidéo est lancée
video.addEventListener('play', function() {
  button.innerHTML = 'Pause';
}, false);

// Changer le text en Play si la vidéo en pause
video.addEventListener('pause', function() {
  button.innerHTML = 'Play';
}, false);

// Changer le text en Play si la vidéo est terminée
video.addEventListener('ended', function() {
  button.innerHTML = 'Play';
}, false);

Code JQuery:

var $video = $('#video'),
video = $video[0];

$video
.on('play', function() {
  $('#button').text('Pause');
})
.on('pause ended', function() {
  $('#button').text('Play');
});
$('#button').on('click', function() { 
  video[video.paused ? 'play' : 'pause']();
});

8.8.14 - 0

Feature Detection HTML5

Vous voulez savoir si le navigateur reconnaît les nouveautés HTML5, Allons-y. D'abord, je vous recommandons d'utiliser une bibliothèque appelée modernizr pour effectuer des tests de fonctionnalité, il est certainement important d'avoir une idée de ce qui se passe derrière la scène.

Feature Detection HTML5

Input Type:

Quand nous essayons d'appliquer un type input que le navigateur ne le support pas, il sera toujours afficher l'input de type "texte". Pour tester si le navigateur prend en charge un type quelconque:

var input = document.createElement ('input');
input.setAttribute ('type', 'color');
if (input.type == 'color') {
  //Navigateur prend en charge ce type
}

Attributs:

Pour déterminer si un navigateur prend en charge un attribut:

if ('placeholder' in document.createElement('input')) {
  //Navigateur prend en charge l'attribut placeholder
}

Ce code détermine simplement si un attribut existe dans l'objet document.createElement('input'). C'est exactement la même chose que :

var langues = {
  francais : 'premier',
  anglais  : 'deuxieme'
};

if ('francais' in langues ) { ... }

audio et vidéo:

Presque tous les navigateurs modernes supportent la balise audio et vidéo. Nous pouvons encore fournir le test pour les anciens navigateurs. Nous pouvons tester des médias par la méthode "canPlayType":

if (document.createElement('audio').canPlayType) {
  // Mettez votre code ici
}

ou bien:

if ('canPlayType' in document.createElement('video')) {
  //Code
}

canvas:

Si nous avons besoin de tester le support de canvas :

if (document.createElement('canvas').getContext) {
  //recupérer votre canvas
}

Local storage:

Tester le support de LocalStorage est simple. Nous pouvons générer des erreurs utilisons le block try{...}catch{...}:

try {
  if ('localStorage' in window.localStorage != null)
    return true; 
} catch (e) {
    return false;
}

Ce code détermine si localStorage exists dans l'objet window. Si des erreurs se produisent dans le processus, il retourne false.

Autres API:

Le test pour les autres nouvelles API est plus ou moins le même processus.

Geolocation:

if ( navigator.geolocation )

Offline

if ( window.applicationCache )

Web Workers

if ( window.Worker )

History

if ( window.history )
//ou bien
if ( window.history && history.pushState )

24.5.14 - 0

HTML5 output

On utilise la balise <output> au sein de formulaires pour afficher le résultat d'un calcul à partir des autres champs, il peut être utilisé librement dans tous les navigateurs.

<output value=100> 100 </output>

Output HTML5

Avec un exemple, nous pourrions utiliser la balise <output> pour représenter le résultat d'un simple calcul mathématique basé sur un formulaire.

<form>
  <input name="num1" id="num1" type="number"> * 
  <input name="num2" id="num2" type="number"> = 
  <output for="num1 num2"></output>
</form>

Notez que nous utilisons un nouveau type de la balise <input> : number. Donc:

<form oninput="result.value = num1.value * num2.value"> 
   <input name="num1" id="num1" type="number"> *
   <input name="num2" id="num2" type="number"> = 
   <output for="num1 num2" name="result"></output>
</form>

* =

Nous pouvons aussi utiliser JavaScript pour mettre à jour la valeur de sortie <output>.

JavaScript:

var form = document.querySelector('form'),
num1 = form.num1, 
num2 = form.num2, 
output = document.querySelector('output');
    [].forEach.call(document.querySelectorAll('input'), function(el) { 
    el.addEventListener('change', function() {
        output.value = ~~num1.value * ~~num2.value; 
    });
});

JQuery:

var form = $('form'), 
num1 = form[0].num1, 
num2 = form[0].num2, 
output = $('output');
form.on('change', 'input', function() { 
    output.val( ~~num1.value * ~~num2.value );
});

Toujours même résultat.

21.5.14 - 0

HTML5 input type

En plus de nouveaux attributs HTML5, nous avons aussi de nouveaux types de la balise <input />.

• email
• range
• color
• number 
• datetime 
• date 
• month 
• week
• time
• url 
• tel
• search

email:

Le type "email" autoriser uniquement la structure des adresse email valide.

<input type="email" >

range:

Le type "range" nous permet de créer un curseur natif.

<input type="range" >

Plus particulièrement, il peut recevoir des attributs: min, max, step, et value, etc.

Pour une démonstration rapide, nous allons prendre un exemple:

HTML5:

<input type="range" id="range" min="0" max="10" step="2" value="0"> 
<output for="range"></output>

Maintenant, nous allons utiliser JavaScript/JQuey pour définir la valeur rendu.

JavaScript:

var range = document.querySelector('#range'), 
output = range.nextElementSibling;
output.value = range.value;
range.addEventListener('change', function() {
  output.value = range.value; 
});

JQuery:

var range = $('#range'),
output = range.siblings('output');
output.val( range.val() );
range.on('change', function() {
  output.val( range.val() ); 
});

La valeur produit correspondant à ce nous avons spécifié dans l'attribut "range".

number:

Permet de saisir seulement des chiffres, peut-être lorsque vous avez besoin de l'âge ou d'un numéro quelconque.

<input type="number" >

Vous pouvez changer le style de ce type, on utilise le sélecteur:

input::-webkit-inner-spin-button { 
  /* votre style */
}

date:

Le type "date" nous donne la possibilité d'indiquer aux utilisateurs de sélectionner une date valide.

<input type="date" >

Quelques options de ce type:

min:

Certains sites vous obligent à choisir une date dans un délai spécifique. L'attribut "min" et "max" peut être utilisé pour cela:

<input type="date" min="2013-12-15" max="2013-12-30">

Dans les navigateurs qui supporte le type "date" seules les dates spécifié seront sélectionnable.

step:

Par ailleurs, si vous voulez limiter le choix à chaque cinq journée par exemple on peut utiliser l'attribut "step"

<input type="date" step="5">

d'autres options:

En plus, HTML5 offre également des choix alternatifs:

<input type="datetime">
<input type="date">
<input type="month">
<input type="week">
<input type="time">

color:

<input type="color">

les navigateurs prennent en charge des différents couleur.

url:

Le type "url" permet de s'assurer que le text saisi par l'utilisateur est un url valide.

<input type="url">

tel:

Leur avantage actuel est de présenter la forme d'un numéro de téléphone. Dans les navigateurs mobiles qui supportent ce nouveau type, permet d'afficher correctement un pavé numérique lors de la mise en place du clavier.

<input type="tel">

Si vous voulez valider un numéro de téléphone, vous aurez la possibilité d'utiliser l'attribut pattern. Par exemple, imaginons que j'ai besoin un numéro de téléphone au format (0000-000-000):

<input type="tel" pattern="\d{4}-?\d{3}-?\d{3}">

Cela permettra d'assurer que la forme ne soumettra si la valeur fournie prend la forme d'0000-000-000 ou 0000000000.

search:

type "search"; à première vue, ne fait pas beaucoup plus que créer une input avec des coins arrondis.

<input type="search">

Peut-être une icône de recherche s'affichera sur le côté gauche de l'input, aussi permet au navigateur de se souvenir vos requêtes de recherche précédents.

<input type="search" results="3">

18.5.14 - 0

Requêtes facile avec l'API Selectors

Vous êtes probablement déjà familiers avec getElementById(), getElementByTagName() et getElementByName().

// Récupérer l'attribut "id" d'un élément
document.getElementById('#id');
// Récupérer tous les éléments de la famille
document.getElementByTagName('div');
// Récupérer les éléments qui possèdent
// un attribut "name" que vous spécifiez
document.getElementByName('nom');

L'API Selectors introduit deux nouvelles méthodes pour interroger les DOM (querySelector(), querySelectorAll()).
Maintenant, nous pouvons utiliser les sélecteurs CSS que vous êtes déjà familier avec Au niveau du DOM.

Support:

querySelector()

Cette fonction renvoie le premier élément trouvé correspondant au sélecteur CSS spécifié.

// Trouver le premier élément avec un id = content
document.querySelector('#content');
 
// Trouver le premier élément input qui a un attribut type
document.querySelector('input[type]');
 
// trouver le premier élément li dans l'élémeny nav
 document.querySelector('nav li');

Un élément sélectionner peut également être utilisé sous forme de base, pour effectuer d'autres requêtes.

// Trouver le premier élément ayant un id = content
var content = document.querySelector('#content');

// Trouver le premier élément li dans notre content
content.querySelector('li');

querySelectorAll()

Lorsque vous n'avez besoin que d'un seul élément du DOM, utilisez querySelector(), il est optimisé dans ce but. Cependant, si nous avons besoin de capturer plusieurs éléments dans le DOM. Dans ces situations, querySelectorAll() est le bon choix.
Il va renvoyer tous les éléments (sous forme de tableau) correspondant au sélecteur CSS fourni.

// Select tous les éléments span
document.querySelectorAll('span');

Pour sélectionner tous les éléments span et li par exemple dans un document, vous pouvez simplement les séparées par des virgules.

// Trouver le premier élément span ou bien li
document.querySelector('span, li');

// Trouver les éléments span et li
document.querySelectorAll('span, li');

14.5.14 - 3

Meter et Progress HTML5

meter

La balise <meter> peut être utilisée pour fournir l'affichage graphique pour une valeur particulière. Cela fait le choix idéal pour des choses comme les scores de quizz par exemple, etc.

<meter min="0" max="100" value="50"></meter>

meter html5

En outre, nous pouvons spécifier une plage pour les mesures considérés comme faible, moyen ou une valeur considérés comme élevées. Cela permettent également de conditonner la couleur de l'affichage.

<meter min="0" max="20" low="8" high="16" optimum="20" value="2">2/20</meter> 
<meter min="0" max="20" low="8" high="16" optimum="20" value="10">10/20</meter> 
<meter min="0" max="20" low="8" high="16" optimum="20" value="20">20/20</meter>

2/20 10/20 20/20

Progress

Si l'élément <output> est utilisé pour afficher le résultat d'un calcul, l'élément <progress> devrait représenter l'état d'avancement d'une tâche ou d'une action au moyen d'une barre de progression. Il est possible d'animer la progression de la barre en utilisant le javascript, soit sur des évènements spécifiques, soit sur un simple timeout. 

<progress max="10" value="6"> 6 </progress> 

Si le navigateur ne supporte pas l'élément, son contenu sera affiché à la place. Prenons l'exemple:

Code HTML5:

<progress id="barre" max="100" value="0"></progress> 
<span id="avancement"></span> 
<input type="button" value="Démarrer" onclick="StartProgress();" />

Code JavaScript:

var i = 0;    
var barre = document.getElementById('barre');  
var avancement = document.getElementById('avancement');
 
function StartProgress(){
  MyTimeOut = setTimeout('Progress()', 500);
}
 
function Progress(){ 
  i += 5;
  if(i <= barre.max){
     barre.value = i;
     avancement.innerHTML = i.toString() + ' %';
     MyTimeOut = setTimeout('Progress()', 500);
  }
}

11.5.14 - 1

Drag And Drop sans JQuery

Quand il s'agit de faire glisser des éléments de réagencement avec JavaScript widget; jQuery UI sortable est le plus populaire.

Sortable est une bibliothèque JavaScript qui effectue la même chose, mais sans JQuery :).

Drag And Drop sans JQuery

Il utilise le HTML5 drag and drop API, a un faible encombrement (<2 Ko compressé) et fonctionne sur les appareils tactiles.

Aussi, en plus des listes simples, les éléments peuvent être déplacés entre plusieurs listes.

Site Officiel.
Sur Github.

28.12.13 - 2

Ressources pour créer des sites Web de style Windows 8 Metro UI

Windows 8 est arrivé et l'apparence familière de Windows OS a complètement changé avec le nouveau interface Metro UI.

Il s'agit d'un grand déménagement par Microsoft, cette nouvelle interface sera utilisée dans toutes leurs produits; bureau, tablette, mobile et leur site web.

Personnellement, j'ai bien aimé l'interface utilisateur Metro car elle s'inscrit dans de nombreux aspects de la conception web moderne comme la simplicité...

Si vous aimez l'interface utilisateur de métro et de planification pour créer votre prochain site Web avec des inspirations de cela, voici toutes les ressources pour créer Windows 8 Metro UI:

Template:

• Metro UI CSS

Metro UI CSS est un framework assez complet pour la création de site Metro-UI.

Il contient un système de grille, les styles de typographie, des tables, des formulaires, des boutons et des images...

Aussi des composants intégrés JavaScript pour les menus, sidebar, accordéon, barres de progression, les avis et plus encore...

• BootMetro

BootMetro est comme un thème pour Twitter Bootstrap qui apporte toutes les fonctionnalités de Bootstrap mais avec un design de métro.

• Metro-bootstrap

Semblable à BootMetro ci-dessus, le metro-bootstrap est encore un thème pour Twitter Bootstrap.

Il possède toutes les beautés de Bootstrap et comprend également les styles aussi bien.

• Metro UI Template

Il s'agit d'un framework pour créer des sites utilisant le style Windows 8 Metro UI.

• Droptiles – Metro-Style Web Dashboard

Il affiche des informations en tuiles où chaque carreau est une mini application elle-même l'extraction de données provenant de sources externes. Le projet est construit avec ASP.NET.

• PHP Image Gallery In Metro UI

Une galerie d'images PHP qui peut générer automatiquement des images et peut afficher des images dans un album.

JQuery Plugins:

• Metro JS
• jQuery Metro UI Plugin
• jQuery Mobile Metro Theme
• Metro UI Theme Builder For jQuery UI
• TileJS

Metro UI Icons:

• Modern UI Icons
• Metro UI Dock Icon Set
• Metro Icons

12.11.13 - 0

Bootstrap Web Design

Bootstrap Web Design

Vous connaissez forcément Twitter. Le projet Bootstrap web design a été publié en août 2011 pour répondre à des besoins internes de développement de Twitter. Il a été mis à disposition du public sous licence Apache. La version 2.1 est sortie en août 2012.

Qu'est ce que Bootstrap?

Bootstrap web design est un framework open source pour la création d'interfaces web. Bootstrap web design permet à tous les niveaux de développeurs Web et les concepteurs de l'utiliser. Bootstrap utilise JavaScript, CSS et HTML et inclut le support de CSS3 et HTML5. Vous pouvez verrouiller Bootstrap sur votre application pour fournir des fonctionnalités avancées, ou vous pouvez l'utiliser pour construire des applications à partir de zéro.

Obtenir Bootstrap

Bootstrap web design est disponible en téléchargement gratuit via GitHub en deux saveurs:
 - Version compilée
 - Code source complet
La version compilée est la plus rapide. Elle contient trois sous-répertoires: css, js et img. Le "css" contient des feuilles de style, "js" contient les fichiers JavaScript et images utilisés par Bootstrap web design sont stockés dans le répertoire "img". Avec le téléchargement, vous êtes prêt à mettre Bootstrap web design en mouvement.

Utilisation de Bootstrap

La documentation fournit de grandes instructions pour l'utilisation de Bootstrap web design. Une bonne partie de celui-ci décrit les bases du bootstrap permettant une page web. Le code suivant fournit un exemple de ces bases. 

Les principaux points sont les deux fichiers JavaScript référencés au bas de la page doctype HTML5, la feuille de style bootstrap.min.css...

<!DOCTYPE html>

<html>

<head>

  <title>Titre</title>

  <!-- Bootstrap -->

  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>

<body>

  <script src="http://code.jquery.com/jquery.js"></script>

  <script src="js/bootstrap.min.js"></script>

</body>

</html>

Bootstrap Web Design

7.9.13 - 1

HTML5 Data

Avant, nous avons eu recours généralement à des attributs d'éléments aléatoirement pour le but de stockage de données ou de contenu.

<a href="#" class="modal"> Lien </a>
<img rel="gallery" src="image.jpg" alt="Image">

Avec HTML5 data, nous n'avons plus besoin d'accéder à ces attributs lorsque nous avons besoin de stocker les métadonnées. Au lieu de cela, nous pouvons utiliser des attributs personnalisés.

<a href="#" data-modal>
<img src="image.jpg" data-overlay="gallery">

Un attribut de donné personnalisé est formé de la même manière que l’ensemble des attributs.
La seule condition c’est que le ‘data-‘ doivent être précédées le nom de l'attribut, pour indiquer son rôle.

Options d’utilisation :

L’utilisation des données attributs n’a pas de limite :

HTML5 Data & CSS

Que faire si vous avez besoin d’appliquer un style personnalisé à des liens qui répondent à une certaine condition ? De mettre en évidence certains de vos liens préférés ?

<ul>
   <li><a href="#">Lien 1</a>
   <li><a href="#">Lien 2 préféré</a>
   <li><a href="#">Lien 3</a>
   <li><a href="#">Lien 4 préféré</a>
   <li><a href="#">Lien 5</a>
</ul>

Pour donner un style particulier à nos liens préférés dans la liste, nous pouvons utiliser un attribut personnalisé.

<ul>
   <li><a href="#">Lien 1</a>
   <li><a href="#" data-lien-prefere>Lien 2 préféré</a>
   <li><a href="#">Lien 3</a>
   <li><a href="#" data-lien-prefere>Lien 4 préféré</a>
   <li><a href="#">Lien 5</a>
</ul>

Maintenant, nous pouvons facilement référencés à ces liens dans une feuille de style utilisant un sélecteur d’attribut.

a[data-lien-prefere] {
    color: red;
    font-weight: bold;
}

HTML5 Data & JavaScript

Les attributs personnalisés peuvent également être facilement utilisés dans du JavaScript.
Peut-être vous avez besoin d'un moyen facile pour indiquer des sections de votre site qui devrait servir de superpositions modales.

<a href="#" data-modal data-target="contact">Contact</a>
<div id="contact" style="display: none;">
    <h2>Form Contact</h2>
    ...
</div>

Dans cet exemple, la balise <a></a> utilise deux attributs personnalisés:

• data-modal : précise que l'ancre devrait un modal
• data-target : indique l’id de la section précisée

Le script interroge maintenant les DOM, et capture toutes les éléments data-modal.

$('a[data-modal]').on('click', function(e) {
    e.preventDefault();
    var target = $('#' + $(this).data('target'));
    target.show();
});

Dataset

Dataset Object ou DOMStringMap, renvoie une liste de toutes les données attributs associé à un élément.

<a href="#" data-length="1m20s" data-category="video">Lien</a>

Les deux attributs de données peuvent être accessibles, comme ceci:

var link = document.querySelector('a');
console.log(link.dataset);






24.8.13 - 0

Référencement HTML5

Dans les versions HTML qui ont précédées la venue d’HTML5, les développeurs utilisaient des “Plugins” tels qu’Adobe Flash pour ajouter de l’audio, des vidéos et des éléments graphiques. Ces “Plugins” généralement soutenaient de faibles résultats dans le référencement puisque les robots des moteurs de recherche incapables d’indexer ce type de contenu. Aujourd’hui, HTML5 vous permet de pouvoir indexer du contenu multimédia, tels que des menus, des vidéos et des éléments audios avec les nouvelles balises d’HTML5.

Ces nouvelles balises HTML5 offrent de nouvelles fonctions de la page qui facilitent la compréhension de votre contenu pour les moteurs de recherche. Ceci est bénéfique pour le Seo.

Référencement HTML5 : Éléments importants;

Fractionnement des Pages:

Le fractionnement des pages a été améliorée, elle est maintenant définie en plusieurs parties : en-têtes, navigation, menus, pieds de page, etc. Traités comme des entrées séparées, les développeurs ne peuvent indiquer aux moteurs de recherche comment fractionner les pages, c’est là qu’HTML5 vient à la rescousse.

La balise «header»:

La balise «header» permet de contenir des <h1>,  <h2>, <h3>, et plusieurs éléments de texte ainsi que des liens.  C’est pourquoi il est considéré comme une pépite d’or pour le référencement HTML5.

La balise «article»:

Pour le référencement, la nouvelle balise «article» est certainement la meilleure addition. Cette balise permet aux webmasters de marquer des entrées différentes sur votre site. Cette balise réduit l’utilisation des balises « div ». Il est attendu que les moteurs de recherche se penchent beaucoup plus rapidement sur le texte à l’intérieur de la balise «article».

La balise «section»:

La nouvelle balise «section» ajoute un autre segment qui, permettra à un élément d’avoir son propre titre en HTML. Tout comme la balise «article», on s’attend à ce que les moteurs de recherche soient plus attentifs au contenu de cette balise.

27.7.13 - 0

jPlayer - Lecteur MP3 jQuery

jPlayer est un lecteur MP3 réalisé en jQuery et HTML5/CSS3, avec une interface personnalisable.
Grâce à cette librairie jQuery, vous aurez la possibilité de lire et contrôler vos fichiers MP3 sur vos pages web.

La force de se plugin est bien évidemment le fait que l'interface n'utilise que du JavaScript et HTML5/CSS3, aussi :

• Facile à utiliser, Léger
• Libre et open source
• Plugins gratuits et multiplateformes
• Une documentation complète et un guide de démarrage
• API et interface cohérente dans tous les navigateurs, HTML5 ou Adobe ® Flash ™

Site Officiel

20.7.13 - 0

HTML5 Video

HTML5 video: La balise <video> permet de lire des fichiers vidéo directement dans notre page HTML en proposant un lecteur intégré avec des contrôles génériques (lecture, pause, contrôle du volume…).

HTML5 Video

	WebM	Ogg	h264
V14 et +	Oui	Oui	-
V20 et +	Oui	Oui	-
V9 et +	Oui	-	Oui
V5.1 et +	Oui	Oui	Oui
V12 et +	-	-	Oui

La balise <source> permet de définir au sein de l'élément <video> plusieurs ressources alternatives au cas où le navigateur ne supportera pas le format initialement spécifié dans l'attribut "src".
Lorsque le fichier vidéo n'est pas trouvé ou que son format n'est pas supporté au navigateur, le lecteur n'est pas visibles.

Support:

Attributs pour la balise:

Propriété	Définition
controls	Affiche le lecteur audio et ses fonctionalités (lecture, pause, ...)
autoplay	Le fichier doit être lu automatiquement lorsque la page est chargé
preload	Le mode de chargement du fichier à l'ouverture de la page
loop	Le fichier doit être joué en boucle
muted	Désactiver le son de la vidéo
poster	Spécifie une image par défaut à afficher comme arriére plan
src	URL du fichier vidéo

Exemple d'utilisation:

<video controls="controls">
   <source src="sourcevideo.webm" type="video/webm" />
   <source src="sourcevideo.mp4" type="video/mp4" />
   <source src="sourcevideo.ogv" type="video/ogg" />
</video>

Résultat:

Vidéo d'origine :
http://www.youtube.com/watch?v=7WKGh7DA4hE

22.6.13 - 1

Créer votre présentation avec slid.es

Slid.es est un service web très puissant permettant de créer des présentations et slides dynamiques avec des effets grâce à une interface WYSIWYG.
Ce service vous permet de créer différents slides, de les animer en quelques seconds:

•  Le service vous propose un ensemble de thèmes et de styles.
•  Vous aurez la possibilité de changer la police, les couleurs, les titres, etc.

Une fois terminé, vous enregistrez votre présentation, lui ajoutez titre, description et lien unique pour pouvoir ensuite l'utiliser.

 

Et vous pourrez l'exporter au format web pour l'intégrer dans votre site.

Voici un simple démo.

Site officiel.

11.6.13 - 0

Tuto Canvas : Images

<canvas> accepte le chargement d'images dans sa surface de dessin. Cette fonction est vraiment très puissante, elle permet d'afficher une image à certaines coordonnées. Pour ceci, on initialise une nouvelle image grâce au constructeur new Image().
Sa forme la plus basique ne comporte que trois paramètres: l'objet "Image" et  les coordonnées x et y:

var image = new Image();
image.src = "source.extension";
context.drawImage(image, x, y);

La méthode drawImage(image,x,y) copie l'image image chargée sur la surface de dessin, aux coordonnées (x,y). Il est possible de se resservir de la même ressource image une infinité de fois.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

var image = new Image();
image.src = 'like.png';
image.onload = function() {
    context.drawImage(image,50,50);
};

Résultat:

Aussi, nous pouvons aussi créer des motifs qui seront répétés horizontalement, verticalement. Pour ceci, on utilise la méthode createPattern(image, répétition) exploite une image, chargée comme indiqué précédemment, et lui confère un mode de répétition, parmi: repeat-y, repeat-x, ou repeat.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

var image = new Image();
image.src = 'like.png';
image.onload = function(){
    var motif = context.createPattern( image, 'repeat-x' );
    context.fillStyle = motif;
    context.fillRect(0,0,250,250);
};

Résultat:

8.6.13 - 0

Tuto Canvas : Degradé

Les deux principaux types de dégradés sont :

• Linéaire (createLinearGradient) le long d'un axe.
• Radial (createRadialGradient) avec un centre et une extension circulaire.

Pour affecter un dégradé, il faut définir quelles sont les couleurs et points de début et d’arrêt.

• Linéaire:

Pour créer un dégradé linéaire, la fonction utilisée est :

createLinearGradient(x1, y1, x2, y2)

x1, y1 : Le point de départ.
x2, y2 : Le point d'arrivé.

Pour définir une couleur on utilise la fonction addColorStop(p,couleur), où p la position de la couleur dans le dégradé, entre 0 (couleur de départ) et 1 (couleur de fin).
Enfin on assigne la propriété fillStyle pour appliquer le dégradé.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

// Délimitation du début et de la fin du dégradé
var gradient = context.createLinearGradient(0,0,300,100);

// Ajout d'une première couleur
gradient.addColorStop(0,"red");     

// Ajout d'une deuxième couleur
gradient.addColorStop(1,"green");    

// Affectation du dégradé
context.fillStyle = gradient;            

// On trace un rectangle plein qui aura pour style le dégradé
context.fillRect(0,0,300,300); 

Résultat:

• Radial:

Pour créer un dégradé radial la fonction utilisée est :

createRadialGradient(x1, y1, r1, x2, y2, r2)

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

var gradient = context.createRadialGradient(0,0,50,0,150,300);
gradient.addColorStop(0,"red");
gradient.addColorStop(0.5,"green");
gradient.addColorStop(0.9,"blue");
context.fillStyle = gradient;
context.fillRect(0,0,300,300);

Résultat:

 

3.6.13 - 0

Caractères HTML

La génération par exemple d’un document XML ne pouvant pas comporter de caractères spécifiques (comme é, è, à, …) ou bien des caractères interprétés par le navigateur (comme <, >, ", …). Pour résoudre ce problème, la liste suivante comporte tous les caractères HTML :

Code	Caractère	Désignation
Caractères spécifiques:
 		espace
&	&	& commercial
€	€	euro
©	©	copyright
£	£	livre sterling
¥	¥	yen
"	"	double quote
ç	ç	C cedille
®	®	register
←	←	flèche à gauche
→	→	flèche à droite
↑	↑	flèche en haut
↓	↓	flèche en bas
§	§	section
¶	¶	paragraphe
¿	¿	? inversé
»	»	double flèche droite
«	«	double flèche gauche
µ	µ	micro
¦	¦	barre verticale
♠	♠	pique
♣	♣	trèfle
♥	♥	coeur
♦	♦	carreau
Lettres:
Á	Á	Lettre A
á	á
Â	Â
â	â
à	à
å	å
&aelig	æ
é	é	Lettre E
ê	ê
è	è
ë	ë
î	î	Lettre I
ï	ï
í	í
ì	ì
ô	ô	Lettre O
ö	ö
õ	õ
ø	Ø
&œ	œ
û	û	Lettre U
ù	ù
ú	ú
ü	ü
ý	ý
ÿ	ÿ
Lettres grecques:
α	α	alpha
β	β	beta
χ	χ	chi
γ	γ	gamma
ω	ω	omega
Ω	Ω	Omega
Φ	Φ	Phi
Δ	Δ	Delta
Γ	Γ	Gamma
Θ	Θ	Theta
Λ	Λ	Lambda
Σ	Σ	Sigma
ε	ε	epsilon
ζ	ζ	dzeta
η	η	eta
ι	ι	iota
κ	κ	kappa
λ	λ	lambda
μ	μ	mu
ν	ν	nu
ξ	ξ	xi
π	π	pi
ρ	ρ	rho
χ	χ	chi
υ	υ	upsi
ς	ς	sigmav
Mathématiques:
°	°	degré
‰	‰	pour mille
′	′	prime
″	″	seconde
∞	∞	infini
±	±	plus ou moins
×	×	multiplie
÷	÷	divise
&lt;	<	inférieur à
&gt;	>	supérieur à
&frac14;	¼	fraction 1/4
&frac12;	½	fraction 1/2
&frac34;	¾	fraction 3/4
&sup1;	¹	puissance 1
&sup2;	²	puissance 2
&sup3;	³	puissance 3

Télécharger en PDF.

31.5.13 - 0

Tuto Canvas : Textes

Dessiner du texte sur canvas HTML5 est très simple. Pour cela, il existe deux méthodes :

• fillText('montext', x, y) produira des lettres.
• strokeText('montext', x, y) produira uniquement le contour des lettres.

Pour appliquer des styles (le font, alignement, …) sur le texte, plusieurs propriétés sont présentes :

• font : police.
• textAlign : alignement.
• Etc.

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");
    
var text = 'Developpeur';      // déclarer texte
context.font = "30pt Arial";   // définir la taille et le font
context.fillStyle = "red";     // couleur du texte
context.fillText(text,25,150); // 25:Coordonnée sur l'abscisse
                               // 150:Coordonnée sur l'ordonnée

Résultat:

30.5.13 - 0

HTML5 keygen

HTML5 keygen: La balise <keygen> permet de générer au sein d'un formulaire une clé de sécurité permet le cryptage et le décryptage de données échangées.

Support:

 

Attributs pour la balise:

Propriété	Définition
name	Nom associé à la balise keygen
keytype	Algorithme de sécurité de la clé générée
disabled	Désactive l'élément keygen
challenge	Permet d'ajouter un texte complémentaire à la clé

 

Exemple d'utilisation:

    <form>
       <keygen id="cle" name="cle"></keygen>
       <input type="submit" value="Générer" />
    
       <div id="my_result">
          <label>Après la génération : </label>
          <div id="CleGenerer" style="width:400px; word-break:break-all;"></div>
       </div>
    </form>
 
    <script type="text/javascript">
    function getParameterByName(name){
       name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
       var regexS = "[\?&]" + name + "=([^&#]*)";
       var regex = new RegExp(regexS);
       var results = regex.exec(window.location.search);
       if(results == null)
       return "";
       else
       return decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    document.getElementById("CleGenerer").innerHTML = getParameterByName("cle");
    if(document.getElementById("CleGenerer").innerHTML != ""){
       document.getElementById("my_result").style.display = "block";
    }
    </script>
   

Résultat:

Après la génération :

29.5.13 - 0