Rapport – STIC I Exercice 4

Le dispositif développé pour cet exercice est accessible au lien suivant :

• Vidéo interactive – “Décoder le langage non-verbal”

Ce dispositif est une vidéo pédagogique interactive portant sur le décodage du langage non-verbal dans le contexte d’un entretien d’embauche. Il vise à offrir une activité autonome d’observation guidée permettant d’identifier différents marqueurs comportementaux.

Le public cible comprend principalement les étudiants en psychologie, en ressources humaines ou en communication, ainsi que toute personne souhaitant améliorer sa lecture des signaux corporels. Les prérequis sont limités : compréhension du français oral et usage d’un navigateur compatible HTML5.

L’objectif est de permettre l’identification de trois catégories de comportements non-verbaux (anxiété, fermeture, confiance) et de favoriser une posture d’analyse active grâce à un mécanisme de questions intégrées à la vidéo.

Le dispositif s’articule autour d’une vidéo segmentée (en accord avec le principe de segmentation de Mayer) en plusieurs parties (introduction, trois cas pratiques, conclusion). À des moments clés, la lecture se met automatiquement en pause pour afficher une question liée à l’observation du geste présenté. Ce fonctionnement encourage l’attention sélective et limite la passivité.

L’interface adopte une esthétique simple et lisible : fond clair, lecteur centré, boutons de chapitres facilitant la navigation. Les sous-titres ajoutés manuellement permettent un suivi du contenu même en l’absence d’audio.

Le dispositif a été conçu selon une logique de sobriété numérique : aucun framework externe n’est utilisé, les ressources sont hébergées localement, et l’ensemble repose sur HTML, CSS et JavaScript natifs.

La production combine montage vidéo, création de sous-titres et programmation interactive. La captation vidéo a été réalisée avec un appareil mobile, ce qui entraîne certaines limites techniques (variations lumineuses, légère réverbération du son, cadrage fixe). Un contraste visuel est observable entre les séquences filmées et les vidéos libres de droits utilisées pour illustrer les situations. Le regard du présentateur n’est pas constamment orienté vers la caméra, ce qui est dû aux contraintes matérielles et aux conditions d’enregistrement.

Le montage final a été réalisé sous Adobe After Effects. Un artefact sur la timeline provoquait initialement l’ajout d’une longue section noire lors de l’export, ce qui a nécessité un nettoyage du projet avant l’export définitif.

Les sous-titres ont été créés manuellement au format VTT, avec une synchronisation précise des timecodes. L’utilisation de fichiers locaux a nécessité un serveur de test (Live Server), les navigateurs bloquant le chargement direct des sous-titres pour des raisons de sécurité (CORS).

L’interactivité repose sur un script JavaScript utilisant l’événement timeupdate. Les arrêts, questions et réponses sont définis dans un tableau d’objets. Lorsque la vidéo atteint un timecode défini, la lecture se suspend automatiquement et un overlay affiche la question.

Le dispositif final offre une expérience fluide : les pauses interactives s’intègrent naturellement, les questions renforcent l’attention et l’interface reste cohérente avec une utilisation académique. L’ensemble est fonctionnel et facile à prendre en main.

Concernant le feedback, le choix a été fait de se limiter pour l'instant à une validation simple (correct/incorrect). Cette approche vise à stimuler une démarche active : en ne donnant pas immédiatement la réponse expliquée, l'apprenant est incité à revoir la séquence et à affiner son observation par lui-même plutôt que de lire passivement une solution.

Quelques limites techniques subsistent : la captation vidéo pourrait être améliorée (éclairage, audio, cadrage), et un contraste visuel est présent entre les sources personnelles et les vidéos illustratives. Par ailleurs, les données d'interaction (questions et timecodes) sont intégrées directement dans le script JavaScript. Bien que cela lie le code au montage actuel, cette structure a été privilégiée pour maintenir la simplicité du projet et éviter la complexité de gestion de fichiers de données externes pour cet exercice.

Des pistes d’évolution incluent une harmonisation des sources vidéo et, éventuellement, l'ajout de feedbacks plus détaillés pour une utilisation en totale autonomie.

• Mayer, R. E. (2005). The Cambridge Handbook of Multimedia Learning. Cambridge University Press.
• Navarro, J. (2008). What Every BODY is Saying. Harper Collins.

• Tutoriels JavaScript : Ressources de référence utilisées ponctuellement pour clarifier certains aspects techniques du code : Habr et Metanit.
• Musique : Fond sonore libre de droits provenant de Pixabay. Composé par Mikhail Smusev. Source : https://pixabay.com/music/
• Vidéos (Footage) : Séquences externes libres de droits issues de la banque vidéo Pixabay, notamment pour illustrer des comportements non-verbaux. Source : https://pixabay.com/videos/
• Logiciels : Adobe After Effects (montage vidéo), Visual Studio Code (développement web).
• Assistants IA : ChatGPT (OpenAI, modèle GPT-5.1) — clarification de notions JavaScript, vérification de logique d’interactivité, conseils de structuration HTML/CSS. Gemini (Google, modèle Gemini 2.0 Flash) — reformulation de textes en français académique et aide ponctuelle à la cohérence rédactionnelle.