How to embed JavaScript script in front of ,</body> tag

Development

AI-generated summary

User zengyunsi is trying to embed a JavaScript script before the </body> tag in a Discourse theme to customize a video player. They tried editing it in the HEAD, but it didn’t work perfectly.

User Lhc_fl suggested that the issue might be due to the lack of adding the domain name to the CSP Policy. They also recommended copying the JavaScript file directly and throwing it in the <script> tag for security reasons.

User zengyunsi pointed out that the script needs to be placed before the </body> tag to initialize the player after the page loads.

User Lhc_fl suggested using the Discourse plugin API to load the script, but later retracted the suggestion.

User zengyunsi eventually found the solution by adding the script in a specific place, as shown in an attached image.

1

I want to change a style for video in discourse, how to embed JavaScript script before ,</body> tag

Tried editing it in the HEAD, it doesn’t work perfectly!

Thanks!

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

Where are you changing it? In a theme component that you created in the UX? (I don’t know what that image is.)

4

It is most likely because you have not added this domain name to the CSP Policy.

很有可能是因为你没有把这个域名加入CSP Policy。

And to be honest, I recommend you to copy this js file directly and throw it in the <script> tag to prevent users from loading js from an external website. This is not safe - unless you completely trust this website.

而且说实话，我更推荐你直接把这个js文件复制过来扔在<script>标签里，以免用户还要加载外部网站的js，这并不能说安全——除非你完全信任这个网站

image
image1068×200 25 KB

5

It’s mainly this sentence, the previous ones are not a problem

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

It can only be placed at the end of the body. This is to initialize the player after the page has finished loading.

7

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, you only need to load once? Then pretend I didn’t say it

It makes no difference. Don’t you have an eventListener?

8

:sweat_smile: I don’t understand how to do it. It needs to be placed before the body.

9

Checked and understood. Add it in this place.

image
image2050×801 46.1 KB