JavaScript 스크립트를 </body> 태그 앞에 삽입하는 방법

개발
1

디스코urs에서 비디오 스타일을 변경하고 싶은데, </body> 태그 전에 JavaScript 스크립트를 어떻게 임베드하나요?

HEAD에서 편집해 봤는데 완벽하게 작동하지 않아요!

감사합니다!

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

어디서 수정하고 계신가요? UX에서 직접 만든 테마 컴포넌트에서 수정하고 계신 건가요? (그 이미지가 뭔지 모르겠습니다.)

4

이 도메인 이름을 CSP 정책(CSP Policy)에 추가하지 않았기 때문일 가능성이 가장 높습니다.

매우 높은 확률로 이 도메인을 CSP Policy에 추가하지 않아서 발생하는 문제입니다.

솔직히 말씀드리면, 사용자가 외부 웹사이트에서 js를 로드하는 것을 방지하기 위해 이 js 파일을 직접 복사해서 <script> 태그 안에 넣는 것을 권장합니다. 이는 안전하지 않습니다 - 이 웹사이트를 완전히 신뢰하는 경우를 제외하고는요.

그리고 솔직히 말씀드리면, 사용자가 외부 웹사이트의 js를 로드하는 것을 막기 위해 이 js 파일을 그대로 복사해서 <script> 태그 안에 넣는 것을 더 권장합니다. 이것은 안전하지 않습니다 - 이 웹사이트를 완전히 신뢰하지 않는 한요.

image
image1068×200 25 KB

5

주요 문제는 바로 이 한 줄이에요. 앞부분은 문제가 없어요.

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

body 태그의 끝에만 배치할 수 있습니다. 이는 페이지 로딩이 완료된 후 플레이터를 초기화하기 위한 것입니다.

7

discourse plugin-api를 사용해도 됩니다

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>

아, 한 번만 로드하면 되나요? 그럼 제가 말한 건 잊어주세요

啊你只需要一次load？那当我没说

그것은 아무런 상관이 없습니다. eventListener를 가지고 있지 않나요?

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

8

:sweat_smile: 어떻게 해야 하는지 모르겠어요. body 앞에 배치해야 합니다.

9

확인해 보니 이해했습니다. 여기에 추가하면 됩니다.

image
image2050×801 46.1 KB