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...

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...

<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires