Wie man JavaScript-Skript vor dem Tag "< / body >" einbettet

Entwickler
1

Ich möchte einen Stil für Videos in Discourse ändern. Wie kann ich ein JavaScript-Skript vor dem </body>-Tag einbetten?

Ich habe versucht, es im HEAD zu bearbeiten, aber es funktioniert nicht perfekt!

Danke!

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

Wo ändern Sie es? In einer Theme-Komponente, die Sie in der UX erstellt haben? (Ich weiß nicht, was dieses Bild ist.)

4

Dies liegt höchstwahrscheinlich daran, dass Sie diesen Domainnamen nicht zur CSP-Richtlinie hinzugefügt haben.

Und ehrlich gesagt, empfehle ich Ihnen, diese JS-Datei direkt zu kopieren und in das <script>-Tag einzufügen, um zu verhindern, dass Benutzer JS von einer externen Website laden. Dies ist nicht sicher – es sei denn, Sie vertrauen dieser Website vollständig.

image
image1068×200 25 KB

5

Nur dieser Satz ist das Problem, die vorherigen sind kein Problem

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

Kann nur am Ende von body platziert werden, dies ist, um den Player zu initialisieren, nachdem die Seite geladen wurde.

7

Sie können die discourse plugin-api verwenden.
You can use the discourse plugin api.

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

Ah, Sie müssen es nur einmal laden? Dann tun Sie so, als hätte ich es nicht gesagt.
Ah, you only need to load once? Then pretend I didn’t say it

Das macht keinen Unterschied. Haben Sie keinen Event-Listener?
It makes no difference. Don’t you have an eventListener?

8

:sweat_smile: Ich verstehe nicht, wie das geht. Es muss vor dem Body platziert werden.

9

Ich habe nachgeschaut und es verstanden. Füge es hier ein.

image
image2050×801 46.1 KB