کتابخانه
media-chrome یه مجموعه کامپوننت وب (custom element) برای ساخت کنترل های پلیر صوتی و تصویریه. به جای پلیر آماده، دکمه پخش، نوار زمان، صدا و تمام صفحه رو با تگ های HTML کنار هم می چینی و ظاهرشون رو با CSS خودت می سازی. مجوزش MIT هست و تیم Mux نگهداریش می کنه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۲٫۷ مگابایت · ۲۱۳ فایل · انتشار
دانلود هفتگی جهانی
۵٫۲ میلیون
هفته ۲۵ مهر تا ۱ آبان۱٫۸٪ بیشتر از هفته قبل
منبع: npmبه‌روزرسانی آمار
SHA-256: 2b4139af220c712648c39dc2a765bdb3bb5ddac9645f1a75edf40c7acb72962e
کنترل های پیش فرض مرورگر برای تگ video و audio توی هر مرورگر یه شکل دارن و شخصی سازیشون سخته. پلیرهای آماده هم معمولاً یا سنگینن یا ظاهر خودشون رو به سایتت تحمیل می کنن. media-chrome یه راه میانه است. پخش رو به همون المان video یا audio می سپاره و فقط لایه کنترل ها رو به شکل web component بهت می ده.
کارکردش ساده است. یه media-controller دور همه چیز می ذاری، المان video یا audio رو با slot مخصوص داخلش قرار می دی و بعدش دکمه ها و نوارها رو کنار هم می چینی؛ مثلاً media-play-button، media-mute-button، media-time-range، media-volume-range و media-fullscreen-button. هر کدوم وضعیتشون رو خودشون از کنترلر می گیرن، پس برای وصل کردنشون لازم نیست جاوااسکریپت بنویسی. ظاهرشون هم با CSS و متغیرهای CSS عوض می شه. رنگ، اندازه و فاصله ها رو مثل بقیه قالب سایتت تنظیم می کنی.
به درد کسی می خوره که قالب اختصاصی داره و می خواد پلیر هم با بقیه طراحی بخونه: سایت آموزشی، پادکست، ویدیوی معرفی محصول یا پورتال خبری. چون web component هست، به فریم ورک خاصی بسته نیست و توی صفحه ساده، قالب وردپرسی سفارشی یا پروژه های مبتنی بر فریم ورک های جاوااسکریپتی کار می کنه. ولی اگه فقط می خوای یه ویدیو رو داخل یه نوشته بذاری، پلیر آماده یا کنترل های خود مرورگر کافیه و media-chrome کار اضافه است. یه نکته هم یادت باشه: این کتابخانه فقط کنترل ها رو می سازه. پخش جریانی مثل HLS موضوع جداست و به منبع مدیا و المان پخش مربوط می شه.
موقع انتخاب و استفاده سه چیز رو چک کن. اول، ویدیوها و فایل های کتابخانه رو از روی هاست خودت سرو کن، نه از CDN خارجی؛ توی روزهای محدودیت اینترنت بین الملل همین وابستگی ها صفحه رو خراب می کنن. دوم، سایت فارسی راست به چپه، پس بعد از چیدن کنترل ها ترتیب و جهت نوار رو روی چند مرورگر و موبایل امتحان کن. سوم، دسترسی با کیبورد و برچسب دکمه ها رو تست کن، مخصوصاً برای سایت آموزشی یا سازمانی.
نسخه های رسمی و بدون تغییر media-chrome توی مخزن داخلی ما هم هست؛ وقتی دسترسی به npm یا منابع خارجی مشکل داره، می تونی از همین جا برداری. اگه ویدیوهات رو هم روی هاست داخلی بذاری، پلیر و فایل مدیا از یه جا میان و بارگذاری صفحه معمولاً سریع تر و قابل پیش بینی تر می شه.
برای استفاده توی صفحه، همون کد آماده پایین همین صفحه رو بردار و قدم به قدم جلو برو:
اگه توی وردپرس کار می کنی، اسکریپت رو از طریق قالب یا یه افزونه کوچک شخصی فقط توی صفحاتی که پلیر دارن لود کن، نه کل سایت. اگه با فریم ورک جاوااسکریپت کار می کنی، بسته npm رو نصب کن و برای ادغام با همون فریم ورک سراغ مستندات رسمی برو.
یه کتابخانه متن بازه که کنترل های پلیر صوتی و تصویری رو به شکل web component بهت می ده. خود ویدیو یا صدا رو با تگ video یا audio داری و media-chrome دکمه پخش، نوار زمان، صدا و تمام صفحه رو می سازه. ظاهر همه این ها رو هم با CSS می تونی کامل عوض کنی.
نه، خودش پخش کننده نیست. پخش رو همون المان video یا audio انجام می ده و media-chrome فقط لایه کنترل ها رو روش می سازه. اگه به پخش جریانی مثل HLS نیاز داری، باید منبع یا المان مدیای مناسبش رو جداگانه کنار این کتابخانه بذاری.
آره، چون یه کتابخانه جاوااسکریپته و به فریم ورک خاصی وابسته نیست. فایلش رو روی هاست خودت بذار، اسکریپت رو توی قالب یا افزونه لود کن و تگ ها رو توی صفحه بنویس. فقط جهت راست به چپ و رفتار روی موبایل رو حتماً تست کن.
مجوز MIT معمولاً استفاده تجاری و تغییر کد رو اجازه می ده، به شرطی که اعلان مجوز رو حفظ کنی. با این حال متن مجوزی که همراه خود بسته اومده رو یه بار بخون تا مطمئن بشی با نوع پروژه ات جور در میاد.
پلیرهای آماده یه ظاهر و رفتار مشخص دارن و تغییرشون محدوده. media-chrome بیشتر شبیه قطعه های لگوئه: خودت تصمیم می گیری کدوم کنترل کجا باشه و چه شکلی داشته باشه. در عوض برای چیدن و استایل دادن کمی کار بیشتر لازمه.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.