STIC:STIC I - exercice 4
Énoncé de l'exercice 17
Cet exercice du cours STIC II vous permet de vous familiariser avec HTML5 video et audio, des "HTML5 players" (librairies de code JavaScript) et à option (!) Flash + Timed Text.
Tâche
Créez une page web interactive qui contient au moins une vidéo avec une piste audio.
- La vidéo doit être réalisée pour HTML5 ou avec Flash.
- La présentation de la vidéo doit impérativement inclure des sous-titres utiles et intéressantes.
- Conseils:
- Produisez des vidéos de petite résolution s'il s'agit de vignettes. Aussi petit que possible, mais néanmoins ergonomique...
- Ajoutez des sous-titres en utilisant un player (exemple LeanBack Player).
- Le format de la vidéo doit être du *.ogv ou du *.mp4 ou du *.webm
- Si tel n'est pas le cas, utilisez un transcoder gratuit pour convertir la vidéo, par exemple FireOgg (plugin Firefox) XMedia-recode
- Combinez cet travail avec un travail pour le cours BASES, la vidéo peut être identique (mais doit évidemment contenir beaucoup de vidéographie)
- Emplacement du rapport
/etu-maltt/<promotion>/<login>/stic-1/ex4/
Outils et dépositoires
Voir aussi: activités en salle de classe (ci-dessous)
- Un éditeur HTML/JavaScript
- 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
- Note: Il faudrait aussi tester le MediaEncoder de Adobe (puisque vous l'avez)
- http://edutechwiki.unige.ch/en/Video_editing (outils video divers)
Contraintes
- Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
- 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 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 une vous-même (pour l'introduction par exemple)
- L'utilisation doit être ergonomique
- Dispositif: HTML5 vidéo avec sous-titres. Soit vous trouvez un navigateur où cela marche, soit vous le réalisez avec une librairie JavaScript. On suggère d'utiliser LeanBackPlayer, mais vous en prendre une autre (Kaltura par exemple)
- Voir les promotions R2D2 et Stella (stic-2/ex17) pour des exemples.
Le rapport:
- Titre, auteur et date
- Liens vers le résultat (fichier HTML, fichier vidéo, fichier sous-titres,)
- Objectifs du module: Il sert à quoi / quelle population ?
- La production: bref résumé de la démarche
- Évaluation de la libraire (HTML5 Player) et de sa documentation
- Evaluation de l'ergonomie et de l'utilité du dispositif
- Difficultés, remarques
- Ressources utilisées, bibliographie.
Suggestions contributions wiki
- Traduire une partie des articles en:WebVTT et
- Documenter un format video
- Utilisation pédagogique de vidéos annotées
- ....
Évaluation
Selon la grille d'analyse utilisée pour les travaux précédents.
Activités en classe
(correspond à la procédure la plus simple à suivre pour réussir l'exercice 4)
(1) Encodage de video MP4 en webm et ogv:
- Installez FireOgg
(2) Démo video HTML5
- Répertoire de fichiers dans html5-video
- 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)
(3) Création de code HTML/JS
(3a) Option 1:
- 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 -->
(3b) Option 2 (prend plus de temps)
- Copiez html5-video-track-leanbackplayer.html et tout le répertoire leanbackplayer
(4) Modification du code pour ajouter des éléments track
(5) Editer des fichiers VTT, en partant des exemples
Liens
- Matériel d'enseignement pour les vidéos HTML5
- en:HTML5 audio and video
- en:WebVTT
- html5-audio/
- en:Multimedia container format
- en:Video editing and conversion
- Pour Flash