Travail dirigé : Intégration des médias dans Moodle - Jean

Université Stendhal - Département Informatique Pédagogique - Copyright Jean-Philippe Pernin
Travail dirigé : Intégration des médias dans Moodle
1 OBJECTIFS
• Savoir intégrer de façon "propre" les différents types de médias dans Moodle
• Affichage d'images
• Lecture de son
• Affichage de vidéos
• Enregistrement de son
2 LE TRAVAIL PREPARATOIRE : LA CONVERSION ET LE CHARGEMENT DES MEDIAS
Vous disposez dans votre Moodle du choix <Fichiers> dans le bloc <Administration>. Cet espace vous
permet de stacker toutes les ressources multimédias que vous voudrez par la suite utiliser dans votre site.
Il est recommandé de créer un dossier pour chacun des types de ressources à utiliser. On pourra ainsi créer
une arborescence telle que la suivante :
• Le dossier <images> contiendra les différents types d"images : GIF, JPG, PNG
•
• Le dossier <moddata> contiendra les données gérées par Moodle (à ne pas toucher)
• Le dossier <players> contiendra les lecteurs sons et vidéos tels que dewplayer et dewtube
• Le dossier <sons> contiendra les sons au format MP3
• Le dossier <videos> contiendra les sons au format FLV
3 INTEGRATION DES IMAGES FIXES
On prendra l'exemple de la création d'un page web. La procédure sera la suivante :
3.1
Création de la page web
-1/4-
Université Stendhal - Département Informatique Pédagogique - Copyright Jean-Philippe Pernin
3.2 Insertion de l'image
• Cliquer sur l'icône "Insérer une image"
• Choisissez une image. Réglez le cas échéant les paramètres (ici la largeur est fixée à 100). Ne pas oublier
de définir le texte alternatif (ici Peau d'âne).
4 INSERTION D'UN MEDIA SON
Les médias dont l'exécution demande à être contrôlée (tel que le son ou l'image) ne peuvent être insérées
correctement avec un simple lien href. Dans ce cas, l'affichage dépendra à chaque fois différent des
caractéristiques du poste utilisateur : quel est le navigateur utilisé (Internet Explorer, Firefox, Chrome,
Opéra), que est le player installé (VLC, Realplayer, QuickTime, Windows Media Player, etc.) .
Voir exemple ici.
Il faut donc dans ce cas utiliser un lecteur média pour le web ou player tel que dewplayer pour le son (voir
http://www.jeanphilippepernin.net/ressources/3.%20traitement%20des%20medias/4.%20traitement%20du
%20son/documents/integration_son_html/ ).
La marche à suivre pour le son sera alors la suivante
-2/4-
Université Stendhal - Département Informatique Pédagogique - Copyright Jean-Philippe Pernin
4.1
4.1.1
Intégration des players dans Moodle
Téléchargement des players
• Téléchargez les players depuis l'adresse suivante : http://www.alsacreations.fr/dewplayer
• Décompressez le fichier zip et copiez tous les fichiers swf dans le dossier <players> de Moodle. Le
résultat obtenu sera le suivant :
4.1.2
Téléchargement des fichiers sons
• Préparez vos fichiers au format MP3 sur votre ordinateur
• Téléchargez vos fichiers dans le dossier <sons> de Moodle
4.1.3
Intégration des fichiers son dans la page Moodle
Pour insérer votre son dans la page Moodle, vous devrez insérer le code suivant en modifiant les parties en
jaune :
Par exemple? les adresses du player swf et du fichier mp3 pourront être :
• http://moodle.grenet.fr/stendhal/file.php/94/players/dewplayer-mini.swf
• http://moodle.grenet.fr/stendhal/file.php/94/sons/exemple.mp3
Pour générer ce code, le plus facile est d'utiliser le générateur automatique disponible en fin de la page
http://www.alsacreations.fr/dewplayer
-3/4-
Université Stendhal - Département Informatique Pédagogique - Copyright Jean-Philippe Pernin
Le code deviendra alors, après modification des adresses :
<object type="application/x-shockwave-flash"
data="http://moodle.grenet.fr/stendhal/file.php/94/players/dewplayer-mini.swf" width="160" height="20"
id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="http://moodle.grenet.fr/stendhal/file.php/94/players/dewplayer-mini.swf" />
<param name="flashvars" value= "mp3=http://moodle.grenet.fr/stendhal/file.php/94/sons/exemple.mp3 " />
</object>
5 INSERTION D'UNE RESSOURCE VIDEO
La procédure sera identique à la précédente, avec les différences suivantes :
• la vidéo devra auparavant avoir été transformée au format FLV (FLash Vidéo).
• le player dewtube à télécharger et le générateur de code sont disponibles à l'adresse suivante :
www.alsacreations.fr/dewtube.html
• les différents players swf devront être téléchargés dans le dossier <vidéos> de Moodle
• le code généré pourra ressembler au suivant
•
<object width="512" height="384" data="http://moodle.grenet.fr/stendhal/file.php/94/players/dewtube.swf"
type="application/x-shockwave-flash">
<param value="true" name="allowFullScreen" />
<param value="http://moodle.grenet.fr/stendhal/file.php/94/players/dewtube.swf" name="movie" />
<param value="movie=http://moodle.grenet.fr/stendhal/file.php/94/videos/video1.flv&width=300&height=200"
name="flashvars" />
</object>
6
ENREGISTREMENT D'UN SON PAR L'APPRENANT
Pour cela utiliser le choix
Passer en rôle étudiant pour visualiser le résultat
-4/4-