Skip to content
Learni
View all tutorials
Outils Pédagogiques

Comment créer du contenu interactif avec H5P en 2026

14 minBEGINNER
E-learningH5PContenu interactif

Introduction

H5P permet de créer facilement du contenu interactif de qualité professionnelle : quiz, présentations, vidéos enrichies ou exercices. Cet outil open source s’intègre parfaitement aux LMS et sites web modernes. En 2026, H5P reste la solution privilégiée pour l’e-learning car elle combine simplicité d’utilisation et richesse fonctionnelle. Ce tutoriel vous accompagne depuis l’installation jusqu’à l’intégration avancée. Vous apprendrez à produire des contenus réutilisables et accessibles. Chaque étape inclut des exemples concrets et du code prêt à l’emploi.

Prérequis

  • Compte administrateur sur un site WordPress, Moodle ou Drupal
  • Connaissances de base en HTML et JavaScript
  • Accès FTP ou terminal pour installer des plugins
  • Navigateur moderne (Chrome ou Firefox)

Installation via WordPress

terminal
wp plugin install h5p --activate
wp plugin install h5p-xapi --activate

Cette commande installe et active le plugin H5P officiel ainsi que le module xAPI pour le suivi des résultats. Exécutez-la dans le dossier racine de WordPress.

Création du premier contenu

Une fois le plugin activé, rendez-vous dans le menu H5P. Cliquez sur « Ajouter du contenu » et sélectionnez un type tel que « Quiz à choix multiples ». Remplissez les champs avec vos questions et enregistrez. Le système génère automatiquement un shortcode que vous pourrez insérer dans vos articles.

Intégration HTML basique

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Contenu H5P</title>
</head>
<body>
  <div id="h5p-container"></div>
  <script src="https://cdn.h5p.org/h5p.js"></script>
  <script>
    const h5p = new H5P({
      contentId: '12345',
      container: document.getElementById('h5p-container')
    });
    h5p.init();
  </script>
</body>
</html>

Ce fichier HTML charge la bibliothèque H5P depuis le CDN officiel et initialise le contenu portant l’identifiant 12345. Remplacez cet identifiant par celui de votre contenu.

Configuration du fichier h5p.json

h5p.json
{
  "title": "Quiz Introduction à H5P",
  "mainLibrary": "H5P.MultiChoice",
  "embedTypes": ["div"],
  "preloadedDependencies": [
    {
      "machineName": "H5P.MultiChoice",
      "majorVersion": 1,
      "minorVersion": 14
    }
  ]
}

Ce fichier JSON définit les métadonnées et les dépendances du contenu. Il est généré automatiquement par H5P mais peut être modifié pour personnaliser le comportement.

Script de suivi xAPI

tracker.js
document.addEventListener('h5p-xapi', function(event) {
  const statement = event.detail.statement;
  console.log('Résultat envoyé :', statement);
  fetch('/api/track', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(statement)
  });
});

Ce script intercepte les événements xAPI émis par H5P et les transmet à votre serveur pour le suivi des apprenants. Il est essentiel pour les formations certifiantes.

Personnalisation CSS

h5p-custom.css
.h5p-container {
  font-family: 'Inter', sans-serif;
  max-width: 800px;
  margin: 0 auto;
}
.h5p-question {
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 24px;
}

Ce fichier CSS surcharge les styles par défaut de H5P pour une meilleure intégration visuelle avec votre charte graphique.

Bonnes pratiques

  • Toujours tester le contenu sur mobile avant publication
  • Utiliser des noms descriptifs pour chaque activité H5P
  • Activer la sauvegarde automatique des résultats
  • Limiter le nombre d’interactions par écran
  • Vérifier l’accessibilité avec un lecteur d’écran

Erreurs courantes à éviter

  • Oublier d’activer les bibliothèques H5P après installation
  • Utiliser des versions incompatibles des dépendances
  • Ignorer les messages d’erreur JavaScript dans la console
  • Publier du contenu sans avoir testé le mode plein écran

Pour aller plus loin

Découvrez nos formations complètes sur H5P et l’e-learning moderne sur Learni Group.