¿Cómo incrustar script de JavaScript antes de la etiqueta </body >

Desarrollador
1

Quiero cambiar un estilo para video en discourse, ¿cómo incrusto un script de JavaScript antes de la etiqueta </body?

Intenté editarlo en el HEAD, ¡no funciona perfectamente!

¡Gracias!

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

¿Dónde lo estás cambiando? ¿En un componente de tema que creaste en la UX? (No sé qué es esa imagen).

4

Lo más probable es que no hayas agregado este nombre de dominio a la Política de CSP.

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

Y, para ser honesto, te recomiendo que copies este archivo js directamente y lo coloques en la etiqueta <script> para evitar que los usuarios carguen js de un sitio web externo. Esto no es seguro, a menos que confíes completamente en este sitio web.

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

image
image1068×200 25 KB

1 me gusta
5

Es principalmente esta línea, las anteriores no son un problema

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

Solo se puede colocar al final del body, esto es para inicializar el reproductor una vez que la página haya terminado de cargarse.

7

Puedes usar la API de plugins de Discourse.
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>

¿Solo necesitas cargar una vez? Entonces olvídalo.

Ah, ¿solo necesitas cargar una vez? Entonces olvídalo.

No tiene ninguna relación. ¿No tienes un eventListener?

No hace ninguna diferencia. ¿No tienes un eventListener?

8

:sweat_smile: No entiendo cómo hacerlo, tiene que ir antes del body.

9

Investigué y entendí. Agrega aquí:

image
image2050×801 46.1 KB

11

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