« STIC:STIC I - exercice 4 (Aegir) » : différence entre les versions
(Page créée avec « {{ En construction }} {{stic12}} <categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-co... ») |
Aucun résumé des modifications |
||
Ligne 3 : | Ligne 3 : | ||
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> | <categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> | ||
== Introduction == | |||
Cet exercice introduit l'utilisation des vidéos d'un point de vue technique, notamment en ce qui concerne la possibilité d'inclure une vidéo dans une page HTML5 sans la nécessité d'un plugin externe (e.g. Flash). Cet exercice est également en relation avec le cours [[BASES]] qui va démarrer pendant la période 2, même si la production de vidéographie est prévue pour plus tard. | |||
=== Connaissances/compétences envisagées === | |||
À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes : | |||
* Savoir évaluer de manière critique l'utilisation de la vidéo, surtout en termes pédagogiques | |||
* Comprendre qu'est-ce qu'un fichier vidéo et de quels éléments il se compose, ainsi que les différentes extensions et codecs associés | |||
* Savoir ajouter une vidéo à une page HTML5 avec | |||
** Différentes versions de la vidéo et un mécanisme de "fallback" pour maximiser la compatibilité | |||
** Des sous-titres ou autres éléments contextuels | |||
* Comprendre les bases de la vidéographie et de l'édition vidéo | |||
* Savoir intégrer des interactions avancées (e.g. quiz, coordination vidéo/contenu textuel, ...) avec JavaScript/DOM | |||
=== Prérequis === | |||
[[HTML5]] de base et [[Premiers pas avec JavaScript]]. | |||
Logiciels utilisés et à avoir installés de préférence avant le cours en présence : | |||
* [[Brackets]] / [[Visual studio code]] (ou autre éditeur de texte à choix) | |||
* [[OpenShot]] video editor (ou si vous maîtrisez déjà l'édition vidéo, un autre éditeur vidéo à choix) | |||
== Activités en salle de classe == | |||
=== Utilisation pédagogique de la vidéo === | |||
'''Discussion/exploration: Que peut-on faire avec des vidéos ?''' | |||
* Tutoriels utilisation de logiciels (= vidéographie / screencast) | |||
* Filmer des gestes pour montrer comment faire (apprentissage procédural) | |||
* Filmer des participants à une activité sociale (entretien d'embauche) - Capsules, vignettes. | |||
* Démonstrations didactiques | |||
* Enseignement de langues (dialogues, body language, etc.) | |||
* Analyse de mouvement (ex. physiothérapie). Filmer un sujet que l'on analyse après. | |||
* Témoignages (par ex. personnes qui ont des pathologies, expériences de vie, etc.) | |||
* Vidéos pour donner du feedback (gestion d'entretiens, sport, etc.) | |||
* Animation transformée en vidéo (par exemple, molécules) | |||
* Podcast - conférences - MOOC | |||
* Filmer l'utilisation d'un langage des signes et donner un feedback | |||
Voir aussi: | |||
* Travaux Tetris - Yolan (~ ex4) | |||
=== Outils d'édition vidéo === | |||
==== Logiciel utilisé en classe ==== | |||
Logiciel vu en cours : | |||
* {{Goblock | [[OpenShot]] }} (page ébauche) | |||
==== Alternatives ==== | |||
Alternatives Windows : | |||
* [https://www.shotcut.org/ ShotCut] | |||
* [http://avidemux.sourceforge.net/ Avidemux] (simple à utiliser) | |||
Alternatives Mac (à vérifier) : | |||
* IMovie (déjà disponible sur la plupart des machines) | |||
* ShotCut | |||
Alternatives Linux : | |||
* [https://kdenlive.org/ Kdenlive] | |||
* [https://www.shotcut.org/ ShotCut] | |||
==== Guides et ressources ==== | |||
Autres informations / guides : | |||
* Ressource: [[Production de fichiers vidéo pour le web]] | |||
* Ressource: [[Montage et conversion video]] | |||
* Fichiers vidéo pour jouer: http://tecfa.unige.ch/guides/videos-test | |||
* [https://www.google.com/advanced_video_search?hl=en&q=videography&tbm=vid Google video search] | |||
=== Produire des vidéographies (utile pour le cours BASES) === | |||
* Ressource: [[vidéographie]] | |||
* Démo: {{Goblock |[[Screencast-O-Matic]]}} | |||
=== Encodage de video MP4 en webm et ogv === | |||
* La plupart des éditeurs vidéo permettent un recodage assez rapide au niveau du containeur, codec et taille (explorez notamment "export" / "export ex" / save as" / "enregister sous" / etc). | |||
* Pour faire plus simple: installez le player/convertisseur [http://www.videolan.org/vlc/ VLC] ou le plus simple [https://handbrake.fr/ handbrake] (produit du mp4 varié). La page [[montage et conversion video]] liste d'autres alternatives. | |||
=== Démo video HTML5 === | |||
* '''Tutoriel''': {{Goblock | [[HTML5 audio et video]] }} | |||
Exemple basique : | |||
<source lang="HTML5"> | |||
<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> | |||
</source> | |||
* Dossier de fichiers dans [http://tecfa.unige.ch/guides/html/html5-video/ html5-video] (y compris [http://tecfa.unige.ch/guides/html/html5-video/videos/ videos]) | |||
Fichiers à explorer: | |||
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html html5-video-simple.html] | |||
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-with_style.html html5-video-with_style.html] | |||
* [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html html5-video-track.html] | |||
* [http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt subtitles_en.vtt] (exemple VTT) | |||
=== Sous-titres === | |||
* http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html | |||
* [[WebVTT]] et [[:en:WebVTT]] (mieux) | |||
Utilisation de sous-titres: | |||
* Traduction | |||
* Mal-entendant(e)s | |||
* Apprentissage de langues (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é === | |||
==== API Audio/Vidéo ==== | |||
Avec les tags HTML5 qui permettent d'implémenter des éléments audio/vidéo, il existe également une API qui permet à JavaScript d'interagir avec les éléments audio/vidéo comme s'ils étaient des "normaux" éléments du DOM. Voir : | |||
* [[HTML5 audio et video]] et notamment la section [[HTML5 audio et video#Audio.2FVideo_avec_JavaScript|Audio et video avec JavaScript]] | |||
* [https://www.w3schools.com/tags/ref_av_dom.asp HTML5 audio/video DOM référence sur W3Schools] | |||
==== Play, Pause and Stop ==== | |||
Ceci permet, par exemple, de créer ses propres boutons pour les contrôles de base de la vidéo. | |||
; Code HTML5 | |||
<source lang="HTML5"> | |||
<!-- Video --> | |||
<video id="myVideo"> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv"> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4"> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm"> | |||
</video> | |||
<hr> | |||
<!-- Boutons --> | |||
<button id="playBtn">Play</button> <button id="pauseBtn">Pause</button> <button id="stopBtn">Stop</button> | |||
</source> | |||
; Code JavaScript | |||
<source lang="JavaScript"> | |||
//Identifier les éléments HTML | |||
var myVideo = document.getElementById("myVideo"); | |||
var playBtn = document.getElementById("playBtn"); | |||
var pauseBtn = document.getElementById("pauseBtn"); | |||
var stopBtn = document.getElementById("stopBtn"); | |||
//Démarrer la lecture avec play() | |||
playBtn.onclick = function () { | |||
myVideo.play(); | |||
} | |||
//Mettre en pause la lecture | |||
pauseBtn.onclick = function () { | |||
myVideo.pause(); | |||
} | |||
//La fonction stop() n'existe pas, donc on combine pause avec currentTime = 0; | |||
stopBtn.onclick = function () { | |||
myVideo.pause(); | |||
myVideo.currentTime = 0; | |||
} | |||
</source> | |||
* Voir cet exemple https://codepen.io/mafritz/pen/mexXQe | |||
* Pour exporter les 3 pages (html, css, js), utiliser le bouton "export" en bas à droite | |||
==== Pointer à un moment précis de la vidéo ==== | |||
Le code du bouton stop de l'exemple précédent introduit un élément qui peut être exploité de manière plus spécifique : la propriété <code>.currentTime</code> qui détermine le temps (en seconds) de lecture de la vidéo. On peut utiliser cette propriété pour '''créer des pointages spécifiques''' à des moments précis dans la vidéo. Ceci peut avoir un impact pédagogique évident, car '''l'un des problèmes des vidéos est la difficulté de (ré)trouver les informations spécifiques dont on a besoin'''. | |||
Pour créer un pointage spécifique on peut par exemple combiner la propriété <code>.currentTime</code> et la méthode <code>.play()</code> pour faire démarrer la lecture à un moment précis. Par exemple : | |||
; Code JavaScript | |||
<source lang="JavaScript"> | |||
//Identifier votre vidéo, par exemple | |||
var myVideo = document.getElementById("myVideo"); | |||
//Créer une fonction de pointage | |||
function pointTo(seconds) { | |||
//Déplacer la lecture au moment souhaité | |||
myVideo.currentTime = seconds; | |||
//Faire démarrer la lecture | |||
myVideo.play(); | |||
} | |||
</source> | |||
À ce moment, tout élément dans le DOM peut devenir l'élément déclencheur, par exemple : | |||
; Code HTML5 | |||
<source lang="HTML5"> | |||
<!-- Pointage à l'intérieur d'un texte. Veuillez noter que l'attribut href="#myVideo" permet de créer un ancrage interne à la page et scroller vers la vidéo --> | |||
<p>La vidéo suivante propose des informations sur Wikipedia. Vous pouvez utiliser les ancrages suivants pour ces morceaux d'intérêts :</p> | |||
<ul> | |||
<li><a href="#myVideo" onclick="pointTo(96)">Qui sont les contributeurs?</a></li> | |||
<li><a href="#myVideo" onclick="pointTo(165)">Quelles sont les nouvelles challenges?</a></li> | |||
<li>...</li> | |||
<li>...</li> | |||
<li>...</li> | |||
</ul> | |||
<!-- Video --> | |||
<video id="myVideo" controls> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv"> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4"> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm"> | |||
</video> | |||
</source> | |||
* Voir cet exemple https://codepen.io/mafritz/pen/eGXWKL | |||
==== Événements déclenchés par la vidéo ==== | |||
Il est également possible d'utiliser des événements liés directement à la vidéo pour déclencher des changements sur la page. Par exemple, on peut "écouter" les événements suivants : | |||
* <code>playing</code> ou <code>onplaying</code> : détermine si la vidéo est en cours de lecture | |||
* <code>pause</code> ou <code>onpause</code> : détermine si la lecture de la vidéo est arrêtée | |||
Voici un exemple qui montre ces event listeners. Veuillez noter que ces événements sont causés par n'importe quel moyen utilisé pour jouer ou mettre en pause la vidéo (boutons ou controls de la vidéo), car justement l'event listener est associé à la vidéo, pas aux boutons. | |||
;Code HTML5 | |||
<source lang="HTML5"> | |||
<h1>Événements déclenchés par la vidéo</h1> | |||
<p>Faites démarrer et arrêter la vidéo pour voir les événements relatifs.</p> | |||
<!-- Video --> | |||
<video id="myVideo" controls> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv"> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4"> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm"> | |||
</video> | |||
<!-- Boutons alternatifs --> | |||
<p> | |||
<button onclick="myVideo.play()">Play</button> | <button onclick="myVideo.pause()">Pause</button> | |||
</p> | |||
<hr> | |||
<p>Liste des événements : </p> | |||
<ul id="eventList"> | |||
</ul> | |||
</source> | |||
; Code JavaScript | |||
<source lang="JavaScript"> | |||
//Identifier votre vidéo, par exemple | |||
var myVideo = document.getElementById("myVideo"); | |||
//Identifier la liste à populer | |||
var list = document.getElementById("eventList"); | |||
//Play event (triggered however you play) | |||
myVideo.onplaying = function () { | |||
list.innerHTML += "<li>Playing event</li>"; | |||
} | |||
//Pause event (triggered however your pause) | |||
myVideo.onpause = function () { | |||
list.innerHTML += "<li>Pause event</li>"; | |||
} | |||
</source> | |||
* Voir cet exemple https://codepen.io/mafritz/pen/Oxqjyr | |||
Un autre événement déclenché par la vidéo qui peut être utile est l'événement : | |||
* <code>timeupdate</code> ou <code>ontimeupdate</code> | |||
Cet événement est déclenché quand la lecture de la vidéo se déplace dans le temps (en toute direction) et peut être utilisé pour déterminer des comportements en fonction du temps de la vidéo. | |||
; Code HTML | |||
<source lang="HTML5"> | |||
<h1>Timeupdate example</h1> | |||
<!-- Video --> | |||
<video id="myVideo" controls> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv"> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4"> | |||
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm"> | |||
</video> | |||
<!-- Current time --> | |||
<h4>Current time</h4> | |||
<p id="showTime"></p> | |||
</source> | |||
; Code JavaScript | |||
<source lang="JavaScript"> | |||
//Identifier votre vidéo, par exemple | |||
var myVideo = document.getElementById("myVideo"); | |||
//Identifier où montrer le temps | |||
var showTime = document.getElementById("showTime"); | |||
//Timeupdate event listener | |||
myVideo.ontimeupdate = function () { | |||
showTime.innerHTML = myVideo.currentTime; | |||
} | |||
</source> | |||
* Voir cet exemple https://codepen.io/mafritz/pen/oGVeKQ | |||
Veuillez noter: quand la vidéo est en lecture, l'événement ontimeupdate n'est pas toujours déclenché à des intervalles réguliers, car cela dépend par exemple de la puissance de l'ordinateur ou de combien d'autres événements sont déclenchés dans la page. | |||
Pour un exemple plus complexe lié à l'apprentissage voir : | |||
* [[HTML5_audio_et_video#Poser_une_question_.C3.A0_un_moment_donn.C3.A9_dans_la_lecture_d.27une_vid.C3.A9o|Poser une question à un moment donnée dans la lecture de la vidéo]] | |||
* [https://codepen.io/mafritz/pen/GpdbEq Lien direct à l'exemple] | |||
== Projet 4 / Tâche == | |||
Voici de suite la description détaillée de la tâche et le matériel de support à votre disposition pour compléter l'exercice pendant la période à distance. | |||
=== Lectures et matériel de support === | |||
Ces articles proposent les contenus utiles aux finalités pédagogiques du cours. Pour compléter l'exercice ou atteindre les objectifs spécifiques à votre dispositif (voir plus bas), d'autres ressources peuvent être nécessaires. | |||
* {{Goblock | [[Interactivité avec JavaScript]] }} : aspects théoriques et pratiques, lecture commune avec exercice 3, niveau des exemples à calibrer en fonction de vos besoins et intérêts | |||
* {{Goblock | [[HTML5 audio et video]] }} : aspects théoriques et pratiques, niveau des exemples à calibrer en fonction de vos besoins et intérêts. | |||
=== Dispositif === | |||
Créez une page web qui contient une vidéo, des sous-titres, une piste audio et deux éléments interactifs (voir contraintes) : | |||
* Créez/éditez une vidéo avec au moins une partie faite par vous | |||
* Créez des sous-titres de type VTT qui accompagnent la vidéo (pas forcément une transcription de l'audio) | |||
* Insérez la vidéo dans une page HTML5 valide en utilisant les balises HTML5 | |||
* Ajoutez les sous-titres à la vidéo | |||
* Créez des éléments interactifs avec JavaScript qui permettent d'interagir avec la vidéo | |||
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 éditeur vidéo ou un transcoder gratuit pour convertir la vidéo, par exemple [https://www.online-convert.com Online Convert] ou [http://www.xmedia-recode.de/download.html XMedia-recode]. | |||
* Une vidéo type durera entre 2 et 5 minutes. | |||
Exemples : | |||
* Avec interactivité : volée Volt et suivantes (stic-1/ex4) | |||
* Sans interactivité : promotions Utopia (ex4), R2D2 et Stella (stic-2/ex17) et Tetris (stic-1/ex4) | |||
==== Contraintes ==== | |||
* Contenu selon vos envies, mais en rapport avec une thématique MALTT | |||
* 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 être réalisée '''pour HTML5''' et elle doit impérativement inclure des '''sous-titres faits avec VTT''', utiles et intéressants (pas forcément une transcription audio). | |||
* '''Une seule vidéo sur votre page/dispositif, avec une durée entre 2 et 5 minutes'''. La vidéo doit être téléversée sur le serveur tecfaetu.unige.ch. Essayez de réduire la taille au maximum (sans perdre trop en qualité). | |||
* 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 ou un "collage cohérent" de deux vidéos ou plus. | |||
* 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) et de '''respecter les droit d'auteur/utilisation''' | |||
* Vous devez ajouter au moins un '''élément (e.g. bouton) qui amène l'utilisateur''' à un endroit précis de la vidéo. Cet élément peut se trouver dans un texte explicatif par exemple. | |||
* Vous devez ajouter au moins '''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... | |||
* Vous ne pouvez pas combiner '''sur la même page''' les exercices 3 et 4 | |||
** Mais vous pouvez utiliser le même sujet (e.g. ''mini''-site avec deux pages) | |||
=== Critères d'é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 | |||
* ''Raccourcis'' avec les boutons bien labellisés et qui amènent à des endroits intéressants de la vidéo | |||
* Éléments interactifs bien intégrés et qui soutient les objectifs d'apprentissage | |||
=== Rapport === | |||
Faites un rapport selon les guidelines habituelles : | |||
* voir [[STIC:Rapport STIC I et II]] | |||
En particulier pour cet exercice, essayez d'expliquer : | |||
* Quelle est la valeur ajoutée de la vidéo dans votre dispositif ? | |||
* L'intérêt des éléments interactifs liés à la vidéo comparé à une version "normale" | |||
=== Contribution Wiki === | |||
Contribution libre comme d'habitude : | |||
* [[STIC:Contribution Wiki]] | |||
Quelques suggestions : | |||
* 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éographie]]s | |||
* Documentation d'un logiciel d'édition vidéo (un petit tutoriel pour la [[production de fichiers vidéo pour le web]] ou [[Montage et conversion video]] | |||
* Documentation d'un logiciel pour créer des [[vidéographie]]s (screencasts) | |||
=== 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é ... | |||
===Délai=== | |||
{{Bloc important | Dimanche 21:00, juste avant le début de la période 3 }} | |||
== Ressources == | |||
; 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) | |||
* [[HTML5 audio et video]] | |||
* [[:en:HTML5 audio and video]] | |||
* [[WebVTT]] et [[:en:WebVTT]] | |||
* [http://tecfa.unige.ch/guides/html/html5-audio/ html5-audio/] | |||
* [[:en:Multimedia container format]] | |||
* [[:en:Video editing and conversion]] | |||
* [[:en:Video_editing]] (outils video divers) | |||
; Players HTML5 | |||
Si vous voulez déjà explorer les [[bibliothèques JavaScript]] (qui seront traitées en P3), vous pouvez essayez une bibliothèque audio/vidéo, par exemple : | |||
* [http://www.leanbackplayer.com/player_documentation.html LeanBack Player documentation] | |||
* [http://www.leanbackplayer.com/generator/ LeanBack Player HTML generator] (utile pour produire tout le code HTML + JS) | |||
; Video download | |||
* [https://vimeo.com/ Vimeo] Vidéos de qualité, mais il faut s'enregistrer | |||
* [https://www.google.com/advanced_video_search?hl=en&q=videography&tbm=vid Google video search] | |||
* [https://addons.mozilla.org/en-US/firefox/addon/3006 Video downloadhelper], Firefox extension, permet de prendre des vidéos de YouTube par exemple | |||
* [[:en:Sound Assets]] (trouver des sons) | |||
; Convertisseurs | |||
* [http://www.online-convert.com/ Online-convert.com] Online converter service for various file formats. | |||
* [http://www.mediaconverter.org/ MediaConverter.org] Online converter. Also can download from websites. | |||
* [http://www.onlinevideoconverter.com/ OnlineVideoConverter.com]. Online converter. Heavy adds. | |||
* Installez [http://firefogg.org/ FireOgg], a Firefox plugin for creating ogg and webm video files | |||
* [http://www.mirovideoconverter.com/ 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. | |||
== Aide == | |||
=== Discussion de cette page === | |||
Utilisez la page discussion de '''cette page''' pour poser des questions. Pour insérer un nouveau titre, utilisez simplement le "+". | |||
'''Important''': Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page. |
Version du 19 octobre 2020 à 18:32
Cet article est en construction: un auteur est en train de le modifier.
En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.
Introduction
Cet exercice introduit l'utilisation des vidéos d'un point de vue technique, notamment en ce qui concerne la possibilité d'inclure une vidéo dans une page HTML5 sans la nécessité d'un plugin externe (e.g. Flash). Cet exercice est également en relation avec le cours BASES qui va démarrer pendant la période 2, même si la production de vidéographie est prévue pour plus tard.
Connaissances/compétences envisagées
À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :
- Savoir évaluer de manière critique l'utilisation de la vidéo, surtout en termes pédagogiques
- Comprendre qu'est-ce qu'un fichier vidéo et de quels éléments il se compose, ainsi que les différentes extensions et codecs associés
- Savoir ajouter une vidéo à une page HTML5 avec
- Différentes versions de la vidéo et un mécanisme de "fallback" pour maximiser la compatibilité
- Des sous-titres ou autres éléments contextuels
- Comprendre les bases de la vidéographie et de l'édition vidéo
- Savoir intégrer des interactions avancées (e.g. quiz, coordination vidéo/contenu textuel, ...) avec JavaScript/DOM
Prérequis
HTML5 de base et Premiers pas avec JavaScript.
Logiciels utilisés et à avoir installés de préférence avant le cours en présence :
- Brackets / Visual studio code (ou autre éditeur de texte à choix)
- OpenShot video editor (ou si vous maîtrisez déjà l'édition vidéo, un autre éditeur vidéo à choix)
Activités en salle de classe
Utilisation pédagogique de la vidéo
Discussion/exploration: Que peut-on faire avec des vidéos ?
- Tutoriels utilisation de logiciels (= vidéographie / screencast)
- Filmer des gestes pour montrer comment faire (apprentissage procédural)
- Filmer des participants à une activité sociale (entretien d'embauche) - Capsules, vignettes.
- Démonstrations didactiques
- Enseignement de langues (dialogues, body language, etc.)
- Analyse de mouvement (ex. physiothérapie). Filmer un sujet que l'on analyse après.
- Témoignages (par ex. personnes qui ont des pathologies, expériences de vie, etc.)
- Vidéos pour donner du feedback (gestion d'entretiens, sport, etc.)
- Animation transformée en vidéo (par exemple, molécules)
- Podcast - conférences - MOOC
- Filmer l'utilisation d'un langage des signes et donner un feedback
Voir aussi:
- Travaux Tetris - Yolan (~ ex4)
Outils d'édition vidéo
Logiciel utilisé en classe
Logiciel vu en cours :
- (page ébauche)
Alternatives
Alternatives Windows :
Alternatives Mac (à vérifier) :
- IMovie (déjà disponible sur la plupart des machines)
- ShotCut
Alternatives Linux :
Guides et ressources
Autres informations / guides :
- Ressource: Production de fichiers vidéo pour le web
- Ressource: Montage et conversion video
- Fichiers vidéo pour jouer: http://tecfa.unige.ch/guides/videos-test
- Google video search
Produire des vidéographies (utile pour le cours BASES)
- Ressource: vidéographie
- Démo:
Encodage de video MP4 en webm et ogv
- La plupart des éditeurs vidéo permettent un recodage assez rapide au niveau du containeur, codec et taille (explorez notamment "export" / "export ex" / save as" / "enregister sous" / etc).
- Pour faire plus simple: installez le player/convertisseur VLC ou le plus simple handbrake (produit du mp4 varié). La page montage et conversion video liste d'autres alternatives.
Démo video HTML5
- Tutoriel:
Exemple basique :
<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)
Fichiers à explorer:
- html5-video-simple.html
- html5-video-with_style.html
- html5-video-track.html
- subtitles_en.vtt (exemple VTT)
Sous-titres
Utilisation de sous-titres:
- Traduction
- Mal-entendant(e)s
- Apprentissage de langues (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é
API Audio/Vidéo
Avec les tags HTML5 qui permettent d'implémenter des éléments audio/vidéo, il existe également une API qui permet à JavaScript d'interagir avec les éléments audio/vidéo comme s'ils étaient des "normaux" éléments du DOM. Voir :
- HTML5 audio et video et notamment la section Audio et video avec JavaScript
- HTML5 audio/video DOM référence sur W3Schools
Play, Pause and Stop
Ceci permet, par exemple, de créer ses propres boutons pour les contrôles de base de la vidéo.
- Code HTML5
<!-- Video -->
<video id="myVideo">
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv">
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4">
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm">
</video>
<hr>
<!-- Boutons -->
<button id="playBtn">Play</button> <button id="pauseBtn">Pause</button> <button id="stopBtn">Stop</button>
- Code JavaScript
//Identifier les éléments HTML
var myVideo = document.getElementById("myVideo");
var playBtn = document.getElementById("playBtn");
var pauseBtn = document.getElementById("pauseBtn");
var stopBtn = document.getElementById("stopBtn");
//Démarrer la lecture avec play()
playBtn.onclick = function () {
myVideo.play();
}
//Mettre en pause la lecture
pauseBtn.onclick = function () {
myVideo.pause();
}
//La fonction stop() n'existe pas, donc on combine pause avec currentTime = 0;
stopBtn.onclick = function () {
myVideo.pause();
myVideo.currentTime = 0;
}
- Voir cet exemple https://codepen.io/mafritz/pen/mexXQe
- Pour exporter les 3 pages (html, css, js), utiliser le bouton "export" en bas à droite
Pointer à un moment précis de la vidéo
Le code du bouton stop de l'exemple précédent introduit un élément qui peut être exploité de manière plus spécifique : la propriété .currentTime
qui détermine le temps (en seconds) de lecture de la vidéo. On peut utiliser cette propriété pour créer des pointages spécifiques à des moments précis dans la vidéo. Ceci peut avoir un impact pédagogique évident, car l'un des problèmes des vidéos est la difficulté de (ré)trouver les informations spécifiques dont on a besoin.
Pour créer un pointage spécifique on peut par exemple combiner la propriété .currentTime
et la méthode .play()
pour faire démarrer la lecture à un moment précis. Par exemple :
- Code JavaScript
//Identifier votre vidéo, par exemple
var myVideo = document.getElementById("myVideo");
//Créer une fonction de pointage
function pointTo(seconds) {
//Déplacer la lecture au moment souhaité
myVideo.currentTime = seconds;
//Faire démarrer la lecture
myVideo.play();
}
À ce moment, tout élément dans le DOM peut devenir l'élément déclencheur, par exemple :
- Code HTML5
<!-- Pointage à l'intérieur d'un texte. Veuillez noter que l'attribut href="#myVideo" permet de créer un ancrage interne à la page et scroller vers la vidéo -->
<p>La vidéo suivante propose des informations sur Wikipedia. Vous pouvez utiliser les ancrages suivants pour ces morceaux d'intérêts :</p>
<ul>
<li><a href="#myVideo" onclick="pointTo(96)">Qui sont les contributeurs?</a></li>
<li><a href="#myVideo" onclick="pointTo(165)">Quelles sont les nouvelles challenges?</a></li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<!-- Video -->
<video id="myVideo" controls>
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv">
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4">
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm">
</video>
- Voir cet exemple https://codepen.io/mafritz/pen/eGXWKL
Événements déclenchés par la vidéo
Il est également possible d'utiliser des événements liés directement à la vidéo pour déclencher des changements sur la page. Par exemple, on peut "écouter" les événements suivants :
playing
ouonplaying
: détermine si la vidéo est en cours de lecturepause
ouonpause
: détermine si la lecture de la vidéo est arrêtée
Voici un exemple qui montre ces event listeners. Veuillez noter que ces événements sont causés par n'importe quel moyen utilisé pour jouer ou mettre en pause la vidéo (boutons ou controls de la vidéo), car justement l'event listener est associé à la vidéo, pas aux boutons.
- Code HTML5
<h1>Événements déclenchés par la vidéo</h1>
<p>Faites démarrer et arrêter la vidéo pour voir les événements relatifs.</p>
<!-- Video -->
<video id="myVideo" controls>
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv">
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4">
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm">
</video>
<!-- Boutons alternatifs -->
<p>
<button onclick="myVideo.play()">Play</button> | <button onclick="myVideo.pause()">Pause</button>
</p>
<hr>
<p>Liste des événements : </p>
<ul id="eventList">
</ul>
- Code JavaScript
//Identifier votre vidéo, par exemple
var myVideo = document.getElementById("myVideo");
//Identifier la liste à populer
var list = document.getElementById("eventList");
//Play event (triggered however you play)
myVideo.onplaying = function () {
list.innerHTML += "<li>Playing event</li>";
}
//Pause event (triggered however your pause)
myVideo.onpause = function () {
list.innerHTML += "<li>Pause event</li>";
}
- Voir cet exemple https://codepen.io/mafritz/pen/Oxqjyr
Un autre événement déclenché par la vidéo qui peut être utile est l'événement :
timeupdate
ouontimeupdate
Cet événement est déclenché quand la lecture de la vidéo se déplace dans le temps (en toute direction) et peut être utilisé pour déterminer des comportements en fonction du temps de la vidéo.
- Code HTML
<h1>Timeupdate example</h1>
<!-- Video -->
<video id="myVideo" controls>
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv">
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4">
<source src="http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm">
</video>
<!-- Current time -->
<h4>Current time</h4>
<p id="showTime"></p>
- Code JavaScript
//Identifier votre vidéo, par exemple
var myVideo = document.getElementById("myVideo");
//Identifier où montrer le temps
var showTime = document.getElementById("showTime");
//Timeupdate event listener
myVideo.ontimeupdate = function () {
showTime.innerHTML = myVideo.currentTime;
}
- Voir cet exemple https://codepen.io/mafritz/pen/oGVeKQ
Veuillez noter: quand la vidéo est en lecture, l'événement ontimeupdate n'est pas toujours déclenché à des intervalles réguliers, car cela dépend par exemple de la puissance de l'ordinateur ou de combien d'autres événements sont déclenchés dans la page.
Pour un exemple plus complexe lié à l'apprentissage voir :
Projet 4 / Tâche
Voici de suite la description détaillée de la tâche et le matériel de support à votre disposition pour compléter l'exercice pendant la période à distance.
Lectures et matériel de support
Ces articles proposent les contenus utiles aux finalités pédagogiques du cours. Pour compléter l'exercice ou atteindre les objectifs spécifiques à votre dispositif (voir plus bas), d'autres ressources peuvent être nécessaires.
- : aspects théoriques et pratiques, lecture commune avec exercice 3, niveau des exemples à calibrer en fonction de vos besoins et intérêts
- : aspects théoriques et pratiques, niveau des exemples à calibrer en fonction de vos besoins et intérêts.
Dispositif
Créez une page web qui contient une vidéo, des sous-titres, une piste audio et deux éléments interactifs (voir contraintes) :
- Créez/éditez une vidéo avec au moins une partie faite par vous
- Créez des sous-titres de type VTT qui accompagnent la vidéo (pas forcément une transcription de l'audio)
- Insérez la vidéo dans une page HTML5 valide en utilisant les balises HTML5
- Ajoutez les sous-titres à la vidéo
- Créez des éléments interactifs avec JavaScript qui permettent d'interagir avec la vidéo
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 éditeur vidéo ou un transcoder gratuit pour convertir la vidéo, par exemple Online Convert ou XMedia-recode.
- Une vidéo type durera entre 2 et 5 minutes.
Exemples :
- Avec interactivité : volée Volt et suivantes (stic-1/ex4)
- Sans interactivité : promotions Utopia (ex4), R2D2 et Stella (stic-2/ex17) et Tetris (stic-1/ex4)
Contraintes
- Contenu selon vos envies, mais en rapport avec une thématique MALTT
- 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 être réalisée pour HTML5 et elle doit impérativement inclure des sous-titres faits avec VTT, utiles et intéressants (pas forcément une transcription audio).
- Une seule vidéo sur votre page/dispositif, avec une durée entre 2 et 5 minutes. La vidéo doit être téléversée sur le serveur tecfaetu.unige.ch. Essayez de réduire la taille au maximum (sans perdre trop en qualité).
- 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 ou un "collage cohérent" de deux vidéos ou plus.
- 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) et de respecter les droit d'auteur/utilisation
- Vous devez ajouter au moins un élément (e.g. bouton) qui amène l'utilisateur à un endroit précis de la vidéo. Cet élément peut se trouver dans un texte explicatif par exemple.
- Vous devez ajouter au moins 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...
- Vous ne pouvez pas combiner sur la même page les exercices 3 et 4
- Mais vous pouvez utiliser le même sujet (e.g. mini-site avec deux pages)
Critères d'é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
- Raccourcis avec les boutons bien labellisés et qui amènent à des endroits intéressants de la vidéo
- Éléments interactifs bien intégrés et qui soutient les objectifs d'apprentissage
Rapport
Faites un rapport selon les guidelines habituelles :
En particulier pour cet exercice, essayez d'expliquer :
- Quelle est la valeur ajoutée de la vidéo dans votre dispositif ?
- L'intérêt des éléments interactifs liés à la vidéo comparé à une version "normale"
Contribution Wiki
Contribution libre comme d'habitude :
Quelques suggestions :
- 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 ou Montage et conversion video
- Documentation d'un logiciel pour créer des vidéographies (screencasts)
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é ...
Délai
Ressources
- 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)
- html5-audio/
- en:Multimedia container format
- en:Video editing and conversion
- en:Video_editing (outils video divers)
- Players HTML5
Si vous voulez déjà explorer les bibliothèques JavaScript (qui seront traitées en P3), vous pouvez essayez une bibliothèque audio/vidéo, par exemple :
- 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.
Aide
Discussion de cette page
Utilisez la page discussion de cette page pour poser des questions. Pour insérer un nouveau titre, utilisez simplement le "+".
Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page.