STIC:STIC I - exercice 4 (Yoshi)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

Cette page fait partie des cours STIC I et STIC II

STIC

Introduction

Cet exercice introduit l'utilisation des vidéos d'un point de vue technique, notamment en ce qui concerne la possibilité d'inclure une vidéo dans une page HTML5 sans la nécessité d'un plugin externe (e.g. Flash). Cet exercice est également en rélation avec le cours BASES qui va démarrer pendant la période 2.

Connaissances/compétences envisagées

À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :

  • Savoir évaluer de manière critique l'utilisation de la vidéo, surtout en termes pédagogiques
  • Comprendre qu'est-ce qu'un fichier vidéo et de quels éléments il se compose, ainsi que les différentes extensions et codecs associés
  • Savoir ajouter une vidéo à une page HTML5 avec
    • Différentes versions de la vidéo et un mécanisme de "fallback" pour maximiser la compatibilité
    • Des sous-titres ou autres éléments contextuels
  • Comprendre les bases de la vidéographie et de l'édition vidéo
  • Savoir intégrer des interactions avancées (e.g. quiz, coordination vidéo/contenu textuel, ...) avec JavaScript/DOM

Prérequis

HTML5 de base et un peu de JavaScript (programmation DOM de base)

Activités en salle de classe

Utilisation pédagogique de la vidéo

