Librairie pour l'intégration de médias sur des forums
Stan na
Ten skrypt nie powinien być instalowany bezpośrednio. Jest to biblioteka dla innych skyptów do włączenia dyrektywą meta // @require https://update.greasyfork.org/scripts/554422/1687596/LecteurMedia%20API%20Library.js
Une librairie JavaScript conçue pour être intégrée dans des userscripts afin d'analyser le DOM et d'intégrer des lecteurs multimédias à la place des liens.
Pour utiliser cette librairie, ajoutez la ligne suivante dans l'en-tête // ==UserScript== de votre projet :
// @require https://greasyfork.org/scripts/497166-lecteur-media-api-library/code/Lecteur%20Media%20API%20Library.jsN'oubliez pas d'ajouter les permissions @grant nécessaires. Au minimum :
// @grant GM_addStyleSi vous utilisez des providers qui font des requêtes réseau, vous aurez besoin de :
// @grant GM.xmlHttpRequest (ou GM_xmlhttpRequest)// @connect (voir la section 3).L'API s'utilise en créant une nouvelle instance de la classe LecteurMedia. Le constructeur accepte un objet d'options pour sélectionner les providers que vous souhaitez activer.
Vous avez plusieurs façons de spécifier les providers à charger, via l'option providers dans le constructeur.
C'est la méthode la plus simple, mais elle nécessite la permission @connect *.
// ==UserScript==
// ...
// @connect *
// ...
// ==/UserScript==
const lecteur = new window.LecteurMedia(); // Pas d'options = 'all'
lecteur.processNode(document.body);C'est l'approche recommandée pour un contrôle fin des permissions. Il existe trois catégories :
'base' : Providers qui ne nécessitent aucune permission @connect.'connect' : Providers qui nécessitent des permissions @connect vers des domaines spécifiques (ex: api.vxtwitter.com).'wildcard' : Providers qui nécessitent @connect * (ex: aperçu d'articles).// Charger uniquement les providers sûrs, sans @connect
const lecteurBase = new window.LecteurMedia({ providers: 'base' });
lecteurBase.processNode(document.body);
// Charger les providers sûrs ET ceux nécessitant une connexion spécifique
const lecteurConnect = new window.LecteurMedia({ providers: ['base', 'connect'] });
lecteurConnect.processNode(document.body);C'est la méthode la plus précise. Vous ne chargez que ce dont vous avez besoin.
// Charger uniquement YouTube, Twitter et Discord
const lecteurPerso = new window.LecteurMedia({
providers: ['YouTube', 'Twitter', 'Discord']
});
lecteurPerso.processNode(document.body);new LecteurMedia(options) : Crée une nouvelle instance du lecteur avec la configuration spécifiée.instance.processNode(element) : Analyse un élément du DOM et ses enfants pour trouver et remplacer les liens par des lecteurs intégrés.instance.addProvider(providerObject) : Ajoute dynamiquement un ou plusieurs providers à une instance existante.@connectPour savoir quelles lignes // @connect ajouter à votre script, la librairie expose une fonction utilitaire très pratique : window.LecteurMedia.getRequiredConnects(options).
@require de la librairie.Exemple 1 : Obtenir les @connect pour les catégories 'base' et 'connect'
const connects = window.LecteurMedia.getRequiredConnects({ providers: ['base', 'connect'] });
console.log(connects.join('\n'));Résultat dans la console :
// @connect api.vxtwitter.com
// @connect vm.tiktok.com
// @connect vt.tiktok.com
// @connect v.tiktok.com
// @connect t.tiktok.com
// @connect api.streamable.com
// @connect facebook.com
// @connect www.reddit.com
// @connect soundcloud.com
// @connect www.flickr.com
// @connect gph.is
// @connect maps.app.goo.gl
// @connect backend.deviantart.com
// @connect www.deviantart.com
// @connect api.gyazo.com
// @connect tenor.com
// @connect postimg.cc
// @connect ibb.co
// @connect *.bandcamp.com
// @connect distrokid.com
// @connect discord.com
// @connect api.stackexchange.comExemple 2 : Obtenir les @connect pour 'YouTube', 'Twitter' et 'Discord'
const connects = window.LecteurMedia.getRequiredConnects({ providers: ['YouTube', 'Twitter', 'Discord'] });
console.log(connects.join('\n'));Résultat dans la console :
// @connect api.vxtwitter.com
// @connect discord.comCopiez-collez simplement les lignes générées dans l'en-tête de votre userscript.
Voici un script qui charge les lecteurs YouTube, Twitter et Discord.
// ==UserScript==
// @name Mon Script avec Lecteur Média
// @namespace http://tampermonkey.net/
// @version 1.0
// @match https://mon-site-cible.com/*
// @grant GM_addStyle
// @grant GM.xmlHttpRequest
// @require https://greasyfork.org/scripts/497166-lecteur-media-api-library/code/Lecteur%20Media%20API%20Library.js
// @connect api.vxtwitter.com
// @connect discord.com
// ==/UserScript==
(function() {
'use strict';
if (typeof window.LecteurMedia === 'undefined') {
console.error('La librairie Lecteur Media n\'a pas pu être chargée.');
return;
}
// Initialise le lecteur avec une sélection de providers
const lecteur = new window.LecteurMedia({
providers: ['YouTube', 'Twitter', 'Discord']
});
// Scanne la page entière au chargement
lecteur.processNode(document.body);
// Bonus : si votre site charge du contenu dynamiquement, vous pouvez utiliser
// un MutationObserver pour scanner les nouveaux éléments.
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === 1) { // S'assurer que c'est un HTMLElement
lecteur.processNode(node);
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();