Éducation, société et technologie

Intégrer des éléments multimédia dans SPIP

dimanche 15 janvier 2006 par André Vincent

Intégrer de éléments multimédia (sons, vidéo, animations) dans un article de SPIP est très simple. On procéde sensiblement de la même façon que pour intégrer une image.

Il est d’abord impératif de lire la documentation en ligne de SPIP :

Attention : il faut d’abord Valider l’article avant d’y joindre un document, sinon nous perdrons nos ajouts et modifications. Une fois l’article validé cliquez à nouveau sur Modifier cet article.

  1. À gauche, dans Ajouter un document, cliquer sur Parcourir et choisir un document multimédia sur votre poste. Assurez-vous que le nom du fichier possède bien une extension convenable (.mp3, .avi, .swf, .mpg, .ogg, .mov, .mid, etc.).
  2. Cliquer sur Télécharger.
  3. Dans le cas d’un document multimédia, SPIP détectera automatiquement le type de document, sa dimension et la taille du fichier. Si le document peut être affiché dans la page, SPIP vous proposera deux cases pour redimensionner le document. Selon vos besoins et la largeur de l’espace disponible dans votre page, vous pourrez ainsi redimensionner l’affichage du document. Voir plus bas le cas des dfichiers audio.
  4. Optionnellement, vous pouvez aussi ajouter un Titre et une Description au document qui agiront comme légende sous l’affichage du document multimédia.
  5. Une fois téléchargé, vous verrez apparaître sous la vignette du document, des balises à insérer dans votre article, du type <doc52> ; copiez et collez cette balise dans le texte de l’article.

Tout comme dans le cas des images, pour contrôler le défilement du document dans la page, ajoutons dans la balise :

  • |center pour centrer le document sur une seule ligne dans son propre pararaphe.
  • |left ou |right pour insérer la vignette et sa légende (s’il y a lieu) dans le paragraphe suivant, en le faisant flotter (float) à gauche ou à droite.

Exemple : <doc52|left> pour générer ce qui suit :

Le HMSC Chicoutimi
De la glorieuse flotte militaire canadienne.

C’est donc une vignette cliquable qui s’affiche (avec une légende, s’il y a lieu). En cliquant sur la vignette, le document multimédia associé s’ouvrira dans une nouvelle fenêtre ou proposera de télécharger le document sur le poste du visiteur si celui-ci n’a pas le logiciel ou l’extension (plug-in) convenable requise pour exécuter le document.

Si l’on désire plutôt affiché directement dans l’article de la page web, il faut modifier ainsi la balise :

  • <emb52|center|loop=false> pour insérer le document dans l’article, comme l’exemple qui suit :
Le HMSC Chicoutimi
De la glorieuse flotte militaire canadienne.

Dans ce dernier cas, SPIP détecte automatiquement la dimension du document. Selon vos besoins et la nature du document vous pouvez modifier ces dimensions. Dans le cas de notre citron, la dimension originale était de 760 x 430 ; nous l’avons réduit à 260 x 180 afin qu’il s’ajuste à la largeur de la colonne de notre article.

Dans le cas d’un document Quick Time, il faut prévoir d’ajouter de 16 pixels à la hauteur du document pour laisser apparaître le barre de contrôle.

Pour un document Quick Time ne comportant uniquement qu’une ou des pistes sonores, il faut indiquer une hauteur d’au moins 16 pixels et d’une largeur vous convenant (dans l’exemple suivant, nous avons spécifié 400 pixels, pour faire apparaître la barre de contrôle de la séquence sonore.

Son Midi inclus dans un fichier QuickTime
<emb54|center|autoplay=true|loop=false>
Fichier QuickTime : /IMG/mov/fullmoon.mov
60k - 14 minutes (format midi inclus dans QuickTime)

Dans le cas d’une séquence vidéo Quick Time, il faut prévoir d’ajouter 16 pixels à la hauteur détectée et proposée par SPIP afin de faire apparaître la barre de contrôle sous la séquence vidéo.

Fichier QuickTime (.mov)
Haute définition - 1.6 Mo - extrait de 40 secondes
Source BBC - Fichier original : 70 Mo

Fichier Windows Media (.avi)
Basse définition - 404 ko - 8 secondes

Dans tout les cas, on peut aussi spécifier des paramètres supplémentaires de cette façon :

<emb54|left|autostart=true|loop=false>

Voici une liste de ces paramètres pour :


De source externe

Une version rock du célèbre Canon de Pachelbel. Nous avons simplement copier/coller le code d’Embed disponible sur You Tube.

Autres versions rock et classique du Canon

Pour obtenir plusieurs petites séquences vidéo disposées les unes à côté des autres, nous avons réduit leurs tailles et les avons insérés dans des divisions flottantes.

Sources de sons et musiques

Sources de séquences vidéo


titre documents joints

Une video de source externe

18 juin 2008
info document : Flash Video
17.1 Mo

[au format .FLV, utilisant le plugin lecteur multimédia]


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 20338 / 1820693

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web dynamiques  Suivre la vie du site SPIP  Suivre la vie du site Trucs et astuces SPIP   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 4