Et allez, encore une matinée de perdue pour un truc que j'avais pas prévu et qui devrait fonctionner parfaitement: la balise <video> et la balise <track> pour ajouter les sous-titres.

Pour afficher une video pour les élèves avec les sous-titres que j'ai traduit de youtube, en gros, je fais un truc comme ça:

<video controls title="sdfgsdfg" preload="auto" >
    <source src="http://serveur/Marco Castelblanco.mp4"  type="video/mp4">
    <track kind="subtitle" srclang="fr" label="sous-titre" src="http://serveur/Marco Castelblanco.vtt" default="true"/>
    Sorry, your browser doesn't support embedded videos.
</video>

Pour ce fichier de sous-titres, J'ai :

• récupéré vidéo+sous-titres avec JDownloader
• j'ai traduit les sous-titres
• j'ai converti le format .srt fourni par yt en .vtt, le format compatible avec track

MAIS ÇA MARCHE PAS

• J'ai beau essayer en local, en distant,
• en http et en https,
• dans un fichier html ou php,
• sur firefox/chromium/vivaldi,
• tous les fichiers se chargent normalement (ils n'apparaissent pas comme 404 dans la console-réseau.)
• l'encodage est bon
• le format de fichier (vtt) est bon aussi...
• [edit] l'attribut crossorigin sur video ne change rien

J'ai cherché partout, je me prends la tête depuis des heures...

J'ai même essayé de forcer le track.mode à "showing" au cas où. Mais non.

Si quelqu'un a une idée, je prends...

Solution !

Il suffit de mettre kind="captions" au lieu de kind="subtitle" pour que ça fonctionne...

Merci à Bill2 pour la solution !

EN FAIT C'EST MOI K'É COUILLON

Une matinée perdue pour un «s» manquant à subtitleS : kind="subtitles"

Précédemment sur le Warriordudimanche: https://warriordudimanche.net/index.php?article1636/ya-pas-que-les-voitures-qui-sont-allergiques-vanille-php-aussi-fait-trucs-passionnants-help

Bon, je bosse dessus parce que je suis entêté et que j'aime bien comprendre mais là... j'ai du mal.

Ce que j'ai fait

Côté frontend

• J'ai épuré mon code JS au max
• j'ai simplifié le formulaire en laissant tomber les noms de fichier: je n'envoie que le contenu de l'image en base64 et je génère un nom backend.
• j'ai changé l'ajout des hidden servant à transmettre les images au format base64: au lieu de les ajouter au fur et à mesure de la génération des images redimensionnées, je les crée dans l'événement onSubmit du formulaire.
• j'ai essayé de virer l'enctype du formulaire vu que, avec l'URL_rewriting à off j'obtenais une erreur 406 en distant... J'ai même essayé en text/plain pour voir... C'est pas ça.

  

côté backend

• j'ai simplifié au max
• j'ai ajouté la création d'un nom de fichier local (l'extension est déduite des données base64 qui démarrent comme suit: base64:image/jpeg ...)
• j'ai regardé, en local, la taille des données envoyées:

  'data' => 
    array (size=6)
      0 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAOEBLADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=286259)
      1 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAOEBLADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=782555)
      2 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAOEBLADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=900279)
      3 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCASwA4QDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=903563)
      4 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAOEBLADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=636547)
      5 => string 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAOEBLADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1'... (length=1020399)

Je sais, on a l'impression que c'est toujours la même image mais en fait non... c'est sans doute dû au fait que base64 est très verbeux et que le début est toujours le même pour des images.

Le tout fait un post d'environ 4.5 Mo ce qui n'est pas choquant dans un formulaire multipart/form-data et reste très en dessous des limites de PHP_INI sur le serveur.

Aucun fichier .htaccess ne vient non plus foutre le bran...

HELP

Encore une fois, ça marche impeccable en local.

J'ai commenté au max mon code pour le cas où quelqu'un se sent de regarder, parce que pour ma part, je commence à voir flou et à avoir des hallucinations... je vous mets un zip: http://warriordudimanche.net/vrac/Plinstagram.zip

PISTE DE RECHERCHE

Omagad ! en cherchant, j'ai trouvé un truc: un problème éventuel avec ModSecurity disponible sur CPanel ( https://doc.ubuntu-fr.org/modsecurity & https://www.webfulcreations.com/how-to-fix-an-appropriate-representation-of-the-requested-resource-could-not-be-found-on-this-server-this-error-was-generated-by-mod_security-error/ ) En le mettant sur off depuis cpanel, mon script parvient à la page article.php !

Bon, ça fait une erreur de token, hein, mais on progresse !!!

Tiens, je me pose une question, les copaines: depuis quelques temps, mes formulaires post galèrent à être envoyés... ça rame, ça plante etc... mais seulement pour le premier envoi. Si je recharge la page et que je poste, ça passe sans souci.

Les requêtes postées via JS font pareil...

Je pensais que ça venait d'une connerie que j'avais faite, mais tous les formulaires en même temps... en plus ça touche aussi parfois tiny tiny rss pour les requêtes js.

J'en suis venu à penser que ça pouvait venir du HTTPS. Je teste en http normal... pas de problème. Ça pourrait donc peut-être venir du fait qu'en HTTPS ça demande «confirmation» (alerte de sécuritay à la mords-moi les gonades)

Par contre, pourquoi ça fait ça et comment y remédier... je vois pas trop.

Any idea ?!

Sous ce titre, qui siérait au conte d'un Lafontaine geek, se cache un des plus grands mystères de l'univers observable qui, pourtant, ne semble concerner que môa...

Quand je cherche à drag et drop un fichier sur un élément HTML pour en gérer l'upload via JS, je fais tout bien comme on m'a expliqué dans les tutos, les stackoverflow pis toussa:

