منصوبے کے بارے میں
Plyr ایک سادہ، ہلکا پھلکا، قابل رسائی اور قابل تخصیص میڈیا پلیئر ہے جو HTML5 ویڈیو اور آڈیو، YouTube اور Vimeo ایمبیڈز کے لیے ہے۔ یہ جدید براؤزرز کو نشانہ بناتا ہے اور خالص ES6 JavaScript میں لکھا گیا ہے جس میں کسی فریم ورک یا jQuery پر انحصار نہیں ہے، اور اسٹائلز Sass میں تیار کیے گئے ہیں اور CSS کسٹم پراپرٹیز کے ذریعے ظاہر کیے گئے ہیں۔
README سے ظاہر ہونے والی اہم صلاحیتیں:
- فارمیٹ سپورٹ: مقامی HTML5 ویڈیو اور آڈیو عناصر، نیز data-plyr-provider اور data-plyr-embed-id صفات کے ذریعے YouTube اور Vimeo iframes یا سادہ divs کی تدریجی بہتری۔
- قابل رسائی: VTT کیپشنز اور اسکرین ریڈر سپورٹ، سیمنٹک مارک اپ جیسے حجم کے لیے input type=range، progress عناصر اور حقیقی بٹن۔
- تخصیص: CSS کسٹم پراپرٹیز (مثال کے طور پر --plyr-color-main) اور Sass متغیرات آپ کو پلیئر کو عالمی سطح پر، فی کلاس یا ان لائن دوبارہ اسٹائل کرنے کی اجازت دیتے ہیں۔
- ریسپانسیو لے آؤٹ اور iframe فراہم کنندگان کے لیے ایک ریسپانسیو 16:9 ایمبیڈ ریپر کلاس۔
- hls.js، Shaka Player اور dash.js کے ساتھ اسٹریمنگ پلے بیک انٹیگریشنز۔
- تمام فراہم کنندگان کے لیے معیاری JavaScript API اور ایونٹس، لہذا YouTube اور Vimeo کو علیحدہ API ہینڈلنگ کی ضرورت نہیں ہے۔
- فل اسکرین جس میں فل-ونڈو موڈ کا فال بیک، پکچر-ان-پکچر، playsinline سپورٹ، کی بورڈ شارٹ کٹس، رفتار کنٹرولز، متعدد کیپشن ٹریکس، کنٹرولز کا i18n اور پیش نظارہ تھمب نیلز۔
- پارٹنر ایڈ انٹیگریشن یا کسٹم ads.tagUrl آپشن کے ذریعے منیٹائزیشن ہکس۔
سیٹ اپ سیدھا ہے: CDN یا سیلف-ہوسٹڈ فائلوں سے plyr.css اور plyr.js (یا پولی فیلڈ بلڈ) شامل کریں، پھر new Plyr('#player') کے ساتھ انسٹینشی ایٹ کریں۔ پری بلٹ منیفائیڈ فائلیں CDN یا unpkg سے دستیاب ہیں، یا آپ npm i && npm run build کے ساتھ سورس سے بنا سکتے ہیں۔ آئیکنز کے لیے ایک SVG سپرائٹ بطور ڈیفالٹ CDN سے لوڈ ہوتی ہے اور اسے آپشنز کے ذریعے تبدیل کیا جا سکتا ہے۔
README میں CSS کسٹم پراپرٹیز کا ایک بڑا مجموعہ دستاویز کیا گیا ہے جو رنگوں، کنٹرول اسپیسنگ اور رداس، مینیوز، ٹول ٹپس، پروگریس اور رینج اسٹائلنگ، کیپشنز اور ٹائپوگرافی کا احاطہ کرتا ہے، جس سے اسٹائل شیٹ کو فورک کیے بغیر موجودہ ڈیزائن سسٹم سے مماثل بنانا عملی ہو جاتا ہے۔
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.