<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

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

J'ai ajouté une fonction à iconeleon afin de pouvoir récupérer les icônes sous d'autres formes:

Les trois boutons ajoutés permettent de copier directement dans le presse-papier le lien de l'icône, le code du SVG ou une version encodée à placer directement dans une src="http://www.warriordudimanche.net/" ou un url(...).

https://api.warriordudimanche.net/iconeleon/

Volivoilà...

<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

En passant, je vous mets le lien vers un petit outil pour convertie en et de Base64.

Bon, yen a plein, hein, en particulier celui de Timo ... J'en ai quand même refait un from scratch pour pouvoir l'utiliser comme une appli online (le front end ci-dessous) ou bien comme une «API» utilisable via un bookmarklet par exemple: ainsi, en sélectionnant du texte puis en lançant le bookmarklet qui va bien, on peut encoder/décoder en un clic...

Comme d'habitude, si ça intéresse quelqu'un, on sait jamais... https://api.warriordudimanche.net/b64/ et pour télécharger

<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

<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