Intégrer du son et de la vidéo dans Moodle

De Wiki_enseignement.


Sommaire

Où est le problème ?

Moodle préconise une certaine méthode pour intégrer du son ou de la vidéo. Cette méthode repose que le fait que l'utilisateur possède un player (Real media player, Quicktime, Windows Media Player, etc.) adapté à la lecture de type de document son ou vidéo.

De ce fait, il est impossible :

  • d'une part d'intégrer le document dans la zone de la page que l'on souhaite (en général le son s'ouvre dans une nouvelle fenêtre)
  • d'autre part, d'assurer un fonctionnement homogène, chaque utilisateur pouvant posséder un player différent

Type de solution préconisée

La solution décrite ici consiste à intégrer un "Player Flash léger" dans le code HTML de la page souhaitée.

Avantages

Ceci permet d'assurer un fonctionnement homogène pour tous les utilisateurs et de pouvoir adapter la lecture aux besoins pédagogiques.

Contraintes

  1. Les documents doivent être à un format compatible avec le player
    1. pour le son : format MP3
    2. pour la vidéo : format FLV (Flash Video)
  2. Il est nécessaire d'adapter le code HTML afin de le rendre compatible avec la localisation des fichiers dans Moodle.

Choix des players

Il existe en 2010 une certaine variété de players flash. Quelques exemples répandus :

Dans cet article, on a retenu les deux players Dewplayer et Dewtube, proposés par Alsacréations pour les raisons suivantes 
* Le faible poids des lecteurs
* La variété de présentations proposées et de réglages possibles
* La mise à disposition d'un générateur de code HTML facilitant la tâche du concepteur

Marche à suivre pour intégrer les sons dans Moodle

Charger les players dans l'espace Moodle

Cette tâche doit être faite par l'administrateur. Par exemple, ce dernier a créé un dossier <players> de Moodle dans lequel sont placés les différents versions des players. Dans notre cas l'adresse des différents players Dewplayer est :

Préparer le son

  • Le son doit être au format MP3 (pour convertir le format son, utilisez un convertisseur tel que [Super@ http://www.erightsoft.com/SUPER.html])
  • Charger le son au format MP3 dans l'espace de votre cours Moodle (menu Administration...Fichiers). Créer un dossier <Sons> si nécessaire.
  • noter l'adresse du son (par exemple : http://scenariopedagogique.net/moodle_dilipem/file.php/14/sons/a_jeun.mp3)


Créer le code HTML pour jouer le son

  • Utiliser le générateur de code HTML proposé par Alsacréations : cliquer ici et faire dérouler la page
    • Dans la zone "Version", choisir le type de lecteur souhaité
    • Dans la zone "URL du fichier MP3", indiquez le nom de votre fichier, par exemple test.mp3
  • Vous devez obtenir un résultat tel que le suivant

<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">

<param name="wmode" value="transparent" />

<param name="movie" value="dewplayer.swf" />

<param name="flashvars" value="mp3=test.mp3" />

</object>

  • Modifier l'adresse des fichiers afin qu'ils correspondent aux URL du serveur, ici :
    • /moodle_dilipem/players/dewplayer/dewplayer.swf
    • /moodle_dilipem/file.php/14/sons/a_jeun.mp3
n'indiquez pas l'adresse complète avec http://scenariopedagogique.net/:, ceci génère un erreur)
n'omettez pas le premier caractère / (slash)
  • Vous devez obtenir un résultat tel que le suivant

<object type="application/x-shockwave-flash" data="/moodle_dilipem/players/dewplayer/dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">

<param name="wmode" value="transparent" />

<param name="movie" value="/moodle_dilipem/players/dewplayer/dewplayer.swf" />

<param name="flashvars" value="mp3=/moodle_dilipem/file.php/14/sons/a_jeun.mp3" />

</object>

Coller le code HTML

  • Editez le texte de votre choix : consigne, question, réponse, aide.
  • Passez en mode "Mode code HTML" (ci-dessous une copie d'écran)
Image:Mode html moodle.gif
  • Collez le code HTML à l'endroit souhaité
  • Vous devez obtenir un résultat tel que le suivant
    • exemple en ligne dans le site moodle (authentification): [1]
    • copie d'écran (ceci est une image)
Image:Integration lecteur son moodle.gif

Marche à suivre pour intégrer une vidéo dans Moodle

Préparer la vidéo

Charger les players dans l'espace Moodle

Cette tâche doit être faite par l'administrateur. Par exemple, ce dernier a créé un dossier <players> dans lequel sont placés les différents versions des players. Dans notre cas l'adresse du player Dewtube est :

Créer le code HTML pour jouer la vidéo

  • Utiliser le générateur de code HTML proposé par Alsacréations : cliquer ici et faire dérouler la page
    • Dans la zone "URL du fichier FLV", indiquez le nom de votre fichier, par exemple video1.flv
  • Vous devez obtenir un résultat tel que le suivant

<object type="application/x-shockwave-flash" data="dewtube.swf" width="512" height="384">

<param name="allowFullScreen" value="true" />

<param name="movie" value="dewtube.swf" />

<param name="flashvars" value="movie=video1.flv&width=512&height=384" />

</object>

  • Modifier l'adresse des fichiers afin qu'ils correspondent aux URL du serveur, ici :
    • /moodle_dilipem/players/dewtube/dewtube.swf
    • /moodle_dilipem/file.php/14/videos/video1.flv
n'indiquez pas l'adresse complète avec http://scenariopedagogique.net/:, ceci génère un erreur)
n'omettez pas le premier caractère / (slash)
  • Vous devez obtenir un résultat tel que le suivant

<object type="application/x-shockwave-flash" data="/moodle_dilipem/players/dewtube/dewtube.swf" width="512" height="384">

<param name="allowFullScreen" value="true" />

<param name="movie" value="/moodle_dilipem/players/dewtube/dewtube.swf" />

<param name="flashvars" value="movie=/moodle_dilipem/file.php/14/videos/video1.flv&width=512&height=384" />

</object>

Coller le code HTML

  • Editez le texte de votre choix : consigne, question, réponse, aide.
  • Passez en mode "Mode code HTML" (ci-dessous une copie d'écran)
Image:Mode html moodle.gif
  • Collez le code HTML à l'endroit souhaité
  • Vous devez obtenir un résultat tel que le suivant
    • exemple en ligne dans le site moodle (authentification): [2]
    • copie d'écran (ceci est une image)
Image:Integration_lecteur_video_moodle.gif
Outils personnels