« STIC:STIC I - exercice 4 (Utopia) » : différence entre les versions
Aller à la navigation
Aller à la recherche
m (→Contraintes) |
|||
| Ligne 45 : | Ligne 45 : | ||
=== Contraintes === | === Contraintes === | ||
# | # 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) | ||
# 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êmes (pour l'introduction par exemple) | # 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êmes (pour l'introduction par exemple) | ||
# L'utilisation doit être ergonomique | # L'utilisation doit être ergonomique | ||
Version du 6 novembre 2014 à 17:42
Énoncé de l'exercice 4
Objectifs: Cet exercice du cours STIC I vous permet de vous familiariser avec HTML5 video et audio, l'édition vidéo, des "HTML5 players" (librairies de code JavaScript), et à option la création de vidéographies
Tâche
Créez une page web qui contient au moins une vidéo, des sous-titres et une piste audio.
- La vidéo doit être réalisée pour HTML5
- La présentation de la vidéo doit impérativement inclure des sous-titres utiles et intéressants.
- 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 navigateur qui sache les digérer ou 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
- Vous pouvez chercher des synergies avec le cours BASES.
- 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
- 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)
- 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êmes (pour l'introduction par exemple)
- L'utilisation doit être ergonomique
- Dispositif: Une vidéo fonctionnelle avec sous-titres pour HTML5 vidéo. 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) et Tetris (stic-1/ex4) 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 / etc. ?
- 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 vidéo en détail
- Utilisation pédagogique de vidéos annotées
- Documentation d'un logiciel d'édition vidéo (un petit tutoriel)
- C.f. aussi l'exercice alternatif en bas
É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
Activités en classe
Encodage de video MP4 en webm et ogv
- Installez FireOgg
Démo video HTML5
- Répertoire 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) Editer des fichiers VTT, en partant des exemples
Produire des vidéographies
Ressources:
Énoncé de l'exercice 4 (alternative pour deux étudiant(e)s
Je cherche max. deux personnes qui s'intéressent à l'aspect technique. Idéalement, vous devriez commencer rapidement (une première ébauche pour fin novembre). Puisque tout le monde doit contribuer au wiki, les autres peuvent également vous aider ...
(1) Améliorez les pages suivantes.
(2) Améliorez et faites un petit tutoriel pour 1-2 logiciels d'édition vidéo et/ou de vidéographie
(3) Faites un rapport (comme pour les autres exercices). Dans ce rapport dites exactement ce que vous avez fait. Discutez notamment la structure des pages wiki que vous avez améliorées ou crées.
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
- la vidéographie
- Production de fichiers vidéo pour le web
- Pour Flash