پخش بهتر ویدیو با imgix — مجله Smashing

افزودن ویدیو به وب سایت شما فوراً به ارزش افزوده می شود، اما همچنین سطح جدیدی از پیچیدگی را به توسعه وب شما می افزاید. میتونم استفاده کنم <video> برچسب؟ آیا به یک پخش کننده ویدیوی جاوا اسکریپت نیاز دارم؟ برای بهترین پشتیبانی مرورگر، ویدئو باید در چه فرمت هایی باشد؟ چگونه سرعت های مختلف شبکه را در محیط های مختلف محاسبه کنم؟ چگونه مطمئن شوم که ویدیوهای من همیشه با حداقل بافر پخش می شوند؟

خیلی به نظر می رسد (و حتی ممکن است در نظر داشته باشید که دستان خود را در هوا پرتاب کنید و بپرسید: «چرا آن را در YouTube قرار نمی دهیم؟») این یک پاسخ معتبر است – هر چه بیشتر به دنبال ارائه ویدیو و ویدیو باشید. ، پیچیدگی های بیشتر و بیشتری ایجاد می شود که توسعه دهندگان شما باید با آن دست و پنجه نرم کنند.

برای برخی، “پرتاب همه چیز در YouTube” ممکن است راه حل مناسبی برای مدیریت پیچیدگی های ویدئو باشد. اما یوتیوب مبتنی بر تبلیغات و تماشای ویدیوها است، و احتمالاً نمی‌خواهید تبلیغی در محتوای مهم مأموریت شما ظاهر شود – حتی بدتر از آن اگر تبلیغی از رقبای شما باشد! اهداف شما از تحویل ویدیو مستقیماً با اهداف پلتفرم تحویل ویدیوی YouTube در تضاد است و آن را به یک راه حل ایده آل برای اکثر شرکت ها تبدیل می کند.

آیا این بدان معناست که ما به میدان اول برگشتیم؟

با حذف بزرگترین (و ارزان ترین) سرویس، بهترین راه حل برای حل تمام سوالات پاراگراف اول چیست؟ ساختن پلتفرم ویدیویی خود کاملاً ممکن است، اما این ما را به پیچیدگی‌ها بازمی‌گرداند و تیم توسعه‌تان را از ویژگی‌های اصلی برای رسیدگی به تحویل ویدیو دور می‌کند. از زمان به بازار، هزینه (و سربار شناختی)، بهترین راه برای افزودن ویدیو، استفاده از سرویس پخش ویدیو است. چیز بزرگ امروز این است که شما می توان از فناوری های مشابهی که توسط Netflix یا Hulu استفاده می شود برای ارائه ویدیوهای خود استفاده کنید.

جریان ویدیو چیست و چرا به ویدیوی نرخ بیت تطبیقی ​​نیاز دارید

پخش جریانی ویدیو راهی است که امروزه بیشتر محتوای ویدیویی در وب ارائه می شود. این دارای تعدادی مزیت برای استفاده از یک ویدیوی استاتیک در آن است <video> برچسب زدن

جالب‌ترین ویژگی پخش ویدیو این است ویدئو با نرخ بیت تطبیقی. قبل از توسعه ویدیو با نرخ بیت تطبیقی، صرف نظر از دستگاه یا محیط پهنای باند، تنها یک بیت ریت از ویدیو می توانست به مشتری تحویل داده شود. این راه حل زمانی که سرعت شبکه بالا باشد خوب است، اما زمانی که سرعت شبکه سریع نباشد (یا نوسان داشته باشد) می تواند مشکل ساز باشد. و اگر یک چیز وجود دارد که همه ما می دانیم – نمی توانیم شبکه سرعتی را که مشتریانمان استفاده می کنند کنترل کنیم.

در یک اتصال شبکه کند، یک ویدیوی سنتی بسیار کند شروع می شود و به احتمال زیاد متوقف می شود. (Stalling اصطلاح پخش ویدیو برای توقف ویدیو و ظاهر شدن «اسپینر مرگ» است). ویدیوهای با نرخ بیت تطبیقی ​​دارای چندین نسخه از ویدیو هستند و می توانند با سرعت شبکه مشتری شما سازگار شوند. این تضمین می کند که پخش ویدیو به سرعت شروع می شود و احتمال توقف آن در حین پخش بسیار کمتر است – بدون توجه به سرعت اتصال اینترنت کاربر شما.

اگر سرعت شبکه به طور ناگهانی کاهش یابد، پخش کننده نیز می تواند (در وسط پخش) سازگار شود و شروع به پخش نسخه با نرخ بیت پایین تر از ویدیو کند. همه این ویژگی‌های پخش با نرخ بیت تطبیقی ​​منجر به تجربه ویدیویی بهتری برای مشتریان شما می‌شود. تقریباً شبیه جادو به نظر می رسد، اما بیایید به فناوری و نحوه عملکرد آن نگاه کنیم.

HLS: The Magic Behind Smooth Video Streaming

استاندارد صنعتی برای پخش ویدیو، HTTP Live Streaming (HLS) است. عبارت Live در نام کمی گمراه کننده است. در حالی که از HLS می توان برای پخش جریانی ویدیوی زنده استفاده کرد، HLS در درجه اول برای پخش ویدیوهای ضبط شده استفاده می شود و می توان آن را در بسیاری از سرویس های پخش برتر یافت.

بنابراین ویدیوی HLS چگونه کار می کند؟ اولین مرحله در آپلود ویدیو زمانی اتفاق می‌افتد که سرویس استریم تعدادی کپی از ویدیو را با نرخ بیت مختلف تولید کند. سپس، هر کپی از ویدیو به بخش‌های کوتاه تقسیم می‌شود – معمولاً حدود 5 تا 10 ثانیه.

