مشغل mp4 الخاص بـ discourse قبيح للغاية، كنت أفكر في كيفية تحسينه، ووجدت هذا، وأعتقد أنه بسيط جدًا، وطريقة التكوين سهلة نسبيًا، تحتاج فقط إلى استيراد css و js.
أضف js و css إلى رأس السمة
<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>
<script>
document.addEventListener('DOMContentLoaded', function () {
const player = new Plyr('video');
});
</script>
مقدمة المشروع:
ترجمة باللغة الإنجليزية: (بمساعدة discourse-ai 
)
مشغل MP4 في Discourse غير جذاب بشكل صارخ. في تأملي واستكشافي لتحسينه، تعثرت في هذا البديل. إنه ينضح بسحر بسيط معين، ومنهجية إعداده واضحة إلى حد ما. تضمين CSS و JS المعنيين يقوم بالمهمة.
ببساطة قم بدمج JS و CSS المذكورين أعلاه في رأس السمة الخاصة بك:
<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>
<script>
document.addEventListener('DOMContentLoaded', function () {
const player = new Plyr('video');
});
</script>
للحصول على مقدمة شاملة للمشروع، يرجى زيارة:
يوجد خطأ في المحتوى الرئيسي، مما سيؤدي إلى حدوث خلل. عند التحميل من الصفحة الرئيسية، لن يعمل المشغل. إليك ما قمت بتعديله مقابل 50 دولارًا، وأشاركه مجانًا مع من يحتاج إليه. المشغل يعمل بشكل جيد جدًا، ويستحق التوصية به!
المزايا:
اللون متناسق
المشغل يتكيف مع الشاشة من البداية، وليس من الصغير إلى الكبير
وظائف متعددة
النشر، يكفي وجود وسم video
<video controls>
<source src="https://xxxx/test.mp4" type="video/mp4">
</video>
أضف في الرأس، ويفضل تنزيل css و js إلى شبكة توصيل المحتوى (CDN) الخاصة بك.
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.openfa.net/css/plyr.js"></script>
أضف في جسم المحتوى الرئيسي
<script type="text/javascript">
let curUrl = "";
setInterval(() => {
let newUrl = location.href;
if (curUrl !== newUrl) {
curUrl = newUrl
if (document.querySelector("video")) {
new Plyr('video')
}
}
}, 10)
النتيجة النهائية:
يمكنك أيضًا ضبط وضوح الترجمة وما إلى ذلك
???
بصراحة، هذه شفرة سيئة للغاية، فظيعة.
ستقوم بتشغيل دالة كل 10 مللي ثانية لن تعمل في 99٪ من الوقت، وهو إهدار كبير للأداء.
بالتأكيد، يمكن لجهاز كمبيوتر منزلي تحمل هذه التكلفة … لكنها غير أنيقة للغاية.
IMHO this is very bad code, awful.
It will run a function every 10 milliseconds that will not work 99% of the time, which is a huge waste of performance.
Sure, a home computer could support the expense… but it’s just so inelegant
يجب عليك استخدام واجهة برمجة تطبيقات discourse للقيام بذلك. استخدم هذا:
You should use discourse’s API to do this. use this:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
if (document.querySelector("video")) {
new Plyr('video');
}
});
</script>
You should have just found mine (just kidding)
V كم المرة القادمة سأبحث عنك، لا يمكنني فعل شيء، لقد استغرقت وقتاً طويلاً في ذلك.
لا مشكلة، هذا مجرد عمل بسيط. سنتحدث عن مهام أكثر تحديًا في المرة القادمة.
(بالطبع، هذا لا يعني أن هذه المهمة سهلة … ستحتاج إلى قضاء الكثير من الوقت في قراءة ما يكفي من الكود المصدري لـ discourse للاستجابة بسرعة وتحديد واجهة برمجة التطبيقات التي يجب استدعاؤها. وإذا لم تنفق المال، فلن يهتم أحد حقًا بما تحاول تحقيقه.)
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script type="text/discourse-plugin" version="1.8">
api.decorateCookedElement(elem => elem.querySelectorAll('video').forEach((e) => {new Plyr(e)}));
</script>
هذا المشغل سهل الاستخدام حقًا، وهو أجمل قليلاً من المشغل المدمج، ما هي المهام التي يقبلها الخبير؟
يا أخي، لماذا لم تظهر في وقت سابق
لقد اختبرت وقارنت للتو، وهذا الكود يعرض بسرعة
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script type="text/discourse-plugin" version="1.8">
api.decorateCookedElement(elem => elem.querySelectorAll('video').forEach((e) => {new Plyr(e)}));
</script>
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.