مساعدة بشأن مشغلات الفيديو

كنت أبحث عن مشغل فيديو لإضافته بالموقع و حاولت أن انشر به مقاطع موفراً روابط بكل جودة و لكن لم تنجح و لا محاولة

<link href='https://cdn.plyr.io/3.4.4/plyr.css' rel='stylesheet'/>
</head>
<script src='//cdn.plyr.io/3.4.4/plyr.js'/> <script>/*<![CDATA[*/const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));/*]]>*/</script>
</body>

كود المشاركات:

<video class="js-player" controls="" playsinline="" poster="الصورة المصغرة"> <source src="رابط المقطع" type="video/mp4" /> </video>

هل يمكن لأحد المساعدة؟


Mohammed_Fahmy3 أضف ردا

يمكنك اتباع الخطوات التالية لحل مشكلة إضافة مشغل الفيديو:

1. تحقق من صحة روابط المقاطع التي تحاول إضافتها وتأكد من أنها تعمل بشكل صحيح.

2. تأكد من أنك قمت بتضمين مكتبة Plyr بشكل صحيح في صفحات الويب الخاصة بك. ويمكنك ذلك عن طريق أضافة الكود التالي في قسم head في صفحات الويب : 

<link href='https://cdn.plyr.io/3.4.4/plyr.css' rel='stylesheet'/>

وأيضًا الكود التالي في الجزء السفلي من صفحات الويب قبل ختم الجسم body:

<script src='https://cdn.plyr.io/3.4.4/plyr.js'/>
<script>
const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
</script>

وبعد ذلك، قم بنسخ ولصق الكود التالي لعرض الفيديو بصيغة MP4 على موقعك:

<video class="js-player" controls playsinline poster="رابط الصورة المصغرة">
 <source src="رابط المقطع" type="video/mp4">
</video>

يجب أن يكون شكل الصفحة هكذا.

3. تأكد من وجود القيم الصحيحه في العناصر المضافة لمشغل الفيديو مثل عنصر الفيديو src و poster للصورة المصغرة.

4. يمكنك استخدام أيضًا مشغلات فيديو أخرى مثل Video.js أو JW Player كبدائل إذا كانت مشكلة الشفرة الحالية غير قابلة للحل.

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

بعد تحققك من هذه الأمور، ينبغي أن يعمل مشغل الفيديو بشكل صحيح على موقعك. في حال لم تتمكن من الحصول على نتائج جيدة، يمكنك مشاركة صفحة الويب الخاصة بك لنتمكن من دراسة المشكلة بشكل أفضل.

شكرا اخي اصبح يعمل ❤