@swarmcloud/hls یه بسته npm برای پخش ویدیوی HLS توی مرورگره که بیننده های همزمان رو به هم وصل می کنه تا تکه های ویدیو رو بین خودشون رد و بدل کنن. با این کار بخشی از بار سرور یا CDN برداشته می شه. برای سایت هایی که پخش زنده یا ویدیوی پرمخاطب دارن به کار میاد.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
وقتی یه ویدیوی زنده یا پرمخاطب رو با HLS پخش می کنی، هر بیننده تکه های ویدیو رو مستقیم از سرور یا CDN می گیره. هر چی مخاطب بیشتر بشه، پهنای باند، هزینه و فشار روی سرور هم بالاتر می ره. @swarmcloud/hls این مشکل رو با P2P سبک تر می کنه: بیننده هایی که همزمان یه ویدیو رو می بینن، تکه هایی که دانلود کردن رو بین خودشون هم رد و بدل می کنن.
از نظر کار، یه پخش کننده HLS برای مرورگره. اگه قبلا با hls.js کار کرده باشی، احتمالا برات آشنا به نظر می رسه. تکه هایی که از همتاها نرسه از منبع معمولی گرفته می شه، پس P2P جای سرور رو کامل نمی گیره و فقط بار روش رو کم می کنه. ارتباط بین بیننده ها هم معمولا روی WebRTC سوار می شه. جزئیات تنظیمات رو توی مستندات رسمی پروژه ببین، چون ممکنه از نسخه ای به نسخه دیگه فرق کنه.
این کتابخونه وقتی به دردت می خوره که بیننده همزمان زیاد داری: وبینار و کلاس آنلاین پرمخاطب، پخش مسابقه، رویدادهای زنده، یا یه سایت ویدیویی که چند نفر همزمان یه محتوا رو می بینن. توی شرایط ایران که ترافیک بین الملل گاهی محدوده و پهنای باند سرور هم ارزون نیست، کم کردن بار سرور مبدا می تونه به صرفه باشه. ولی اگه سایتت فقط چند بیننده همزمان داره، P2P چیز زیادی بهت نمی ده، چون همتای کافی برای تبادل پیدا نمی شه. ویدیوی MP4 ساده هم که با تگ video پخش می کنی، به این بسته نیازی نداره.
چند نکته قبل از انتخاب. اول، روی شبکه واقعی کاربرهات تست کن: اینترنت موبایل، ADSL و NAT های مختلف روی کیفیت اتصال همتاها اثر می ذارن. دوم، ببین بخش هماهنگ کننده اتصال همتاها به کدوم سرویس وصل می شه و از داخل ایران در دسترسه یا نه. سوم، اگه محتوات پولیه یا خصوصیه، یادت باشه تکه های ویدیو بین بیننده ها رد و بدل می شه و ببین این با سیاست دسترسی ات جور در میاد یا نه. طبق مشخصات بسته، مجوزش MIT هست و برای پروژه های تجاری هم قابل استفاده ست، ولی متن مجوز رو توی بسته یه نگاه بنداز.
نسخه های رسمی و بدون تغییر @swarmcloud/hls رو توی مخزن داخلی ما هم می تونی بگیری، برای روزهایی که دسترسی به npm مشکل داره.
راهنمای استفاده
کار خاصی لازم نیست؛ مسیر کلی اینه:
بسته رو از همین صفحه دانلود کن. اگه به npm دسترسی داری، می تونی با npm هم نصبش کنی.
فایل کتابخونه رو توی صفحه ات لود کن. کد آماده پایین همین صفحه هست و می تونی ازش شروع کنی.
توی صفحه یه تگ video بذار تا پخش کننده بهش وصل بشه.
پخش کننده رو بساز و نشانی playlist با پسوند m3u8 رو بهش بده. تنظیمات P2P رو هم طبق مستندات رسمی اضافه کن.
ویدیوها باید از قبل به فرمت HLS آماده شده باشن. اگه فقط MP4 داری، اول با ابزاری مثل ffmpeg تبدیلش کن.
هدرهای CORS رو روی سروری که playlist و تکه ها رو سرو می کنه درست تنظیم کن، وگرنه مرورگر اجازه نمی ده فایل ها لود بشن.
بعد از راه افتادن حتما تست کن. صفحه رو روی دو دستگاه یا دو مرورگر مختلف باز کن، یه ویدیوی زنده یا همزمان رو پخش کن و ببین تبادل بین همتاها واقعا اتفاق می افته یا نه. اگه نمی افته، اول مسیر اتصال به سرویس هماهنگ کننده رو چک کن و بعدش تنظیمات شبکه رو.
نشانی مستقیم فایل اصلی 2.11.4https://mirror.wbweb.ir/npm/@swarmcloud/hls@2.11.4/dist/p2p-engine.min.js
پرسشهای رایج
یه کتابخونه جاوااسکریپت برای پخش ویدیوی HLS توی مرورگره که از P2P استفاده می کنه. بیننده هایی که همزمان یه ویدیو رو می بینن، تکه های دانلودشده رو بین هم رد و بدل می کنن. نتیجه اش کم شدن بار سرور یا CDN توی پخش های پرمخاطبه. برای ویدیوهای کم بیننده فایده چندانی نداره.
نه. تکه هایی که از همتاها نرسه از منبع معمولی گرفته می شه و بیننده اول هم باید ویدیو رو از یه جایی بگیره. P2P بار رو کم می کنه ولی جای سرور مبدا رو نمی گیره. هر چی بیننده همزمان بیشتر باشه، صرفه جویی هم بیشتر می شه.
این بسته افزونه وردپرس نیست، یه کتابخونه جاوااسکریپته. می تونی فایلش رو توی قالب یا یه افزونه سفارشی لود کنی و روی صفحه ای که ویدیو داره فراخوانی اش کنی. اگه با صفحه ساز کار می کنی، معمولا باید کد رو توی بخش اسکریپت سفارشی بذاری. این روش یه کم آشنایی با کدنویسی می خواد.
این بسته برای HLS ساخته شده، پس MP4 رو مستقیم پخش نمی کنه. اول باید ویدیو رو به HLS تبدیل کنی؛ خروجی اش یه فایل playlist و تکه های کوچیک ویدیوئه. ابزارهایی مثل ffmpeg این کار رو انجام می دن. اگه فقط MP4 ساده پخش می کنی، تگ video به تنهایی کافیه.
طبق مشخصات بسته، مجوزش MIT هست. یعنی برای پروژه های شخصی و تجاری قابل استفاده و تغییره. فقط باید متن مجوز و اعلام حق نشر رو همراه کد نگه داری. اگه نگران جزئیات حقوقی هستی، متن کامل مجوز رو توی خود بسته بخون.
Swiper یه کتابخانه متن باز جاوااسکریپت و CSS برای ساخت اسلایدر و کاروسل لمسی توی سایت و اپ وبه. مجوزش MIT هست و به jQuery نیاز نداره. برای بنر صفحه اول، گالری تصویر، لیست محصول و هر جایی که محتوا باید بچرخه به کار میاد. نسخه رسمی و بدون تغییرش رو می تونی از همین مخزن برداری.
slick-carousel یه کتابخانه جاوااسکریپت برای ساخت اسلایدر و کاروسل توی صفحه های وبه که روی jQuery سوار می شه. با اون می تونی تصویر، کارت محصول یا نقل قول رو کنار هم بچرخونی، تعداد اسلایدهای هر نمایش رو برای موبایل و دسکتاپ جدا تنظیم کنی و با کشیدن انگشت ورق بزنی. سازنده اش Ken Wheeler و مجوزش MIT هست.
@videojs/html یه بسته npm از خانواده Video.js برای ساخت پلیر ویدیو و صداست که با custom element های استاندارد مرورگر کار می کنه. پلیر و اسکین آماده رو توی صفحه HTML ساده یا پروژه Vue و Svelte می ذاری و ظاهر و کنترل ها رو خودت تعیین می کنی. مجوزش Apache هست.
Splide (با نام بسته @splidejs/splide) یه کتابخانه جاوااسکریپت سبک برای ساخت اسلایدر و کروسله. به کتابخانه دیگه ای وابسته نیست، با کیبورد و صفحه خوان سازگاره و برای بنر صفحه اصلی، لیست محصولات، گالری تصاویر و نظرات مشتری ها به کار می ره. مجوزش MIT هست و تو وردپرس و پروژه های HTML ساده راحت اجرا می شه.
video.js یک کتابخانه متن باز جاوااسکریپت برای پخش ویدیو و صدا توی صفحه های وب هست. روی تگ استاندارد video یه پلیر یکدست با کنترل ها، زیرنویس و امکان شخصی سازی می ذاره. اگه می خوای ظاهر و رفتار پخش ویدیو روی همه مرورگرها یکسان باشه، گزینه خوبیه.
@vidstack/cdn نسخه آماده مرورگر پلیر Vidstack توی یه بسته npm هست. با اون بدون React، Vue و باندلر، فقط با چند تگ script و link، می تونی یه پلیر ویدیو و صدای مدرن با کنترل های آماده و قابل شخصی سازی توی سایتت راه بندازی.
آخرین نسخه
۱.۱۵.۷
نسخهها
۵۶
بهروزرسانی
چیزی که لازم دارید اینجا نیست؟
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخههای رسمی آن به مخزن اضافه میشود.