https://curlybraces.be/wiki/index.php?action=history&feed=atom&title=Sous-titre_-_Hugo Sous-titre - Hugo - Historique des versions 2026-04-04T06:07:34Z Historique des versions pour cette page sur le wiki MediaWiki 1.35.10 https://curlybraces.be/wiki/index.php?title=Sous-titre_-_Hugo&diff=3359&oldid=prev HugoD le 16 mai 2019 à 09:43 2019-05-16T09:43:48Z <p></p> <table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="fr"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Version précédente</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version du 16 mai 2019 à 09:43</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Ligne 1 :</td> <td colspan="2" class="diff-lineno">Ligne 1 :</td></tr> <tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Pour compléter mon projet d&#039;édition en typographie, j&#039;avais besoin de récupérer les sous-<del class="diffchange diffchange-inline">titre </del>de plusieurs vidéos youtube sous forme de textes, pour les intégrer à mon édition.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Pour compléter mon projet d&#039;édition en typographie, j&#039;avais besoin de récupérer les sous-<ins class="diffchange diffchange-inline">titres </ins>de plusieurs vidéos youtube sous forme de textes, pour les intégrer à mon édition.</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Dans mes premières recherches, j&#039;ai d&#039;abord voulu créer un script qui irait chercher pour moi les sous-titres si je lui indiquait le lien de ma vidéo. <del class="diffchange diffchange-inline">j</del>&#039;ai vite atterris sur le site de google où il est expliqué que tout les accès <del class="diffchange diffchange-inline">a </del>ses informations sont protégés. Pour le faire, il faut utiliser une API particulière, et faire des demandes d&#039;autorisations.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Dans mes premières recherches, j&#039;ai d&#039;abord voulu créer un script qui irait chercher pour moi les sous-titres si je lui indiquait le lien de ma vidéo. <ins class="diffchange diffchange-inline">J</ins>&#039;ai <ins class="diffchange diffchange-inline">très </ins>vite atterris sur le site de google où il est expliqué que tout les accès <ins class="diffchange diffchange-inline">à </ins>ses informations sont protégés. Pour le faire, il faut utiliser une API particulière, et faire des demandes d&#039;autorisations.</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Autorisation google.png]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Autorisation google.png]]</div></td></tr> <tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l17" >Ligne 17 :</td> <td colspan="2" class="diff-lineno">Ligne 17 :</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Javascript cleaner.png]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Javascript cleaner.png]]</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>J&#039;obtiens ainsi un beau texte que je n&#039;ai plus qu&#039;a copié/coller pour <del class="diffchange diffchange-inline">le mettre en page </del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>J&#039;obtiens ainsi un beau texte que je n&#039;ai plus qu&#039;a copié/coller pour <ins class="diffchange diffchange-inline">compléter mon édition.</ins></div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Texte propre.png]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Texte propre.png]]</div></td></tr> </table> HugoD https://curlybraces.be/wiki/index.php?title=Sous-titre_-_Hugo&diff=3358&oldid=prev HugoD le 16 mai 2019 à 09:40 2019-05-16T09:40:37Z <p></p> <table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="fr"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Version précédente</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version du 16 mai 2019 à 09:40</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Ligne 1 :</td> <td colspan="2" class="diff-lineno">Ligne 1 :</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Pour compléter mon projet d&#039;édition en typographie, j&#039;avais besoin de récupérer les sous-titre de plusieurs vidéos youtube sous forme de textes, pour les intégrer à mon édition.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Pour compléter mon projet d&#039;édition en typographie, j&#039;avais besoin de récupérer les sous-titre de plusieurs vidéos youtube sous forme de textes, pour les intégrer à mon édition.</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Dans mes premières recherches, j&#039;ai d&#039;abord voulu créer un script qui irait chercher pour moi les sous-titres si je lui indiquait le lien de ma vidéo. j&#039;ai vite atterris sur le site de google où il est expliqué que tout les accès a ses informations sont protégés. <del class="diffchange diffchange-inline">il faut , pour </del>le faire, utiliser une API particulière, et faire des demandes d&#039;autorisations</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Dans mes premières recherches, j&#039;ai d&#039;abord voulu créer un script qui irait chercher pour moi les sous-titres si je lui indiquait le lien de ma vidéo. j&#039;ai vite atterris sur le site de google où il est expliqué que tout les accès a ses informations sont protégés. <ins class="diffchange diffchange-inline">Pour </ins>le faire, <ins class="diffchange diffchange-inline">il faut </ins>utiliser une API particulière, et faire des demandes d&#039;autorisations<ins class="diffchange diffchange-inline">.</ins></div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Autorisation google.png]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Autorisation google.png]]</div></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>https://developers.google.com/youtube/v3/docs/captions/download</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">&#039;&#039;</ins>https://developers.google.com/youtube/v3/docs/captions/download<ins class="diffchange diffchange-inline">&#039;&#039;</ins></div></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>https://developers.google.com/youtube/registering_an_application</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">&#039;&#039;</ins>https://developers.google.com/youtube/registering_an_application<ins class="diffchange diffchange-inline">&#039;&#039;</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Vu le peu de vidéos dont il me fallait le sous-titre, j&#039;ai cherché un moyen de les récupérer moi même. J&#039;ai trouvé une astuce sur un forum obscur; sur chrome, quand on lance une vidéo, si on active les sous-titres et qu&#039;on inspect la page, dans l&#039;onglet network on peut accéder aux sous-titre. Ils s&#039;ouvrent dans un nouvel onglet, sous forme d&#039;un fichier XML.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Vu le peu de vidéos dont il me fallait le sous-titre, j&#039;ai cherché un moyen de les récupérer moi même. J&#039;ai trouvé une astuce sur un forum obscur; sur chrome, quand on lance une vidéo, si on active les sous-titres et qu&#039;on inspect la page, dans l&#039;onglet network on peut accéder aux sous-titre. Ils s&#039;ouvrent dans un nouvel onglet, sous forme d&#039;un fichier XML.</div></td></tr> <tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l11" >Ligne 11 :</td> <td colspan="2" class="diff-lineno">Ligne 12 :</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Youtube timedtext.png]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Youtube timedtext.png]]</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Sous-titre xml.png]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Fichier:Sous-titre xml.png]]</div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Sauf que ce XML est très moche, plein de truc chiant pour faire de la mise en page. Grâce a a un peu de javascript, j&#039;ai quand même réussi à le nettoyer, pour en extraire uniquement le texte que je voulais mettre en page. Notamment en utilisant &lt;code&gt;getElementById()&lt;/code&gt; pour extraire le texte des balises xml dans lequel il était.</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Fichier:Javascript cleaner.png]]</ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">J&#039;obtiens ainsi un beau texte que je n&#039;ai plus qu&#039;a copié/coller pour le mettre en page </ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr> <tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Fichier:Texte propre.png]]</ins></div></td></tr> </table> HugoD https://curlybraces.be/wiki/index.php?title=Sous-titre_-_Hugo&diff=3350&oldid=prev HugoD : Page créée avec « Pour compléter mon projet d'édition en typographie, j'avais besoin de récupérer les sous-titre de plusieurs vidéos youtube sous forme de textes, pour les intégrer à... » 2019-05-16T09:17:47Z <p>Page créée avec « Pour compléter mon projet d&#039;édition en typographie, j&#039;avais besoin de récupérer les sous-titre de plusieurs vidéos youtube sous forme de textes, pour les intégrer à... »</p> <p><b>Nouvelle page</b></p><div>Pour compléter mon projet d&#039;édition en typographie, j&#039;avais besoin de récupérer les sous-titre de plusieurs vidéos youtube sous forme de textes, pour les intégrer à mon édition.<br /> <br /> Dans mes premières recherches, j&#039;ai d&#039;abord voulu créer un script qui irait chercher pour moi les sous-titres si je lui indiquait le lien de ma vidéo. j&#039;ai vite atterris sur le site de google où il est expliqué que tout les accès a ses informations sont protégés. il faut , pour le faire, utiliser une API particulière, et faire des demandes d&#039;autorisations<br /> <br /> [[Fichier:Autorisation google.png]]<br /> https://developers.google.com/youtube/v3/docs/captions/download<br /> https://developers.google.com/youtube/registering_an_application<br /> <br /> Vu le peu de vidéos dont il me fallait le sous-titre, j&#039;ai cherché un moyen de les récupérer moi même. J&#039;ai trouvé une astuce sur un forum obscur; sur chrome, quand on lance une vidéo, si on active les sous-titres et qu&#039;on inspect la page, dans l&#039;onglet network on peut accéder aux sous-titre. Ils s&#039;ouvrent dans un nouvel onglet, sous forme d&#039;un fichier XML.<br /> <br /> [[Fichier:Youtube timedtext.png]]<br /> [[Fichier:Sous-titre xml.png]]</div> HugoD