« STIC:STIC I - exercice 4 » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 9 : Ligne 9 :


Créez une page web interactive qui contient au moins une vidéo avec une piste audio.  
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 Flash.
* 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.
* La présentation de la vidéo doit impérativement inclure des sous-titres utiles et intéressantes.


* Conseils:  
* Conseils:  
** Choisissez une vidéo de petite résolution
** 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 [http://leanbackplayer.com/ LeanBack Player]).
** Ajoutez des sous-titres en utilisant un player (exemple [http://leanbackplayer.com/ LeanBack Player]).
** Le format de la vidéo doit être du *.ogv ou du *.mp4 ou du *.webm
** Le format de la vidéo doit être du *.ogv ou du *.mp4 ou du *.webm

Version du 7 novembre 2013 à 18:45

Cette page fait partie des cours STIC I et STIC II

STIC
Archives STIC
Chantier STIC
Initiation à la pensée computationnelle avec JavaScript
Productions STIC
Ressources STIC
STIC:Ateliers techniques
STIC:Contribution Wiki
STIC:Cours STIC (Drakkar)
STIC:Rapport STIC I et II
STIC:STIC I (Drakkar)
STIC:STIC I - Atelier technique 1
STIC:STIC I - Atelier technique 2
STIC:STIC I - Atelier technique 3
STIC:STIC I - Atelier technique 4
STIC:STIC I - Atelier technique 5
STIC:STIC I - exercice 1 (Drakkar)
STIC:STIC I - exercice 2 (Drakkar)
STIC:STIC I - exercice 3 (Drakkar)
STIC:STIC I - exercice 4 (Drakkar)
STIC:STIC I - exercice 5 (Drakkar)
STIC:STIC I - exercice 6 (Drakkar)
STIC:STIC II (Baldur)
STIC:STIC III
STIC:STIC III (2022)
STIC:STIC III (2022)/Exploration des Problématiques Liées aux Ponts et Détails
STIC:STIC IV

É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)

Contraintes

  1. Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
  2. 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)
  3. L'utilisation doit être ergonomique
  4. 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)
  5. 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:

(2) Démo video HTML5

Autres fichiers à explorer:

(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)

(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
Pour Flash
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_4&oldid=32191 »