راه های مختلفی برای افزودن رسانه به یک صفحه وب وجود دارد. قبلاً یاد گرفتید که چگونه از تگ استاندارد <video> استفاده کنید. در این مقاله با تعدادی از چارچوب‌های رسانه (یا کتابخانه‌های) موجود آشنا می‌شوید که می‌توانید از آنها برای گسترش یا جایگزینی رفتار پخش‌کننده ویدیوی پیش‌فرض HTML5 استفاده کنید.
چارچوب‌های رسانه‌ای هم در انواع انحصاری و هم منبع باز عرضه می‌شوند، و در هسته آنها مجموعه‌ای از API هستند که از پخش صدا و/یا ویدیو برای فرمت‌های کانتینر مختلف و پروتکل‌های انتقال پشتیبانی می‌کنند. یک چارچوب خوب دارای معماری ماژولار است و مستندات واضح و دقیقی را ارائه می دهد. در حالت ایده آل، تنظیم و استفاده از آن نیز باید نسبتاً آسان باشد. ممکن است از خود بپرسید، "اگر پخش کننده ویدیوی HTML5 در حال حاضر بیشتر ویژگی ها را ارائه می دهد، پس چرا باید از یک چارچوب یا کتابخانه استفاده کنم؟" این یک سوال عالی است، بیایید وارد آن شویم.
مزایای استفاده از چارچوب
در اکثر مواقعی که فراتر از نیازهای یک صفحه وب اولیه است، می خواهید از یک چارچوب رسانه ای برای ارائه محتوای خود استفاده کنید. مگر اینکه آماده توسعه و حفظ مجموعه ای از ویژگی های غنی مانند پخش آفلاین، پخش جریانی، تجزیه و تحلیل، تصویر در تصویر، پیش نمایش تصاویر کوچک، جاسازی و کسب درآمد مانند بهینه سازی نرخ پر کردن، زمان بندی تبلیغات، یا مناقصه سرصفحه باشید. احتمالاً باید این پیچیدگی را به یک راه حل موجود تخلیه کنید.
اینجاست که چارچوب‌های رسانه وارد می‌شوند. آنها مجموعه‌ای از ویژگی‌ها و شرایطی را در اختیار شما قرار می‌دهند که در آن می‌توانید از آن ویژگی‌ها استفاده کنید، و سپس باید تصمیم بگیرید که کدام چارچوب برای پروژه شما مناسب است. در مقاله بعدی درباره نحوه ساخت یک PWA با جریان آفلاین که چندین ویژگی پیچیده را پیاده سازی می کند صحبت خواهیم کرد. هشدار اسپویلر، کار زیادی بود و هنوز تا یک راه حل آماده تولید فاصله دارد. خودتان را از سردرد نجات دهید و از یک چارچوب استفاده کنید.
گزینه های زیادی برای انتخاب وجود دارد، در حال حاضر این مقاله روی سه مورد تمرکز دارد که عبارتند از Shaka Player ، JW Player و Video.js .
بازیکن شاکا
طبق اسناد، Shaka Player گوگل یک کتابخانه جاوا اسکریپت منبع باز برای رسانه های تطبیقی است. فرمت‌های رسانه تطبیقی (مانند DASH و HLS ) را بدون استفاده از افزونه‌ها در مرورگر پخش می‌کند. در عوض، Shaka Player از استانداردهای وب باز Extensions MediaSource و Encrypted Media Extensions استفاده می‌کند.
Shaka Player همچنین از ذخیره سازی آفلاین و پخش رسانه با استفاده از IndexedDB پشتیبانی می کند. محتوا را می توان در هر مرورگری ذخیره کرد. ذخیره سازی مجوزها به پشتیبانی مرورگر بستگی دارد.
در سایت مستندات Shaka Player دستورالعمل هایی برای استفاده اولیه وجود دارد. با این حال، به طور خلاصه برای استفاده از Shaka Player ابتدا باید یک صفحه HTML با یک عنصر ویدیویی یا صوتی ایجاد کنید. سپس در جاوا اسکریپت برنامه خود، polyfills را نصب کرده و پشتیبانی مرورگر را بررسی کنید. هنگامی که مرورگر پشتیبانی از Shaka Player را تأیید کرد، یک اسکریپت یک شی Player ایجاد می‌کند تا عنصر رسانه را بپیچد، به خطاها گوش دهد، سپس یک فایل مانیفست را بارگیری کند. Shaka Player از آنجا هدایت خواهد شد.
با Shaka شما باید فایل های رسانه ای خود را خودتان میزبان و رمزگذاری کنید. ایجاد یک سرور رسانه خیلی پیچیده نیست، با این حال رمزگذاری/ترانکدگذاری رسانه می تواند زمان بر و پیچیده باشد. احتمالاً می خواهید این قسمت را در سرویسی مانند Zencoder ، Amazon Elastic Encoder یا Google Transcoder API برای خودکارسازی کارهای تکراری و سرعت بخشیدن به فرآیند، بارگذاری کنید.
نکته جالب در مورد Shaka Player این است که یک ابزار واقعا خارق العاده و بسته بندی رسانه SDK برای بسته بندی و رمزگذاری DASH و HLS به نام Shaka Packager وجود دارد. می‌تواند محتوای رسانه‌ای را برای پخش آنلاین آماده و بسته‌بندی کند، که قبلاً در تبدیل رسانه و رمزگذاری رسانه با آن آشنا شدید.
پخش کننده JW
اگر به دنبال گزینه ای هستید که خدمات میزبانی و رمزگذاری/ترانکد را ارائه می دهد، ممکن است به JW Player نگاه کنید، اما به خاطر داشته باشید که JW Player یک نرم افزار اختصاصی است. به این معنی که کنترل زیادی روی پلت فرم یا نقشه راه ندارید. یک نسخه رایگان اولیه که در آن فیلم ها با علامت واترمارک نمایش داده می شوند و یک نسخه تجاری وجود دارد.
JW Player از پخش جریانی با MPEG-DASH (فقط نسخه پولی)، مدیریت حقوق دیجیتال (DRM) (با Vualto)، تبلیغات تعاملی، سفارشی‌سازی رابط، و جاسازی‌ها پشتیبانی می‌کند. یک API و SDK به خوبی مستند شده وجود دارد. با این حال، اگر فقط به دنبال راهی سریع و رایگان برای میزبانی رسانه خود هستید، جاسازی ویدیوهای YouTube معمولاً بهترین گزینه رایگان شما خواهد بود.
Video.js
طبق وب سایت آنها، Video.js از ابتدا برای دنیای HTML5 ساخته شده است. این ویدیو از HTML5 و فرمت های جریان مدرن مانند DASH و HLS و همچنین YouTube و Vimeo پشتیبانی می کند. از پخش ویدئو در دسکتاپ و دستگاه های تلفن همراه پشتیبانی می کند و با پوسته های مبتنی بر CSS در همه جا خوب به نظر می رسد.
چند راه برای استفاده از Video.js وجود دارد، اما ساده ترین آن استفاده از نسخه رایگان CDN ارائه شده توسط Fastly است. می‌توانید در صفحه شروع کار درباره نحوه راه‌اندازی پخش‌کننده اطلاعات بیشتری کسب کنید. Video.js یک پخش کننده ویدیوی بسیار قدرتمند است و مانند Shaka Player باید ویدیوی خود را میزبانی و رمزگذاری کنید. با این حال، یک تفاوت در سیستم پلاگین است که در آن می توانید کارهایی مانند پخش ویدیوهای YouTube را در پخش کننده Video.js انجام دهید، که می توان آن را نیز سفارشی کرد.
سایر چارچوب ها
فریمورک‌ها و کتابخانه‌های مختلفی در دسترس هستند، این مقاله فقط سطحی را که در آنجا وجود دارد نشان می‌دهد. هنگام انتخاب یک چارچوب، باید در نظر بگیرید که چه ویژگی هایی برای پروژه نیاز دارید و چگونه قصد دارید رسانه خود را میزبانی و رمزگذاری یا ترانکد کنید. آیا به تبلیغات پیش از پخش یا سایر استراتژی‌های کسب درآمد نیاز دارید؟ آیا رسانه شما به صورت آفلاین در دسترس خواهد بود؟ بودجه شما چقدر بزرگ است یا کوچک؟ یا هر تعداد ملاحظات دیگر. تحقیقات خود را انجام دهید و از افراد در شبکه خود برای پیشنهادات بخواهید. ده ها گزینه عالی دیگر وجود دارد و قبل از هر انتخابی، کمی زمان بگذارید تا یکی را انتخاب کنید که برای تیم شما مناسب باشد و از ایجاد بدهی فنی غیر ضروری یا پیچیدگی برای حفظ در طول چرخه عمر پروژه جلوگیری کنید.
در مرحله بعد، در مورد PWA با جریان آفلاینی که برای نشان دادن نحوه نزدیک شدن و مقابله با چالش‌های اصلی که با راه‌حل خود با استفاده از شی ویدیوی HTML5 و بدون چارچوبی برای انجام کارهای سنگین ایجاد می‌کنیم، آشنا خواهید شد.