مشغل ملفات الفيديو والصوت بتقنية HTML5 لبلوجر


مشغل ملفات الصوت والفيديو لبوجر بتصميم جذاب ويدعم جميع الصيغ بتقنية HTML5 مع مكتبة Plyr.js.
Plyr هو مشغل HTML5 بدون تبعيات وبسيطة ويمكن الوصول إليها وقابلة للتخصيص. ومتوافق أيضًا مع المتصفحات القديمة.


التوافق

اليوم ، ليس من الضروري دعم المتصفحات القديمة لأن عناصر HTML5 (كملفات الصوت والفيديو) موحدة ، لا سيما في الأجهزة المحمولة، HTML5 أكثر أمانًا من HTML "الأصدار الأقدم".

يتفوق مشغل الصوت أو الفيديو الذي يعمل بـ HTML5 بشكل كبير على مشغلات swf ، نظرًا لأدائه العالي وتجربة المستخدم الجيدة على أجهزة الكمبيوتر و الهواتف الذكية.

التثبت

يمكن استخدام plyr.js في أي منصة ، علي سبيل المثال نحن بصدد أستخدامه في منصة بلوجر. دعنا نتوغل بداخل الشرح لنفهم أكثر ،أولاً نذهب إلى المظهر > تحرير html "، نقوم بالبحث عن <head> وتحت مباشرة نضع الكود التالي:


<link rel="stylesheet" href="https://cdn.plyr.io/3.5.1/plyr.css"/>

أخيرًا ، سنقوم بتضمين plyr.js أعلي الوسم </body> لتهيئة Plyr() ، نقوم بلصق الكود التالي:


<script src="https://cdn.plyr.io/3.5.1/plyr.js"></script>
<script>/*<![CDATA[*/const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));/*]]>*/</script>


نحن جاهزون ،قمنا بأضافة مشغل Plyr لكافة العناصر التي تنترج تحت .js-player ، والتي تتيح لنا أستخدام عدة مشغلات فيديو أو صوت في نفس الصفحة او نفس التدوينه.


استخدام مشغل الصوت في بلوجر

واحدة من أهم المميزات في الإصدار 3.0 من Plyr ، هو أنه يسمح لنا الآن بالتحكم في سرعة االصوتيات ، ولكن للتحكم في الصوت عليك بوضع الكود النالي.


<audio class='js-player' controls>
 <source src="audio.mp3" type="audio/mp3">
</audio>

يمكننا أيضا تحديد العديد من الصيغ. عادة ما تكون mp3 هي الأكثر دعمًا. فيما يتعلق بالجودة والوزن ، أوصي أيضاً بصيغة ogg ، حتى يتمكن المستعرض من أستخدام الأفضل بينهم:


<audio class='js-player' controls>
 <source src="audio.mp3" type="audio/mp3">
 <source src="audio.ogg" type="audio/ogg">
</audio>

فيما يلي مثال لمشغل الملفات الصوتيه قمت بتحميله على جوجل درايف. يمكنك أيضًا الحصول على رابط مباشر من Google Drive:


استخدام مشغل الفيديو في بلوجر مع اليوتيوب

يعمل Plyr أيضًا كبديل لإدراج كود مقاطع فيديو YouTube. الشيء المهم هو الحصول على معرّف الفيديو ، والذي بعد?v= على سبيل المثال ، سنأخذ الرمز من الرابط التالي:


https://www.youtube.com/watch?v=vaqQKgbaWIA

هكذا ، سيكون معرف الفيديو هو vaqQKgbaWIA ، والآن نحن فقط سنضعه كالمثال التالي:


<div class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="vaqQKgbaWIA">


ما سيفعله Plyr هو إدراج مقطع فيديو YouTube ، ولكن يتم التحكم فيه بالكامل بواسطة المشغل الذي قمنا بتثبيته ، على الرغم من استمرار ظهور شعار YouTubeولكن لا يهم. هنا مثال الكود السابق:

يعمل مطورو Plyr على بديل لمقاطع الفيديو المضمنه ، والتي ستتحسن تدريجياً ، لمعرفة المزيد عنها أوصي بقراءة الوثائق الخاصه بالأداة.

تشغيل ملفات الفيديو من رابط مباشر

يمكننا أيضًا الاستفادة من الروابط المباشرة لملفات الوسائط المتعددة الخاصة بنا. إذا لم يكن لديك مكان لاستضافتهم ، يمكنك استخدام Google Drive. سيكون كود تضمين الفيديو كما يلي:

<video class='js-player' poster="thumbnail.jpg" controls playsinline>
 <source src="video.mp4" type="video/mp4">
</video>

لتحديد تنسيقات مختلفة ، فإننا نحدد فقط روابط مباشرة لهذه البدائل ، على سبيل المثال webm ، وهو تنسيق فيديو بجودة عالية ووزن قليل جدًا ، ولكن غير مدعوم من قبل جميع المتصفحات ، لذلك فمن الموصي به ترك بديل:


<video class='js-player' poster="thumbnail.jpg" controls playsinline>
 <source src="video.mp4" type="video/mp4">
 <source src="video.webm" type="video/webm">
</video>


تسمح لنا السمة poster بتحديد صورة "المعاينة" و playsinline من الاستعاضة عن المشغل الأصلي لأجهزة IPhone بأجهزة Mobile Safari.

الأختصارات

يدعم المشغل أيضًا اختصارات لوحة المفاتيح. في الجدول التالي أستعرض معك المتاح حتى الآن ، وكذلك وظيفة كل منها:


0 لـ 9 البحث من 0 إلى 90٪ في الفيديو..
مسافة، K التبديل بين التوقف والتشغيل.
←, → البحث جيئة وذهابا في الفيديو.
↑, ↓ زيادة وخفض مستوى الصوت.
M كتم الصوت أو تنشيطه.
F شاشة كاملة..
C تنشيط أو إلغاء تنشيط الترجمة.
L تنشيط أو إلغاء تنشيط الخيار "التشغيل التلقائي" .

خيارات

على الرغم من أنه مشغل خفيف وبسيط ، إلا أنه يحتوي على العديد من الخيارات التي يجب أستخدامها ككائن في Plyr 3.0 أو من خلال سمة بيانات plyr-config بتنسيق JSON.

<video data-plyr-config='{ "title": "Video de prueba", "volume": "10" }'></video>



بالنسبة للتدوين الاحترافي ، من الأفضل أن يكون لديك برنامج أو برنامجان لتحرير الفيديو يتيحان لك إجراء تصنيف لوني وإزالة الضوضاء وإضافة تأثيرات / تراكبات الفيديو ، إلخ.

لمعرفة المزيد ، أوصي بقراءة ملف الـreadme.md من الـRepository الخاص بـGithub كان هذا كل شيء لليوم في هذا الموضوع،إذا كان لديك اي اسئلة او شكوك حول المقال لا تتردد في كتابتها في تعليق بالأسفل ، وإذا كنت مفيدًا ، فلا تنس مشاركة هذا المقالة ، شكرًا لك كثيرًا و دائمًا.
اقرأ أيضًا: