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

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

<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 كبدائل إذا كانت مشكلة الشفرة الحالية غير قابلة للحل.

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

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

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

الكود يستخدم مكتبة Plyr لتشغيل ملفات الفيديو على موقع الويب. ولكنها تحتاج إلى توافر المكتبة الخاصة بها ورابط الفيديو المطلوب تشغيله.

يمكنك استخدام الشيفرة التالية لإضافة مشغل الفيديو إلى موقعك:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
</head>
<body>
  <video class="js-player" controls playsinline poster="رابط الصورة المصغرة">
    <source src="رابط المقطع" type="video/mp4">
  </video>
  
  <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
  <script>
    const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
  </script>
</body>
</html>

قم بتغيير "رابط الصورة المصغرة" إلى رابط الصورة المصغرة الخاصة بمقطع الفيديو الذي ترغب في تشغيله، وبتغيير "رابط المقطع" إلى رابط الفيديو الخاص بك.

وتأكد من تضمين الروابط الصحيحة للمكتبات Plyr، حيث يتم استدعاء النسخة 3.4.4 في المثال أعلاه.

وتتوفر بعض المكتبات الأخرى للقيام بنفس الأمر:

  • Video.js

مكتبة قوية وموثوقة لتشغيل ملفات الفيديو، ويوفر Video.js العديد من الميزات والخيارات المخصصة.

  • MediaElement.js

مكتبة متعددة الوسائط تدعم تشغيل الفيديو والصوت، وتتميز بسهولة الاستخدام ودعمها لعدة تنسيقات.

  • JW Player

مشغل فيديو شهير يتميز بأداء عالٍ وقدرات تخصيص متقدمة، وتوفر JW Player في إصدارات مجانية ومدفوعة.

  • Flowplayer

مكتبة أخرى توفر مشغل فيديو قوي ومتعدد الوسائط، توفر Flowplayer واجهة سهلة الاستخدام ودعمًا شاملاً للتخصيص.

شكرا اخي ❤

جرب السياق الثاني،

فبشكل بديل، يمكنك تضمين سكريبت plyr.js قبل وسم الإغلاق </body> ثم في جافا سكريبت الخاص بك، قم بإنشاء كائن جديد عن الفئة Plyr كما يلي:

<script src="path/to/plyr.js"></script>
<script>
  const player = new Plyr('#player');
</script>

اصبح يعمل الآن لا مشاكل شكرا لك علي المعلومة❤