« STIC:STIC I - exercice 4 (Wall-e) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(Page créée avec « {{stic12}} <categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</ca... »)
 
Aucun résumé des modifications
Ligne 4 : Ligne 4 :
== Introduction ==
== Introduction ==


À définir
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 ===
* Installez [http://firefogg.org/ FireOgg] ou le player/convertisseur [http://www.videolan.org/vlc/ VLC]
 
=== Démo video HTML5 ===
* '''Tutoriel''': [[HTML5 audio et video]]
Exemple basic:
<source lang="HTML5">
<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>
</source>
 
* Dossier de fichiers dans [http://tecfa.unige.ch/guides/html/html5-video/ html5-video] (y compris [http://tecfa.unige.ch/guides/html/html5-video/videos/ videos])
* Notamment [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html html5-video-track-leanbackplayer.html]
 
Autres fichiers à explorer:
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html html5-video-simple.html]
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-with_style.html html5-video-with_style.html]
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html html5-video-track.html] (ne marche qu'avec Chrome)
* [http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt subtitles_en.vtt] (exemple VTT)
 
=== Utilisation d'un player ===
 
(1) Installation de leanback player
* Téléchargez LeanBack Player du [http://www.leanbackplayer.com/player_download.html?type=player site]
* Générez du code avec le [http://www.leanbackplayer.com/generator/ 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/")
<source lang="XML">
<!-- 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 -->
</source>
 
(2) Modification du code pour ajouter des éléments track
 
(3) Éditer des fichiers VTT, en partant des exemples
* [http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt subtitles_en.vtt]
* [http://tecfa.unige.ch/guides/html/html5-video/subtitles_fr.vtt subtitles_fr.vtt]
 
=== Sous-titres ===
 
*  http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html
* [[WebVTT]] et [[:en:WebVTT]] (mieux)
 
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 [[HTML5 audio et video#Audio.2FVideo_avec_JavaScript|Audio et video avec JavaScript]]
 
=== Produire des vidéographies ===
 
Ressources:
* la [[vidéographie]]
* [[Production de fichiers vidéo pour le web‎‎]]

Version du 4 octobre 2016 à 12:11

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: