Comment intégrer un script JavaScript avant la balise ",

Dev
1

Je veux changer un style pour la vidéo dans discourse, comment intégrer un script JavaScript avant la balise </body

J’ai essayé de le modifier dans la balise HEAD, cela ne fonctionne pas parfaitement !

Merci !

image
image1810×938 93.9 KB

      <script src="/plyr.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Video Player</title>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
    <script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
</head>
<body>
    <video controls>
        <source src="your-video.mp4" type="video/mp4">
    </video>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>
</body>
</html>
2

Où le changez-vous ? Dans un composant de thème que vous avez créé dans l’UX ? (Je ne sais pas ce qu’est cette image.)

4

C’est très probablement parce que vous n’avez pas ajouté ce nom de domaine à la politique CSP.

Et pour être honnête, je vous recommande de copier directement ce fichier js et de le placer dans la balise <script> pour éviter que les utilisateurs ne chargent du js à partir d’un site Web externe. Ce n’est pas sûr - à moins que vous ne fassiez entièrement confiance à ce site Web.

image
image1068×200 25 KB

1 « J'aime »
5

C’est surtout cette phrase qui pose problème, les précédentes ne le sont pas

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>
</body >
6

Ne peut être placé qu’à la fin du body, cela attend que la page soit chargée, puis initialise le lecteur.

7

Vous pouvez utiliser l’API de plugin discourse.
Vous pouvez utiliser l’API de plugin discourse.

<script type="text/discourse-plugin" version="0.8">
api.decorateCookedElement((elem, helper) => {
    const player = new Plyr('video');
}, {id: "beauitfy-video"})
</script>

Ah, vous n’avez besoin de charger qu’une seule fois ? Alors oubliez ce que j’ai dit.

Ah, vous n’avez besoin de charger qu’une seule fois ? Alors oubliez ce que j’ai dit.

Cela ne fait aucune différence. N’avez-vous pas d’écouteur d’événement ?

8

:sweat_smile: Je ne comprends pas comment faire, cela doit être placé avant le corps.

9

J’ai vérifié et j’ai compris. Ajoutez-le à cet endroit.

image
image2050×801 46.1 KB

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.