Blocs Médias
Blocs Médias
Blocs Médias
5 types de blocs pour intégrer des médias enrichis : vidéos, images, galeries, audio et documents.
← Retour à la documentationvideo_embed
Vidéo intégrée avec métadonnées source complètes. Supporte YouTube, HeyGen, AutoContent et JW Player.
Propriétés
| Propriété | Type | Description |
|---|---|---|
| type | 'video_embed' | Type du bloc |
| ordre | number | Position dans la leçon |
| youtube_url | string | URL complète YouTube |
| youtube_id | string | ID de la vidéo YouTube (11 caractères) |
| heygen_video_id | string | ID vidéo HeyGen (avatar IA) |
| autocontent_video_id | string | ID vidéo AutoContent |
| jw_player_id | string | ID JW Player |
| start_time | number | Timecode en secondes |
| titre | string | Titre exact de la vidéo |
| description | string | Ce que couvre cette vidéo |
| source | object | Métadonnées source (chaine, auteur, date_publication) |
{
"type": "video_embed",
"ordre": 1,
"youtube_url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
"youtube_id": "dQw4w9WgXcQ",
"start_time": 0,
"titre": "Introduction aux bases de données relationnelles",
"description": "Cette vidéo explique les concepts fondamentaux des bases de données relationnelles.",
"source": {
"chaine": "Database Academy",
"auteur": "Jean-Pierre Martin",
"date_publication": "2024-03-15"
}
}Aperçu
Introduction aux bases de données relationnelles
Source:Database Academy
image
Image avec source, légende, licence et lightbox intégré pour agrandir.
Propriétés
| Propriété | Type | Description |
|---|---|---|
| type | 'image' | Type du bloc |
| ordre | number | Position dans la leçon |
| url | string | URL de l'image |
| alt | string | Texte alternatif pour l'accessibilité |
| legende | string | Légende explicative |
| source | object | Métadonnées source (url, auteur, licence) |
{
"type": "image",
"ordre": 2,
"url": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png",
"alt": "Logo Google - exemple d'image avec source",
"legende": "Le logo de Google, exemple d'image avec attribution complète",
"source": {
"url": "https://commons.wikimedia.org/wiki/File:Google_2015_logo.svg",
"auteur": "Google Inc.",
"licence": "Public Domain"
}
}Aperçu
Le logo de Google, exemple d'image avec attribution complète
Formats d'images
Acceptés : .jpg, .jpeg, .png, .gif, .svg
Interdits : .webp, .avif (compatibilité navigateurs)
galerie
Galerie d'images en carousel avec navigation, indicateurs et lightbox plein écran.
Propriétés
| Propriété | Type | Description |
|---|---|---|
| type | 'galerie' | Type du bloc |
| ordre | number | Position dans la leçon |
| images | string[] | Tableau d'URLs des images |
| layout | 'carousel' | 'grid' | Mode d'affichage (défaut: carousel) |
| columns | number | Nombre de colonnes en mode grid |
| contenu | string | HTML fallback si pas d'images |
{
"type": "galerie",
"ordre": 3,
"images": [
"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800",
"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800",
"https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800"
],
"layout": "carousel",
"columns": 3
}Aperçu
1 / 3
audio
Lecteur audio avec waveform animé, contrôles de vitesse et modes podcast/narration.
Propriétés
| Propriété | Type | Description |
|---|---|---|
| type | 'audio' | Type du bloc |
| ordre | number | Position dans la leçon |
| titre | string | Titre de l'audio |
| description | string | Description du contenu |
| mode | 'podcast' | 'narration' | Mode d'affichage |
| audio_url | string | URL du fichier audio |
| voice_name | string | Nom de la voix (TTS) |
| podcast_title | string | Titre du podcast |
| podcast_host | string | Nom de l'animateur |
| podcast_episode | string | Numéro d'épisode |
Aperçu
🎤 Audio
Introduction au module
document_pdf
Document PDF avec prévisualisation intégrée (pour fichiers internes) et téléchargement. Supporte aussi ODS, XLS, XLSX, DOC, DOCX.
Propriétés
| Propriété | Type | Description |
|---|---|---|
| type | 'document_pdf' | Type du bloc |
| ordre | number | Position dans la leçon |
| url | string | URL du document |
| titre | string | Titre du document |
| description | string | Description du contenu |
| source | object | Métadonnées source (url, auteur, licence, date) |
{
"type": "document_pdf",
"ordre": 5,
"url": "https://example.com/fiche-synthese-sql.pdf",
"titre": "Fiche de synthèse SQL",
"description": "Aide-mémoire des principales commandes SQL (SELECT, INSERT, UPDATE, DELETE) avec exemples pratiques.",
"source": {
"url": "https://dbacademy.com/resources",
"auteur": "Database Academy",
"licence": "CC BY 4.0",
"date": "2024"
}
}Aperçu
Fiche de synthèse SQL
Aide-mémoire des principales commandes SQL (SELECT, INSERT, UPDATE, DELETE) avec exemples pratiques.
OuvrirPDF (externe)