STIC:STIC I - exercice 4 (Wall-e)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

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
    • Une bibliothèque JavaScript qui facilite la compatibilité et les fonctionnalités de base (play, stop)
  • 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 (utilisation de bibliothèques, 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)

Encodage de video MP4 en webm et ogv

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:

Utilisation d'un player

(1) Installation de leanback player

  • Téléchargez LeanBack Player du site
  • Générez du code avec le generator
  • Installez le player dans un répertoire
  • Corrigez les liens dans le code généré (il faut notamment remplacer ou tuer "http://yourdoomain.com/")
<!-- LeanBack Player - CSS Theme -->
<link rel="stylesheet" media="screen" type="text/css" href="http://yourdomain.com/leanbackPlayer.default.css" />
<!-- LeanBack Player - JS Source -->
<script type="text/javascript" src="http://yourdomain.com/leanbackPlayer.pack.js"></script>
<!-- LeanBack Player Translation(s) (Examples) - JS Source -->
<script type="text/javascript" src="http://yourdomain.com/leanbackPlayer.en.js"></script><!-- LeanBack Player - English Translation -->
<script type="text/javascript" src="http://yourdomain.com/leanbackPlayer.de.js"></script><!-- LeanBack Player - German Translation -->

(2) Modification du code pour ajouter des éléments track

(3) Éditer des fichiers VTT, en partant des exemples

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é

Produire des vidéographies

Ressources:

Projet 4 / Tâche

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 ci-dessous)

  • La vidéo doit être réalisée pour HTML5
  • La présentation de la vidéo doit impérativement inclure des sous-titres faits avec VTT, utiles et intéressants.
  • Vous devez ajouter un bouton qui amène l'utilisateur à un endroit précis de la vidéo. Ce bouton peut se trouver dans un texte explicatif par exemple.
  • Vous devez ajouter 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...

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 Firefogg (plugin Firefox) ou XMedia-recode
  • Vous pouvez chercher des synergies avec le cours BASES.
  • Typiquement, une vidéo durera entre 3 et 5 minutes.

Contraintes

  1. 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)
  2. 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)
  3. L'utilisation doit être ergonomique
  4. Dispositif: Une vidéo fonctionnelle avec sous-titres pour HTML5. Puisque l'implémentation de VTT est plus que lacunaire pour le moment, on suggère d'utiliser LeanBackPlayer, mais vous pouvez prendre un autre player (Kaltura par exemple)
  5. Exemples
    • Avec interactivité : volée Volt (stic-1/ex4)
    • Sans interactivité : promotions Utopia (ex4), R2D2 et Stella (stic-2/ex17) et Tetris (stic-1/ex4)

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é ...
  • Si vous utilisez Leanbackplayer, il faut inclure une vidéo *.ogv, sinon problèmes avec Firefox.
  • Parfois l'intégration LeanBack player + interactivité JavaScript/DOM pose des problèmes. Dans ce cas évitez d'utiliser LeanBack player

Délai

  • Lundi 08:59, juste avant le début de la période 3

Liens

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.
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_4_(Wall-e)&oldid=72414 »