دانلود plyr و نشانی CDN ایرانی

اگه تا حالا تگ video رو ساده توی صفحه گذاشته باشی، می دونی که هر مرورگر کنترل های خودش رو داره. ظاهرشون فرق می کنه، بعضی هاشون سرعت پخش یا زیرنویس رو درست نشون نمی دن و هماهنگ کردنشون با طراحی سایت دردسره. plyr برای همین کار ساخته شده. روی تگ video و audio سوار می شه و برای ویدیوهای یوتیوب و ویمیو هم همون ظاهر و همون کنترل ها رو می ده. نتیجه اش چیزی شبیه یه پلیر واحده.

کنترل های اصلی رو داره: پخش و توقف، صدا، نوار پیشرفت، تمام صفحه، تغییر سرعت پخش و زیرنویس. روی دسترس پذیری هم تاکید داره، یعنی کار با کیبورد و سازگاری با ابزارهای کمکی. ظاهرش رو هم با CSS می شه به رنگ و سبک سایتت نزدیک کرد. برای فایل صوتی هم همین پلیر جواب می ده، مثلاً برای پادکست یا آموزش صوتی. برای راه اندازی لازم نیست جی کوئری یا فریم ورک خاصی داشته باشی. فقط فایل های جاوااسکریپت و CSS رو به صفحه اضافه می کنی و کار راه می افته.

یه نکته رو قبل از انتخاب جدی بگیر. طبق توضیح صفحه رسمی پروژه، plyr ظاهراً دیگه توسعه فعال نداره و فقط به روزرسانی امنیتی می گیره. همون جا برای کارهای تازه Video.js رو پیشنهاد می کنن. پس منتظر قابلیت جدید نباش. اگه سایتی داری که الان باهاش خوب کار می کنه، لازم نیست عجله کنی. ولی برای پروژه ای که قراره سال ها نگهداری بشه، اول Video.js رو هم بررسی کن و بعد تصمیم بگیر. وضعیت دقیق پروژه رو هم قبل از انتخاب از صفحه رسمی چک کن.

توی شرایط ایران چند چیز رو هم در نظر بگیر. ویدیوی یوتیوب یا ویمیو ممکنه برای خیلی از بازدیدکننده ها بدون فیلترشکن بالا نیاد، پس برای سایت ایرانی بهتره فایل ویدیو رو از هاست خودت پخش کنی. کنترل ها برای سایت راست به چپ شاید به یه کم تنظیم CSS نیاز داشته باشن. زیرنویس فارسی رو هم با فایل VTT و کدگذاری UTF-8 بده تا حروف خراب نشن.

نسخه های رسمی و بدون تغییر plyr توی مخزن داخلی ما هم هست. پس وقتی دسترسی به npm یا منابع خارجی قطعه، می تونی از همین جا برداری.

راهنمای استفاده

plyr یه کتابخانه جاوااسکریپته، نه افزونه وردپرس. برای استفاده باید فایل هاش رو به صفحه اضافه کنی. کد آماده اش پایین همین صفحه هست و لازم نیست از صفر بنویسیش. مراحل کلی این طوره:

• فایل های جاوااسکریپت و CSS رو از همین مخزن بگیر و روی هاست خودت بذار. اگه پروژه ات با npm کار می کنه، می تونی بسته plyr رو نصب کنی.
• فایل CSS رو توی بخش head صفحه و فایل جاوااسکریپت رو پایین صفحه، قبل از بسته شدن body، صدا بزن.
• تگ video یا audio رو توی صفحه بذار و آدرس فایل رو بهش بده. برای یوتیوب و ویمیو یه عنصر مخصوص با شناسه ویدیو لازمه.
• با کد آماده پایین صفحه، plyr رو روی همون عنصر راه بنداز.
• اگه زیرنویس می خوای، فایل VTT رو با کدگذاری UTF-8 کنار ویدیو معرفی کن.

توی وردپرس این فایل ها رو یا توی قالب فرزند می ذاری یا با یه افزونه افزودن کد به سایت اضافه می کنی. قالب فرزند بهتره، چون با به روزرسانی قالب اصلی فایل هات پاک نمی شن. بعد از راه اندازی، صفحه رو توی چند مرورگر و موبایل امتحان کن. اگه سایتت راست به چپه، چیدمان کنترل ها رو هم با دقت نگاه کن و اگه جابه جا بودن، با چند خط CSS درستشون کن.