در حین پخش، پخش کننده ویدیو، بارگیری و پخش ویدیو را انجام می دهد. اگر سرعت دانلود در مقایسه با سرعت پخش کاهش یابد – ممکن است ویدیو متوقف شود. بنابراین هنگامی که پخش کننده بخش بعدی 5-10 ثانیه ویدیو را درخواست می کند، نسخه با نرخ بیت پایین تر را درخواست می کند – زیرا نرخ بیت پایین تر سریعتر دانلود می شود و احتمال توقف ویدیو کاهش می یابد.

این جادوی پخش نرخ بیت تطبیقی ​​است – پخش کننده ویدیو را با سرعت شبکه هر بیننده منحصر به فرد محتوای شما سازگار می کند!

شما یک بازیکن را ذکر می کنید. آیا مرورگرها از HLS پشتیبانی نمی کنند؟

HLS به صورت بومی در بسیاری از مرورگرها پشتیبانی نمی شود (در سافاری از پشتیبانی بومی برخوردار است). برای پخش یک ویدیوی HLS، به یک پخش کننده جاوا اسکریپت به عنوان بخشی از سایت شما برای پخش ویدیو.

این پیچیده به نظر می رسد

با گذشت زمان و توسعه، این امکان وجود دارد که پلتفرم پخش ویدیوی خود را بسازید – با رمزگذاری مجدد ویدیو در HLS و ارائه یک پخش کننده سفارشی شده به مخاطبان، یک تجربه ویدیویی باورنکردنی را ارائه دهید. اما، ساخت یک پلتفرم رمزگذاری/جریان‌گذاری ویدئو زمان زیادی را برای توسعه‌دهنده می‌گیرد و تیم را از ساخت محصول شما دور می‌کند. به همین دلیل است که توصیه من استفاده از پلتفرم پخش ویدئو است.

چه چیزی یک راه حل خوب پردازش ویدیو را می سازد؟

برون سپاری مشکلات پیچیده به متخصصان یک ایده هوشمندانه است – شما کارشناسان حوزه را استخدام می کنید تا مسائل پیچیده را مدیریت کنند نه اینکه خودتان با آنها مقابله کنید. بنابراین، چه ویژگی هایی را باید در راه حل پخش ویدیو جستجو کنید؟

• به مزایای جریان بیت تطبیقی ​​HLS فکر کنید.
  اگر برای تحویل ویدیویی با کیفیت و قوی هزینه می‌کنید، می‌خواهید مطمئن شوید که بهترین راه‌حل پخش جریانی وجود دارد.
• پشتیبانی از تبدیل از تمام فرمت های اصلی فایل.
  Mp4 (h264 و 265)، MOV، WebM، و دیگران. ویدئوها در قالب های بی شماری ارائه می شوند. هیچ دلیلی برای تبدیل به فرمت جدید قبل از آپلود وجود ندارد.
• ابزار پخش ویدیوی شما باید با خط لوله رسانه موجود شما مطابقت داشته باشد.
  راه حل رسانه باید بتواند ویدیوهای شما را در فرآیند فعلی شما پیدا کند – وقتی ویدیوها به ابر اضافه می شوند، باید به طور خودکار در جریان پردازش شوند.
• یک پخش کننده ویدیوی خارج از جعبه.
  همانطور که بحث شد، جریان های HLS در همه مرورگرها پخش نمی شوند. آیا راه حل شما شامل یک پخش کننده قابل تنظیم است که بتوانید آن را به وب سایت فعلی خود وصل کنید؟
• اگر هم تصاویر و هم ویدیوها را ارائه می دهید، راه حلی می خواهید که شامل یک راه حل باشد داشبورد مدیریت دارایی که به شما امکان می دهد تصاویر و فیلم ها را تجسم و سازماندهی کنید
• آخرین اما نه کم اهمیت، تجزیه و تحلیل.
  چند بیننده ویدیوهای شما را تماشا کرده‌اند و مدت زمان هر بازدید چقدر بوده است؟ همچنین می‌خواهید تجزیه و تحلیل‌های پردازشی در مورد تعداد ویدیوهایی که به طور کامل کدگذاری شده‌اند را ببینید.

چه سرویسی همه این ویژگی ها را ارائه می دهد؟

imgix اخیرا منتشر شد یک Video API که تمام این الزامات را برآورده می کند. ویدیوهای شما به طور خودکار از هر پوشه ابری کدگذاری و پخش می شوند – و با پشتیبانی بومی از AWS S3، Google Cloud و Azure، imgix می تواند به طور یکپارچه در جریان کار فعلی شما قرار بگیرد.

imgix API نسخه‌های HLS یا MP4 ویدیوی شما را بر اساس نیاز شما ایجاد می‌کند و شما یک URL پخش سفارشی برای اضافه کردن به وب‌سایت خود خواهید داشت. شما می توانید تمام ویدیوهای خود را در آن ببینید مدیر دارایی آنهاو همچنین تجزیه و تحلیل دقیق پخش. شما همچنین دریافت می کنید پخش کننده ویدیوی خارج از جعبه که به راحتی در React، Vue، HTML ایستا، و سایر فریم ورک های فرانت اند محبوب کار می کند.

مهمتر از همه، اگر نیاز به ارائه تعداد زیادی تصویر و ویدیو دارید، راه حلی مانند imgix می تواند هر دو نوع دارایی را بدون نیاز به ساختن آن از پایه و یا ترکیب راه حل های مختلف بهینه سازی و پردازش کند. این واقعا یک پلت فرم یک مرحله ای برای پردازش رسانه های بصری است.

(vf, il)