Salut les mecs,
J'espère que vous êtes encore tous en vie. MDR !!!
J'en suis sûr au moins pour mon illustre homonyme qui apparemment est le
seul ancien à encore poster ces derniers mois sur cette ML.
Aujourd'hui, je réponds à ce mail envoyé par moi-même en janvier dans
lequel je vous questionnais sur l'existence d'une solution grease monkey
pour aider les déficients visuels à la manipulation des vidéo d'internet.
Faute de réponse, je me suis retroussé les manches pour me bricoler
moi-même une solution grease monkey qui marche relativement bien avec
les sites utilisant la balise video.
Vous l'avez en pièce jointe.
Attention, j'ai ajouter l'extension ".txt" pour qu'il puisse passer
comme pièce jointe à ce mail.
Je l'ai uniquement testée dans firefox, mais mon intuition me dit que
tous les membres de la liste devraient l'avoir sur leurs bécanes.
Le script consiste à créer les raccourcis clavier suivants dans le
navigateur:
* maj+échap pour repositionner le focus sur l'objet vidéo
* shift+espace pour mettre pause ou relancer la vidéo
* maj+flèche gauche ou droite pour reculer ou avancer de 10 secondes
* Ctrl+flèche gauche ou droite pour reculer ou avancer la vidéo de 60
secondes
* Ctrl+maj+flèche gauche ou droite pour reculer ou avancer la vidéo de 5
minutes;
* Maj+flèche haut ou bas pour augmenter ou diminuer le volume
* ctrl+flèche haut ou bas pour basculer entre les différents objets
vidéo sur la pages s'i il y en a plusieurs;
* r ou maj+r pour augmenter ou diminuer la vitesse de la vidéo;
* d pour faire apparaître un dialogue affichant les statuts de la vidéo
c'est-à-dire la position actuelle, la durée totale, si en pause, si
muet, etc...
* m pour activer ou désactiver le muet.
De plus, pour être sûr que ces raccourcis fonctionneront sans conflit,
je vous recommande d'entrer en mode formulaire avant de les taper (que
ce soit avec jaws ou NVDA).
Avec NVDA, c'est insert+espace quelque soit l'endroit de la page où vous
vous trouvez.
Certes ce script peut encore être amélioré, mais c'est déjà pour ma part
beaucoup plus d'accessibilité que je n'en avait jusqu'ici concernant les
vidéo.
Sinon, comme pistes d'amélioration, on pourrait avoir:
* la création d'un raccourci pour cliquer sur vidéo suivante ou vidéo
précédente lorsqu'on est spécifiquement sur youtube.
* trouver le moyen de faire dire les messages par la synthèse vocale et
ne plus avoir à les faire afficher dans une boîte de dialogue alert. Je
crois qu'on peut jouer en aria pour arriver à ce résultat.
* la prise en compte des balises audio pour ne pas se cantonner qu'aux
vidéo;
* la prise en compte des vidéo flash bien qu'en voie d'extinction sur le
web.
* etc.
Qu'est-ce que vous en pensez ?
Yannick Daniel Youalé
La programmation est une religion. Aimez-la, ou quittez-la.
www.visuweb.net
// ==UserScript==
// @name HTML5 video accessibility
// @description add controls to html5 video to help blinds
// @namespace mailtoloco
// @author Yannick Youale mailtoloco2...@gmail.com
// @copyright Copyright 2017 Yannick Youale
// @license BSD
// @include *
// @version 0.1
// @grant none
// ==/UserScript==
var flagVideo = false;
var VideoIndex = 0;
function isVideoPresent(){
// détermine si on est sur une page de vidéo
var elm = document.getElementsByTagName("video");
return (elm.length > 0);
} // fin fonction
function ConvertDuration(d){
// converti le temps donné
var i;
var s = "";
var dRest = 0;
// si au moins une heure
if(d >= (60 * 60)){
// le nombre d'heures max
i = parseInt(d / (60 * 60));
s = s + i + " heures";
d = d - (i * 60 * 60);
} // end if ' fin si au moins une heure
// si au moins une minute
if(d >= 60){
// le nombre de minutes max
i = parseInt(d / (60));
s = s + " " + i + " minutes";
d = d - (i * 60);
} // end if ' fin si au moins une minute
// s'il y a des secondes restantes
if(d > 1){
s = s + " " + parseInt(d) + " secondes";
} // end if
// renvoi
return s;
} // end function
function document_onKeyDown(e){
// à l'appuie des touches du clavier
// var intKeyCode = window.event.keyCode;
var i;
var s = "";
var d;
var dd;
var ddd;
var KeyCode = e.keyCode;
var elm;
// 27 = échap
if(KeyCode == 27){
if(e.shiftKey){
// on appuie sur un éventuel bouton ignorer la vidéo
elm = document.getElementsByTagName("input");
if(elm.length > 0){
s = "";
for(i=0; i<elm.length; i++){
if(elm[i].type == "button"){
s = s + ", " + elm[i].id;
} // end if
} // end for
// alert(elm.length + ": " + s);
} // end if
// on déplace le focus à l'objet video
document.getElementsByTagName("video")[VideoIndex].focus();
return;
} // fin si
} // fin si
// 32 = espace pour pause/play
if(KeyCode == 32){
if(e.shiftKey){
if(document.getElementsByTagName("video")[VideoIndex].paused == true){
document.getElementsByTagName("video")[VideoIndex].play();
} else {
document.getElementsByTagName("video")[VideoIndex].pause();
} // end if
} // end if
return;
} // end if
// 37 = flèche gauche pour déplacement
if(KeyCode == 37){
elm = document.getElementsByTagName("video")[VideoIndex];
// la position courante
d = elm.currentTime;
if(e.shiftKey && e.ctrlKey){ // ctrl+shift
// recul de 5 minutes
d = d - (60 * 5);
if(d < 0){ d = 0; }
elm.currentTime = d;
// SayString "Recul de 5 minutes", false
} else if(e.shiftKey){ // e.shiftKey
// recul de 10 secondes
d = d - 10;
if(d < 0){ d = 0; }
elm.currentTime = d;
// SayString "Recul de 10 secondes", false
} else if(e.ctrlKey){ // ctrl
// recul de 60 secondes
d = d - 60;
if(d < 0){ d = 0; }
elm.currentTime = d;
// SayString "Recul de 60 secondes", false
} // end if
return;
} // end if
// 39 = flèche droite pour déplacement
if(KeyCode == 39){
elm = document.getElementsByTagName("video")[VideoIndex];
// la position courante
d = elm.currentTime;
// la durée totale
dd = elm.duration;
if(e.shiftKey && e.ctrlKey){ // ctrl+e.shiftKey
// Avance de 5 minutes
d = d + (60 * 5);
if(d > dd){ d = dd; }
elm.currentTime = d;
// SayString "Avance de 5 minutes", false
} else if(e.shiftKey){ // e.shiftKey
// avance de 10 secondes
d = d + 10;
if(d > dd){ d = dd; }
elm.currentTime = d;
// SayString "Avance de 10 secondes", false
} else if(e.ctrlKey){ // ctrl
// Avance de 60 secondes
d = d + 60;
if(d > dd){ d = dd; }
elm.currentTime = d;
// SayString "Avance de 60 secondes", false
} // end if
return;
} // end if
// 38 = flèche haut pour volume et changement d'index de vidéo
if(KeyCode == 38){
elm = document.getElementsByTagName("video")[VideoIndex];
if(e.shiftKey){
d = elm.volume;
d = d + 0.05;
if(d > 1){ d = 1; }
elm.volume = d;
s = "Volume " + Math.round(d * 100);
// SayString s, false
} else if(e.ctrlKey){ // ctrl
// changement d'index de vidéo
i = 1;
i = elm.length;
VideoIndex = VideoIndex - 1;
if(VideoIndex <= 0){ VideoIndex = i - 1; }
// SayString "Basculement à la vidéo N° " + (VideoIndex + 1) + "/" + i, false
} // end if
return;
} // end if
// 40 = flèche bas pour volume et changement d'index de vidéo
if(KeyCode == 40){
elm = document.getElementsByTagName("video")[VideoIndex];
if(e.shiftKey){
d = elm.volume;
d = d - 0.05;
if(d < 0){ d = 0; }
elm.volume = d;
s = "Volume " + Math.round(d * 100);
// SayString s, false
} else if(e.ctrlKey){ // ctrl
// changement d'index de vidéo
i = 1;
i = elm.length;
VideoIndex = VideoIndex + 1;
if(VideoIndex >= i){ VideoIndex = 0; }
// SayString "Basculement à la vidéo N° " + (VideoIndex + 1) + "/" + i, false
} // end if
return;
} // end if
// 68 = d pour durée et statut
if(KeyCode == 68){
elm = document.getElementsByTagName("video")[VideoIndex];
s = "";
s = elm.duration;
// si un numérique
if(isFinite(s) == true){
i = parseInt(s);
s = " sur " + ConvertDuration(i);
d = parseInt(elm.currentTime);
s = ConvertDuration(d) + s;
// convertion en pourcentage
s = s + " " + Math.round(d * 100 / i) + "%";
// si en pause
if(elm.paused == true){
s = s + "\r\n" + "En pause" ;
} else {
s = s + "\r\n" + "En cours de lecture";
} // end if
// si muet activé
if(elm.muted == true){
s = s + "\r\n" + "Muet activé" ;
} // end if
// la vitesse
d = elm.playbackRate;
s = s + "\r\n" + "Vitesse=" + Math.round(d * 100) + "%";
// affichage
alert(s);;
} else {
alert("Durée indisponible");;
} // end if
return;
} // end if
// 77 = m pour muet/non muet
if(KeyCode == 77){
if(e.shiftKey == false && e.ctrlKey == false && e.altKey == false){
elm = document.getElementsByTagName("video")[VideoIndex];
elm.muted = not(elm.muted);
if(elm.muted == true){
// SayString "muet activé", false;
} else {
// SayString "muet désactivé", false;
} // end if
} // end if ' e.shiftKey
return;
} // end if
// 82 = r pour vitesse
if(KeyCode == 82){
elm = document.getElementsByTagName("video")[VideoIndex];
d = 0.0;
d = elm.playbackRate;
if(e.shiftKey == false && e.ctrlKey == false && e.altKey == false){
// augmentation de la vitesse
if(d < 2){
elm.playbackRate = d + 0.1;
d = Math.round(d * 100);
// SayString "Vitesse " + d + "%", false
} // end if
} else if(e.shiftKey){
// diminution de la vitesse
if(d > 0){
elm.playbackRate = d - 0.1;
d = Math.round(d * 100);
// SayString "Vitesse " + d + "%", false
} // end if
} // end if
return;
} // end if
} // fin fonction
// renseignement de la variable indiquant si au moins une vidéo sur la page
flagVideo = isVideoPresent();
// si au moins une vidéo est présente sur la page
if(flagVideo == true){
// on ajoute l'évènement de surveillance des touches appuyées
window.addEventListener('keydown', document_onKeyDown, true);
// on positionne le focus sur l'objet vidéo
document.getElementsByTagName("video")[VideoIndex].focus();
} // fin si au moins une vidéo est présente sur la page
// alert("le programme se lance bien");
