« STIC:STIC II - exercice 17 (Stella) » : différence entre les versions
Aller à la navigation
Aller à la recherche
| Ligne 69 : | Ligne 69 : | ||
== Activités en classe == | == Activités en classe == | ||
Encodage de video MP4 en webm et ogv: | (1) Encodage de video MP4 en webm et ogv: | ||
* Installez [http://firefogg.org/ FireOgg] | * Installez [http://firefogg.org/ FireOgg] | ||
(2) Démo video HTML5 | |||
* Commentaire sur les fichiers dans [http://tecfa.unige.ch/guides/html/html5-video/ html5-video] | |||
* Notamment [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html html5-video-track-leanbackplayer.html] (possible départ pour le projet 17) | |||
Notamment | |||
Autres fichiers à explorer: | Autres fichiers à explorer: | ||
| Ligne 84 : | Ligne 81 : | ||
* [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/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) | * [http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt subtitles_en.vtt] (exemple VTT) | ||
(3) Création de code HTML/JS | |||
* 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> | |||
== Liens == | == Liens == | ||
Version du 16 mai 2013 à 17:05
Énoncé de l'exercice 17
Cet exercice du cours STIC II vous permet de vous familiariser avec HTML5 video et audio et des "HTML5 players" (librairies de code JavaScript)
Tâche
Créez une page web interactive qui contient au moins une vidéo sous-titrée et une audio.
- Conseils:
- Choisissez une vidéo de petite résolution
- Mettez une vidéo avec un objectif éducatif et 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 XMedia-recode
- Emplacement du rapport
/etu-maltt/<promotion>/<login>/stic-2/ex17/
Outils et dépositoires
- Un éditeur HTML/JavaScript
- Librairies JavaScript (HTML5 players), en cours on utilise LeanBack Player
- [www.leanbackplayer.com/player_documentation.html 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.
- Install 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.
- L'utilisation doit être ergonomique
- Dispositif: HTML5 vidéo avec sous-titres réalisés avec une librairie JavaScript. On suggère d'utiliser LeanBackPlayer, mais vous en prendre une autre.
- La page doit servir à quelque chose d'utile dans le contexte "MALTT" et la vidéo doit y jouer un rôle important. Voir la promotion R2D2 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édants.
Activités en classe
(1) Encodage de video MP4 en webm et ogv:
- Installez FireOgg
(2) Démo video HTML5
- Commentaire sur les fichiers dans html5-video
- Notamment html5-video-track-leanbackplayer.html (possible départ pour le projet 17)
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
- 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 -->
Liens
- Matériel d'enseignement