// Une page de test qui est censée permettre de capter l'événement Drop sur un body id="body"
// version simplifiée et sans lib de mon problème
document.getElementById("body").addEventListener("drop",function(e){
        console.log(e);
        e.preventDefault();
        e.stopPropagation();
})

Hélas, quand je drope un fichier sur ma page, Firefox charge le fichier et l'affiche (ou en lance le téléchargement)

En plus, comme le chargement casse tout, impossible de vérifier dans la console que l'événement se déclenche bien dans js (même en conservant les journaux)...

• Ça ne vient pas d'une extension, j'ai testé en mode sans échec.
• Ça ne vient pas de ce firefox, j'ai essayé avec Waterfox, c'est pareil...
• Ça ne vient pas de cet ordi (je ne m'étonnerais plus de rien) j'ai testé sur un autre...

Je me rappelle que j'ai déjà rencontré le souci à chaque fois que j'ai voulu faire ça mais impossible de me souvenir comment j'ai fait pour y parvenir... pire, j'ai regardé mes scripts précédents qui semblent fonctionner et il n'y a rien de particulier dedans...

EDIT:

MErci à ArthurHoaro qui me fournit une solution qui consiste à faire un preventDefault sur l'event Dragover plutôt que sur le drop. C'est pas logique, mais ça marche !

// Une version qui va bien et qui explique pourquoi les autres codes fonctionnent: ils gèrent tous le dragover !
document.getElementById("body").addEventListener("drop",function(e){
        console.log(e);
        e.preventDefault();
        e.stopPropagation();
})
document.getElementById("body").addEventListener("dragover",function(e){
        e.preventDefault();
        e.stopPropagation();
})

En plus, ils en parlent là : https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets (mais je le découvre APRÉS, bien entendu)

Après avoir récupéré l'ordi de ma mère pour les petits, j'avais décidé de ne pas mettre de linux dessus, vu que c'était juste pour jouer à minecraft.

Sauf que win10 et ses mises à jour intempestives à la mords moi le noeud ont fini par avoir raison du système installé qui rebootait sans arrêt...

Papa se lance donc dans l'ajout de linux sur la bête.

démarrage sur l'usb live de linux mint

Déjà, là, ça a commencé à couiller...
Difficultés à booter sur la clé, résolues une fois que j'ai retrouvé comment avoir accès au bios puis à la liste de boot (echap/f12) J'ai désactivé le secure boot (après quelques recherches) mais le boot mode est grisé en UEFI.

Ensuite, install normale et PAF ! ça a planté au moment de l'installation du paquet grub2, à la fin: écran freezé, curseur figé, clavier inactif. Bref, la totale.

Extinction au marteau-piqueur puis redémarrage pour tenter une réinstall complète avec écrasement de win.

Ecrasement de win

Je décide de laisser faire l'install de base mais en supprimant toutes les données. Spoiler; ça plante pareil. Je recommence en créant moi-même les partitions... pareil.

Modification de la partition de boot

Après recherche, j'ai essayé de modifier la partition sur laquelle le boot s'installe dans la partie permettant de choisir ses propres partitions. Que ce soit sur la partition EFI ou sur la partition /, rien n'y fait... ça plante pareil.

Après plusieurs autres tentatives et un nervous breakdown

j'essaie une debian de base, comme le premier Cyrille Borne venu, pour parvenir en gros au même résultat.

Tente avec un autre HD

pour un résultat identique...

retour sur linux mint et muni d'un nouveau tuto

Après moults recherches, je suis tombé sur un tuto donnant une procédure pour forcer l'install de grub après l'avoir sautée lors de l'install de mint.

L'installation se passe bien et je peux passer à la suite. Après plusieurs tentatives échouant à des endroits différents, le résultat reste le même, au bout du compte, aucune partition n'est bootable.

tentative avec bootrepair disk

De guerre lasse, je me fais un usblive de bootrepair disk et je démarre dessus... devinez quoi, il plante et freeze comme l'install de Mint.

Deux jours, une quinzaine de tentatives d'installation

pour rien... je m'y pète les dents.

Conclusion ?

Ben, tout d'abord l'UEFI ça fait chier. Voilà. Je sais, c'est pas nouveau, c'est fait pour ça, emmerder les linuxiens, mais ça me fait du bien de le dire.

Ensuite, et c'est rare, je commence à me dire que je vais devoir lâcher l'affaire et tenter de remettre un windows. J'en ai la bite qui fait des noeuds d'avance, mais là, franchement, je commence à sécher.

Une idée ?

EDIT : une solution dans les commentaires !

https://warriordudimanche.net/article1111/5dac319388f1d#c1111-12

(...)

RHAAAAAAA CON DE FIREFOX ! J'arrive pas à récupérer les fichiers déposés pour les ajouter dans un input[file]... pourtant ça marche nickel sous Chromium !

document.getElementById('selector_0').files=event.dataTransfer.files;

La console me prouve que event.datatransfert.files est correct mais impossible de transférer sa valeur à l'input !

Pourtant, même StackOverflow dit que (ça marche sous Firefox)[https://stackoverflow.com/a/38968948] !

J'en suis à mon 3ème gigaoctet de doc consultée, je commence à voir flou... 'Tain, chez Mozilla, faites un effort, on se croirait à la glorieuse époque d'IE6

Une idée, les copains ?

function stopPropagation(event){
    if(event.preventDefault) { event.preventDefault(); }
    if(event.stopPropagation) { event.stopPropagation(); }
}

dropzone.addEventListener("drop", function(event){
    stopPropagation(event);
    document.getElementById('selector_0').files=event.dataTransfer.files;
    console.log(event.dataTransfer.files,document.getElementById('selector_0').files);
    return false;
}, false);

(...)