Able Player؛ پخشکنندهی مدیا برای همه
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
تو مستندات پروژه اومده که Able Player یه پخشکنندهی صوت و ویدیوی HTML5 و کاملاً اپنسورسه که از اول حول محور دسترسپذیری ساخته شده. هم فایل تکی رو پخش میکنه هم یه پلیلیست کامل رو، و همهی کنترلهاش با کیبورد کار میکنن، برای صفحهخوانها برچسبگذاری شدن و با نرمافزارهای تشخیص گفتار هم قابل استفادهن. دکمههاش هم کنتراست بالا دارن و تو حالت High Contrast ویندوز محو نمیشن.
قلب ماجرا پشتیبانی از فرمت WebVTT هست: زیرنویس، فصلبندی و توضیح صوتیِ متنی همه با همین فرمت تعریف میشن. توضیح صوتی رو مرورگر با Web Speech API بلند میخونه و کاربر میتونه تنظیم کنه موقع پخش توضیح، ویدیو مکث کنه تا صداها روی هم نیفتن. اگه نسخهی جداگانهی «با توضیح» از ویدیو هم موجود باشه، پخشکننده اجازه میده کاربر بین دو نسخه سوییچ کنه.
یکی از بخشهای جالبش رونوشت تعاملیه که موقع لود صفحه از روی همون فایلهای زیرنویس و فصل و توضیح ساخته میشه. با کلیک روی هر جای متن، پخش از همون لحظه شروع میشه و کاربر کیبوردی هم میتونه بین جملهها حرکت کنه. کاربر میتونه فونت، رنگ و پسزمینهی زیرنویس و سرعت پخش رو هم از پنل ترجیحات عوض کنه — چیزی که نویسندگان پروژه بهش میگن طراحی فراگیر.
از نظر فنی به jQuery نسخهی ۳.۵ به بالا نیاز داره و از نسخهی ۴.۵.۱ استفاده از کتابخانهی DOMPurify اجباری شده. نسخهی ۵.۰.۰ یه باندل ES module اضافه کرده که خودش jQuery رو import میکنه و دیگه لازم نیست روی window باشه. پشتیبانی از اینترنت اکسپلورر هم از نسخهی ۴.۴ حذف شده. تو اپهای تکصفحهای باید data-able-player رو برداری و خودت نمونه رو بسازی و آخر کار آزادش کنی:
const video1 = document.getElementById('video1');
const player = new AblePlayer(video1);
player.dispose();نکات کلیدی:
- پخشکنندهی صوت و ویدیوی HTML5 با تمرکز کامل روی دسترسپذیری
- زیرنویس، فصلبندی و توضیح صوتی با فرمت استاندارد WebVTT
- رونوشت تعاملی خودکار با هایلایت همزمان و پرش به هر نقطه
- پشتیبانی از یوتیوب و ویمیو و ترجمه به بیش از ۲۰ زبان
- نیازمند jQuery و DOMPurify؛ از نسخهی ۵.۰.۰ باندل ES module هم داره
