كيفية إدراج سكريبت JavaScript قبل وسم </body>

مطور
1

أريد تغيير نمط الفيديو في discourse، كيف يمكن تضمين نص JavaScript البرمجي قبل علامة </body>
حاولت تحريره في 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

أين تقوم بتغييره؟ في مكون سمة أنشأته في تجربة المستخدم؟ (لا أعرف ما هي هذه الصورة.)

4

من المحتمل جدًا أن يكون السبب هو أنك لم تضف اسم النطاق هذا إلى سياسة CSP.

ومن الصدق، أوصي بنسخ ملف js هذا مباشرة ووضعه في علامة <script> لمنع المستخدمين من تحميل js من موقع خارجي. هذا ليس آمنًا - إلا إذا كنت تثق تمامًا في هذا الموقع.

image
image1068×200 25 KB

إعجاب واحد (1)
5

المشكلة الرئيسية في هذه الجملة، ما قبلها ليس مشكلة

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

يجب وضعه في نهاية الـ body فقط، وهذا لتهيئة المشغل بعد تحميل الصفحة بالكامل.

7

يمكنك استخدام واجهة برمجة تطبيقات المكونات الإضافية لـ 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>

آه، أنت تحتاج فقط إلى تحميل مرة واحدة؟ إذن انسَ ما قلته
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: لا أفهم كيف أفعل ذلك. يجب وضعه قبل الجسم.

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.