کتابخانه
@vidstack/cdn نسخه آماده مرورگر پلیر Vidstack توی یه بسته npm هست. با اون بدون React، Vue و باندلر، فقط با چند تگ script و link، می تونی یه پلیر ویدیو و صدای مدرن با کنترل های آماده و قابل شخصی سازی توی سایتت راه بندازی.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۳٫۳ مگابایت· ۱۱۷ فایل· انتشار
SHA-256: 7351185b4a03ed9fc722f73e8fdf7c6bb3f4d77719df219270ebf3adb7293e57
تگ پیش فرض video کار می کنه، ولی ظاهرش توی هر مرورگر فرق داره و ساختن کنترل های درست و حسابی براش کلی وقت می گیره. Vidstack یه پلیر مبتنی بر وب کامپوننت هاست که این کار رو برات انجام می ده: دکمه پخش، نوار پیشرفت، صدا، تمام صفحه، زیرنویس و بقیه کنترل های معمول. بسته @vidstack/cdn همین پلیر رو به شکل فایل های آماده عرضه می کنه که build نمی خواد. یعنی پروژه ات لازم نیست چیزی از npm و باندلر بدونه.
این بسته به درد کسی می خوره که با HTML ساده، قالب وردپرس سفارشی، لندینگ پیج یا سایت آموزشی کار می کنه و یه پلیر یکدست و مرتب می خواد. مثلاً سایت دوره آموزشی که ویدیوهاش رو خودش آپلود می کنه، یا وبلاگی که پادکست داره و پلیر صوتی تمیز لازم داره. ولی اگه پروژه ات React، Vue یا Next هست و باندلر داری، معمولاً بهتره سراغ بسته های اصلی خود Vidstack بری تا فقط بخش های لازم وارد پروژه بشه. یه نکته دیگه هم هست: این فقط یه پلیره. نه ویدیوت رو نگه می داره، نه فرمتش رو تبدیل می کنه. اگه فقط می خوای ویدیوی یه سرویس دیگه رو توی صفحه نشون بدی، شاید یه iframe ساده برات کافی باشه.
موقع انتخاب و استفاده چند چیز رو در نظر بگیر. اول اینکه توی شرایط محدودیت اینترنت بین الملل، فایل های پلیر رو روی هاست خودت بذار و به منبع بیرونی وابسته نباش. بعضی قابلیت ها، مثل پخش HLS، ممکنه بسته به تنظیمات بخش هایی رو جداگانه بارگذاری کنن. برای همین صفحه رو حتماً توی شبکه ای تست کن که اینترنت بین الملل نداره. دوم، خود فایل ویدیو مهم تره. MP4 با کدک H.264 تقریباً همه جا پخش می شه، ولی برای ویدیوهای بلند و کاربرهایی با اینترنت ضعیف، پخش تکه تکه مثل HLS تجربه بهتری می ده. سوم، اگه ویدیوت حرف زدنی هست، فایل زیرنویس هم اضافه کن. هم برای کسی که صدا رو قطع کرده به کار می آد، هم برای دسترسی پذیری. مجوز Vidstack از نوع MIT هست، ولی قبل از استفاده تجاری یه نگاه به فایل مجوز بسته بنداز.
نسخه رسمی و بدون تغییر @vidstack/cdn توی مخزن داخلی ما هم هست. پس اگه دسترسی به منبع اصلی قطع یا کند بود، می تونی از همین صفحه برداری و روی هاست خودت بذاری.
کد آماده استفاده پایین همین صفحه هست. مراحل کلی کار اینه:
توی وردپرس راحت ترین راه اینه که فایل ها رو توی پوشه قالب یا قالب فرزند بذاری و با wp_enqueue_script و wp_enqueue_style اضافه شون کنی. بعدش تگ پلیر رو توی یه بلوک HTML سفارشی یا فایل قالب بذار. آخرش صفحه رو یه بار روی موبایل و یه بار بعد از پاک کردن کش تست کن.
Vidstack یه کتابخانه پلیر ویدیو و صدا برای وبه. @vidstack/cdn نسخه آماده مرورگرشه که مستقیم با تگ script و link توی صفحه لود می شه. Vidstack معمولی رو معمولاً با npm و باندلر استفاده می کنن، ولی این بسته برای سایت های ساده و وردپرسی راحت تره.
نه، افزونه خاصی نمی خواد. فایل های جاوااسکریپت و CSS رو توی قالب یا قالب فرزند بذار، با wp_enqueue_script و wp_enqueue_style اضافه شون کن و تگ پلیر رو توی یه بلوک HTML سفارشی یا فایل قالب بنویس. اگه افزونه ای برای افزودن کد سفارشی داری، اون هم جواب می ده.
اگه فایل های پلیر و ویدیو رو روی هاست داخلی خودت گذاشته باشی، بله. فقط حواست باشه بعضی قابلیت ها، مثل HLS یا پخش از سرویس های خارجی، ممکنه به منبع بیرونی وابسته باشن. قبل از انتشار، صفحه رو توی شبکه ای بدون اینترنت بین الملل تست کن.
نه، فقط پلیره. فایل ویدیو باید جای دیگه ای باشه، یا روی هاست یا سرور خودت، یا روی یه سرویس دیگه، و تو فقط آدرسش رو به پلیر می دی. پلیر ویدیو رو نگه نمی داره و فرمتش رو هم عوض نمی کنه. اگه ویدیوهای حجیم داری، هاست یا سروری با پهنای باند کافی بگیر تا پخش وسط کار گیر نکنه.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.