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

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des cours STIC I et STIC II

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 cette même période.

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ément il se compose, ainsi que les différentes extensions et codes 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

Aucun prérequis pour cet exercice.

Activités en 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 langue (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 de signer et donner 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 langue (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:

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.