STIC:STIC I - exercice 4 (Wall-e)
Aller à la navigation
Aller à la recherche
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
- Tutoriel: HTML5 audio et video
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>
- Dossier de fichiers dans html5-video (y compris videos)
- Notamment html5-video-track-leanbackplayer.html
Autres fichiers à explorer:
- html5-video-simple.html
- html5-video-with_style.html
- html5-video-track.html (ne marche qu'avec Chrome)
- subtitles_en.vtt (exemple VTT)
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é
- HTML5 audio et video et notamment la section Audio et video avec JavaScript
Produire des vidéographies
Ressources:
Liens
- Vidéo et audio HTML5
- Production de fichiers vidéo pour le web
- la vidéographie
- Montage et conversion video (pour le moment juste une définition + qqs. liens)
- html5-audio/
- en:Multimedia container format
- en:Video editing and conversion
- en:Video_editing (outils video divers)
- Players HTML5
- Librairies JavaScript (HTML5 players), en cours on utilise LeanBack Player
- LeanBack Player documentation
- LeanBack Player HTML generator (utile pour produire tout le code HTML + JS)
- Video download
- Vimeo Vidéos de qualité, mais il faut s'enregistrer
- Google video search
- Video downloadhelper, Firefox extension, permet de prendre des vidéos de YouTube par exemple
- en:Sound Assets (trouver des sons)
- 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.