STIC:STIC I - exercice 4 (Volt)

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

STIC

Archives STIC

Chantier STIC

Initiation à la pensée computationnelle avec JavaScript

Productions STIC

Ressources STIC

STIC:Contribution Wiki

STIC:Rapport STIC I et II

STIC:STIC I (Edda)

STIC:STIC I - Atelier technique 2

STIC:STIC I - exercice 1 (Drakkar)

STIC:STIC I - exercice 1 (Edda)

STIC:STIC I - exercice 2 (Edda)

STIC:STIC I - exercice 3 (Edda)

STIC:STIC I - exercice 4 (Edda)

STIC:STIC I - exercice 5 (Edda)

STIC:STIC I - exercice 6 (Edda)

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

PROVISOIRE

É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), interaction avec la video avec JavaScript et à option la création de vidéographie.

Tâche

Créez une page web qui contient au moins une vidéo, des sous-titres, une piste audio et deux éléments interactifs (voir ci-dessous)

• La vidéo doit être réalisée pour HTML5
• Utilisez le LeanBack Player.
• La présentation de la vidéo doit impérativement inclure des sous-titres (faits avec VTT), utiles et intéressants.
• Vous devez ajouter un bouton qui amène l'utilisateur à un endroit précis de la vidéo. Ce bouton peut se trouver dans un texte explicatif par exemple.
• Vous devez ajouter un événement qui se déclenche par la vidéo à un moment donné
  • exemples: arrêter la vidéo et poser une question, changer la couleur de la page, afficher une information supplémentaire...
• Conseils:
  • Produisez des vidéos de petite résolution s'il s'agit de vignettes. Aussi petites que possibles, mais néanmoins ergonomiques...
  • Le format de la vidéo doit être du *.ogv ou du *.mp4 ou du *.webm. Le format *.webm est préférable (il est également compatible avec ce wiki, *.mp4 non).
  • Utilisez un transcoder gratuit pour convertir la vidéo, par exemple Firefogg (plugin Firefox) ou XMedia-recode
  • Vous pouvez chercher des synergies avec le cours BASES.

A rendre

• Emplacement du rapport

/etu-maltt/<promotion>/<login>/stic-1/ex4/

Délai

• dimanche 24h, juste avant le début de la période 3

Autre exercice de la même période

• Exercice 3

Contraintes

1. 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)
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 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ême (pour l'introduction par exemple)
3. L'utilisation doit être ergonomique
4. Dispositif: Une vidéo fonctionnelle avec sous-titres pour HTML5. Puisque l'implémentation de VTT est plus que lacunaire pour le moment, on suggère d'utiliser LeanBackPlayer, mais vous pouvez prendre un autre player (Kaltura par exemple)
5. Exemples (sans interactivité!): promotions Utopia (ex4), 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. ? (donc: objectifs pour la population ciblée !!)
• La production: bref résumé de la démarche
• Évaluation de la librairie (HTML5 Player) et de sa documentation
• Évaluation de l'ergonomie et de l'utilité du dispositif
• Difficultés, remarques
• Ressources utilisées, bibliographie.

Suggestions contributions wiki

• Améliorer les articles WebVTT et HTML5 audio et video
• Documenter un format vidéo en détail
• Utilisation pédagogique de vidéos annotées
• Utilisation pédagogique de vidéographies
• Documentation d'un logiciel d'édition vidéo (un petit tutoriel pour la production de fichiers vidéo pour le web
• Documentation d'un logiciel pour créer des vidéographies (screencasts)
• 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

Bugs

Attention:

• Les fichiers VTT risquent de ne pas marcher en "local". Déposez les fichiers sur un serveur web ou démarrez un serveur web local.
• Certains navigateurs vont bloquer des contenus locaux pour des raisons de sécurité ...
• Si vous utilisez Leanbackplayer, il faut inclure une vidéo *.ogv, sinon problèmes avec Firefox.

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 FireOgg ou le player/convertisseur VLC

Démo video HTML5

• Tutoriel: HTML5 audio et video

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>

• Dossier 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) Éditer des fichiers VTT, en partant des exemples

• subtitles_en.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 Audio et video avec JavaScript

Produire des vidéographies

Ressources:

• la vidéographie
• Production de fichiers vidéo pour le web‎‎

Énoncé d'un exercice alternatif pour deux étudiant(e)s max.

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 substantiellement les pages suivantes (ou des pages liées qui décrivent une technologie précise)

• Vidéographie
• Production de fichiers vidéo pour le web

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

Vidéo et audio HTML5

• Production de fichiers vidéo pour le web‎‎
• la vidéographie
• Montage et conversion video (pour le moment juste une définition + qqs. liens)

• en:HTML5 audio and video
• WebVTT et en:WebVTT

• html5-audio/
• en:Multimedia container format
• en:Video editing and conversion
• en:Video_editing (outils video divers)

Players HTML5

• 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
  • Miro Video Converter, convertisseur vers MP4, WebM (vp8), Ogg Theora, ou pour Android, iPhone, et iPad ; téléchargement gratuit pour windows et mac depuis le site.