,How to embed JavaScript script before

開発
1

Discourseで動画のスタイルを変更したいのですが、</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ポリシーに追加していない可能性が非常に高いです。

そして正直なところ、ユーザーが外部ウェブサイトからjsを読み込むのを防ぐために、このjsファイルを直接コピーして<script>タグに貼り付けることをお勧めします。これは安全ではありません - このウェブサイトを完全に信頼している場合を除き。

image
image1068×200 25 KB

「いいね！」 1
5

主な問題はこの一行です。それ以前は問題ありません。

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>
</body >
6
の最後に配置する必要があります。これは、ページがロードされた後にプレーヤーを初期化するためです。
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>

ああ、一度だけロードする必要があるのですか？それなら、私が言ったことは忘れてください。
Ah, you only need to load once? Then pretend I didn’t say it

<quote=“运思 曾, post:6, topic:279159, username:zengyunsi”>
只能放在body结尾

それは関係ありません。イベントリスナーはありませんか？
It makes no difference. Don’t you have an eventListener?

8

:sweat_smile: どうすればいいのかわかりません。bodyの前に置く必要があります。

9

調べたので分かりました。この場所に追加します。

image
image2050×801 46.1 KB

11

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