Discussion/exploration: Que peut-on faire avec des vidéos ?

  • Tutoriel utilisation de logiciels (= vidéographie / screenscast)
  • Filmer des gestes pour montrer comment faire
  • Filmer des participants à une activité sociale (entretien d'embauche) - Capsules, vignettes.
  • Démonstrations didactiques
  • Enseignement de langues (dialogues, body language, etc.)
  • Analyse de mouvement (ex. physiothérapie). Filmer un sujet que l'on analyse après
  • Témoignages (personnes qui ont des pathologies)
  • Vidéo pour donner du feedback (gestion d'entretiens, sport, etc.)
  • Vidéo d'une animation (par exemple, molécules)
  • Podcast - conférences - MOOC
  • Filmer utilisation d'un langage des signes et donner un feedback

Voir aussi:

  • Travaux Tetris (ex4)

Outils d'édition vidéo

A installer (utilisateurs Windows):

A vérifier (Mac):

  • IMovie marche
  • à option: OpenShot et ShotCut

A installer (Linux):

Produire des vidéographies

Encodage de video MP4 en webm et ogv

  • La plupart des éditeurs vidéo permettent un traduction assez rapide.
  • Pour faire plus simple: installez le player/convertisseur VLC (L'extension FireOgg ne marche plus) our le plus simple handbrake (produit du mp4 varié)

Démo video HTML5

Exemple basic: 

<video id="movie1" controls="controls" preload="metadata">
   <source src="videos/state-of-wikipedia-480x272.mp4"/>
   <source src="videos/state-of-wikipedia-480x272.ogv"/>
   <source src="videos/state-of-wikipedia-480x272.webm"/>
        Votre navigateur ne fait pas HTML5. Achetez un nouveau !
</video>

Autres fichiers à explorer:

Sous-titres

Utilisation:

  • Traduction
  • Mal-entendant(e)s
  • Apprentissage de langues (on voit les "mots")
  • Éclairer des passages sonores mauvais ou des passages où les gens parlent mal ou très vite
  • Sous-titrer des dialectes (ex. québécois)
  • Légende qui ajoute de l'information
  • Légende qui explique par exemple un processus
  • Commentaires qui expliquent un phénomène
  • Commentaires étudiants pour un cours en ligne (y compris lien)

Ajout d'interactivité

API Audio/Vidéo

Avec les tags HTML5 qui permettent d'implémenter des éléments audio/vidéo, il existe également une API qui permet à JavaScript d'interagir avec les éléments audio/vidéo comme s'ils étaient des "normaux" éléments du DOM. Voir :

Play, Pause and Stop

Ceci permet, par exemple, de créer ses propres boutons pour les contrôles de base de la vidéo.

Code HTML5
<!-- Video -->
<video id="myVideo">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm">
</video>
<hr>
<!-- Boutons -->
<button id="playBtn">Play</button> <button id="pauseBtn">Pause</button> <button id="stopBtn">Stop</button>
Code JavaScript
//Idéntifier les éléments HTML
var myVideo = document.getElementById("myVideo");
var playBtn = document.getElementById("playBtn");
var pauseBtn = document.getElementById("pauseBtn");
var stopBtn = document.getElementById("stopBtn");
 
//Démarrer la lecture avec play()
playBtn.onclick = function () {
  myVideo.play();
}
 
//Mettre en pause la lecture
pauseBtn.onclick = function () {
  myVideo.pause();
}
 
//La fonction stop() n'existe pas, donc on combine pause avec currentTime = 0;
stopBtn.onclick = function () {
  myVideo.pause();
  myVideo.currentTime = 0;
}

Pointer à un moment précis de la vidéo

Le code du bouton stop de l'exemple précédent introduit un élément qui peut être exploité de manière plus spécifique : la propriété .currentTime qui détermine le temps (en seconds) de lecture de la vidéo. On peut utiliser cette propriété pour créer des pointages spécifiques à des moments précis dans la vidéo. Ceci peut avoir un impact pédagogique évident, car l'un des problèmes des vidéos et la difficultés de (ré)trouver les informations spécifiques dont on a besoin.

Pour créer un pointage spécifique on peut par exemple combiner la propriété .currentTime et la méthode .play() pour faire démarrer la lecture à un moment précis. Par exemple :

Code JavaScript
//Identifier votre vidéo, par exemple
var myVideo = document.getElementById("myVideo");

//Créer une fonction de pointage
function pointTo(seconds) {
  //Déplacer la lecture au moment souhaité
  myVideo.currentTime = seconds;
  //Faire démarrer la lecture
  myVideo.play();
}

À ce moment, tout élément dans le DOM peut devenir l'élément déclencheur, par exemple :

Code HTML5
<!-- Pointage à l'intérieur d'un texte. Veuillez noter que l'attribut href="#myVideo" permet de créer un ancrage interne à la page et scroller vers la vidéo -->
<p>La vidéo suivante propose des informations sur Wikipedia. Vous pouvez utiliser les ancrages suivants pour ces morceaux d'intérêts :</p>
<ul>
  <li><a href="#myVideo" onclick="pointTo(96)">Qui sont les contributeurs?</a></li>
  <li><a href="#myVideo" onclick="pointTo(165)">Quelles sont les nouvelles challenges?</a></li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>
<!-- Video -->
<video id="myVideo" controls>
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm">
</video>

Événements déclenchés par la vidéo

Il est également possible d'utiliser des événements liés directement à la vidéo pour déclencher des changements sur la page. Par exemple, on peut "écouter" les événements suivants :

  • playing ou onplaying : détermine si la vidéo est en cours de lecture
  • pause ou onpause : détermine si la lecture de la vidéo est arrêtée

Voici un exemple qui montre ces event listeners. Veuillez noter comme les événements sont déclenchés n'importe quel moyen on utilise pour play/pause la vidéo (boutons ou controls de la vidéo) car justement l'evenet listener est associé à la vidéo, pas aux boutons.

Code HTML5
<h1>Événements déclenchés par la vidéo</h1>
<p>Faites démarrer et arrêterla vidéo pour voir les événements rélatifs.</p>
<!-- Video -->
<video id="myVideo" controls>
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm">
</video>
<!-- Boutons alternatifs -->
<p>
<button onclick="myVideo.play()">Play</button> | <button onclick="myVideo.pause()">Pause</button>
</p>
<hr>
<p>Liste des événements : </p>

<ul id="eventList">

</ul>
Code JavaScript
//Identifier votre vidéo, par exemple
var myVideo = document.getElementById("myVideo");

//Identifier la liste à populer
var list = document.getElementById("eventList");

//Play event (triggered however you play)
myVideo.onplaying = function () {
  list.innerHTML += "<li>Playing event</li>";
}

//Pause event (triggered however your pause)
myVideo.onpause = function () {
  list.innerHTML += "<li>Pause event</li>";
}

Un autre événement déclenché par la vidéo qui peut être utile est l'événement :

  • timeupdate ou ontimeupdate

Cet événement est déclenché quand la lecture de la vidéo se déplace dans le temps (en toute direction) et peut être utilisé pour déterminer des comportements en fonction du temps de la vidéo.

Code HTML
<h1>Timeupdate example</h1>
<!-- Video -->
<video id="myVideo" controls>
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4">
  <source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm">
</video>
<!-- Current time -->
<h4>Current time</h4>
<p id="showTime"></p>
Code JavaScript
//Identifier votre vidéo, par exemple
var myVideo = document.getElementById("myVideo");

//Identifier où montrer le temps
var showTime = document.getElementById("showTime");

//Timeupdate event listener
myVideo.ontimeupdate = function () {
  showTime.innerHTML = myVideo.currentTime;
}

Veuillez noter comme quand la vidéo est en lecture, l'événement ontimeupdate n'est pas toujours déclenché à des intervalles régulières, car cela dépend par exemple de la puissance de l'ordinateur ou de combien d'autres événements sont déclenchés dans la page.

Pour un exemple plus complexe est lié à l'apprentissage voir :

Projet 4 / Tâche

Voici de suite la description détaillée de la tâche et le matériel de support à votre disposition pour compléter l'exercice pendant la période à distance.

Lectures et matériel de support

Ces articles proposent les contenus utiles aux finalités pédagogiques du cours. Pour compléter l'exercice ou atteindre les objectifs spécifiques à votre dispositif (voir plus bas), d'autres ressources peuvent être nécessaires.

  • Interactivité avec JavaScript
     : aspects théoriques et pratiques, lecture commune avec exercice 3, niveau des exemples à calibrer en fonction de vos besoins et intérêts
  • HTML5 audio et video
     : aspects théoriques et pratiques, niveau des exemples à calibrer en fonction de vos besoins et intérêts.

Dispositif

Créez une page web qui contient au moins une vidéo, des sous-titres, une piste audio et deux éléments interactifs (voir contraintes) :

  • Créez/éditez une vidéo avec au moins une partie faite par vous
  • Créez des sous-titres qui accompagnent la vidéo (pas forcément une transcription de l'audio)
  • Insérez la vidéo dans une page HTML5 valide en utilisant les balises HTML5
  • Ajoutez les sous-titres à la vidéo
  • Créez des éléments interactifs avec JavaScript qui permettent d'interagir avec la vidéo

Conseils :

  • Produisez des vidéos de petite résolution s'il s'agit de vignettes. Aussi petites que possibles, mais néanmoins ergonomiques...
  • Le format de la vidéo doit être du *.ogv ou du *.mp4 ou du *.webm. Le format *.webm est préférable (il est également compatible avec ce wiki, *.mp4 non).
  • Utilisez un transcoder gratuit pour convertir la vidéo, par exemple Online Convert ou XMedia-recode. Pour les utilisateurs Firefox, le pluggin Firefogg n'est plus supporté par Firefox.
  • Vous pouvez chercher des synergies avec le cours BASES.
  • Typiquement, une vidéo durera entre 3 et 5 minutes.

Exemples :

  • Avec interactivité : volée Volt et Wall-e (stic-1/ex4)
  • Sans interactivité : promotions Utopia (ex4), R2D2 et Stella (stic-2/ex17) et Tetris (stic-1/ex4)

Contraintes

  • Contenu selon vos envies, mais en rapport avec une thématique MALTT
  • Il faut un sujet pédagogique cohérent (donc le film doit être utilisable dans un scénario d'enseignement, de formation et/ou d'apprentissage)
  • La vidéo doit être réalisée pour HTML5 et elle doit impérativement inclure des sous-titres faits avec VTT, utiles et intéressants.
  • La vidéo doit jouer un rôle central dans le dispositif. Si vous ne voulez pas produire une vidéographie, pensez à produire des vignettes utiles dans un contexte pédagogique, dans ce cas vous pouvez produire plus qu'une seule vidéo. Vous avez aussi le droit de réutiliser des vidéos, à condition d'en produire au moins un segment vous-même (pour l'introduction par exemple)
  • Vous devez ajouter au moins un élément (e.g. bouton) qui amène l'utilisateur à un endroit précis de la vidéo. Cet élément peut se trouver dans un texte explicatif par exemple.
  • Vous devez ajouter au moins un événement qui se déclenche par la vidéo à un moment donné. Exemples: arrêter la vidéo et poser une question, changer la couleur de la page, afficher une information supplémentaire...
Une aide pour la contrainte des sous-titres avec VTT

Attention, quand vous rajoutez des sous-titres, vous devez créer une page dédiée tel que sous-titre.vtt.

Sur la première ligne de cette page, vous devez impérativement avoir "webvtt", sinon vos sous-titre ne fonctionneront pas.

Critères d'évaluation

Selon la grille d'analyse utilisée pour les travaux précédents.

Pour faire très bien:

  • Produisez une vidéo bien éditée et composée (donc pas de morceaux inutiles).
  • Utilisation de différents types de segments. (Images, plan sur une personne, entretiens, scènes, vidéographies)
  • Sous-titres utiles et bien positionnés

Rapport

Faites un rapport selon les guidelines habituelles :

En particulier pour cet exercice, essayez d'expliquer :

  • Quelle est la valeur ajoutée de la vidéo dans votre dispositif ?

Contribution Wiki

Contribution libre comme d'habitude :

Quelques suggestions :

Bugs

Attention :

  • Les fichiers VTT risquent de ne pas marcher en "local". Déposez les fichiers sur un serveur web ou démarrez un serveur web local.
  • Certains navigateurs vont bloquer des contenus locaux pour des raisons de sécurité ...

Délai

  • Dimanche 20:00, juste avant le début de la période 3

Feedback intermédiaire

Vous pouvez demander un feedback intermédiaire sur votre travail à travers la page discussion de cet exercice (voir Aide plus bas) au plus tard 1 semaine avant le délai.

Ressources

Vidéo et audio HTML5
Players HTML5
Video download
Convertisseurs
  • Online-convert.com Online converter service for various file formats.
  • MediaConverter.org Online converter. Also can download from websites.
  • OnlineVideoConverter.com. Online converter. Heavy adds.
  • Installez FireOgg, a Firefox plugin for creating ogg and webm video files
  • Miro Video Converter, convertisseur vers MP4, WebM (vp8), Ogg Theora, ou pour Android, iPhone, et iPad ; téléchargement gratuit pour windows et mac depuis le site.

Aide

Discussion de cette page

Utilisez la page discussion de cette page pour poser des questions. Pour insérer un nouveau titre, utilisez simplement le "+".

Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page.

Journée de Support Libre

Le jeudi de la semaine après la semaine des cours en présence M1 (i.e. celle où vous avez STIC le vendredi), une Journée de Support Libre et organisée pour vous aider, entre autre, à progresser avec vos exercice STIC. La présence d'au moins un assistant/moniteur spécifiquement pour STIC est garantie de 10h à 12h s'il y a assez d'étudiants qui ont manifesté leur présence.

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_4_(Yoshi)&oldid=100824 »