En intégrant des vidéos de Vimeo ou YouTube dans vos cours en ligne, vous enrichissez l’expérience d’apprentissage et augmentez l’engagement des étudiants. Cet article explore des méthodes efficaces pour diffuser des vidéos dans divers contextes éducatifs, notamment via des activités pages, forums et quizs.
Apprenez comment optimiser l’affichage et les fonctionnalités des vidéos hébergées sur Vimeo et YouTube pour garantir une utilisation optimale et cohérente sur tous les appareils, y compris les smartphones, tablettes et ordinateurs.
Que vous souhaitiez ajouter une vidéo à une activité page, enrichir les descriptions de cours, dynamiser les discussions de forums, ou intégrer du contenu multimédia dans des quiz, suivez nos conseils pour une intégration réussie dans votre environnement d’apprentissage en ligne.
Pour choisir votre éditeur de texte par défaut, veuillez consulter ce guide.
Intégration d’une vidéo via l’éditeur de texte Atto ou l’éditeur TinyMCE #
1) Récupérez le lien / URL de votre vidéo sur le site Viméo/Youtube.
2) Rendez-vous dans une activité de type « page », un message de forum ou toute autre fonctionnalité permettant l’utilisation de l’éditeur de texte.
Si vous utilisez Atto
3) Dans l’éditeur de texte, cliquez sur le bouton « Insérer ou modifier un fichier audio/vidéo ».
Si vous souhaitez enregistrer directement une vidéo, vous pouvez cliquer sur le bouton « Enregistrer une vidéo » (icône caméra).
Si vous utilisez TinyMCE
3) Dans l’éditeur de texte, cliquez sur l’icône « Insérer ou modifier un fichier audio/vidéo ».
Si vous souhaitez enregistrer directement une vidéo, vous pouvez cliquer sur le bouton « Menu d’enregistrement vidéo » (icône caméra) puis sur « Enregistrer une vidéo » ou « Enregistrer l’écran ».
4) Dans la fenêtre surgissante, collez le lien de la vidéo.
Des options d’affichage pour la taille de la vidéo sont disponibles dans l’onglet « Options d’affichage »
Dans l’onglet « Réglages avancés », vous pouvez choisir :
- si les commandes du lecteur doivent être disponibles ou non
- si la vidéo doit être lancée automatiquement
- si le son doit être activé de base ou non
- ou encore si la vidéo doit tourner en boucle.
Votre vidéo a bien été intégrée au contenu de la page.
5) Cliquez sur « Insérer média » puis sur « Enregistrer et afficher » dans les paramètres de la page.
Intégration d’une vidéo via le code HTML #
Bien que l’ajout de médias soit possible via un bouton dans les éditeurs de texte, vous pouvez aussi insérer directement des vidéos dans vos cours en utilisant du code HTML. Cette méthode offre une flexibilité supplémentaire et peut être particulièrement utile pour les enseignants souhaitant personnaliser davantage la présentation de leurs cours.
Voici maintenant les étapes à suivre pour pouvoir voir et ajouter du code HTML dans votre zone de contenu, en fonction de l’éditeur de texte.
Atto
1) Cliquez sur la flèche vers le bas (1) puis sur l’icône « </> » (2) pour afficher le code source HTML.
TinyMCE
1) Cliquez sur l’onglet « Outils », puis sur l’icône « <> Code source » pour afficher le code source HTML.
2) Une fois dans le code source HTML, il vous suffit d’ajouter le code suivant à l’endroit souhaité :
<video width="320" height="240" controls>
<source src="chemin_de_la_video.mp4" type="video/mp4">
</video>3) Remplacez « chemin_de_la_video.mp4 » par le lien (URL) de votre vidéo.
Exemple :
<video width="320" height="240" controls="">
<source src="https://www.youtube.com/watch?v=XHmC5MqwHUY" type="video/mp4">
</video>Atto
4) Cliquez sur la flèche vers le bas (1) puis sur l’icône « </> » (2) pour afficher le code source HTML.
TinyMCE
4) Cliquez sur l’onglet « Outils », puis sur l’icône « <> Code source » pour afficher le code source HTML.
Puis enregistrez.
5) Enfin, pour conserver l’intégration de la vidéo et vérifier son rendu sur votre page, cliquez sur « Enregistrer et afficher ».
