فراتر از تصاویر با ویدیوهای اولیه برای وب

ویدیوی اولیه را یاد بگیرید. تعامل را افزایش دهید.

Doug Sillars

آیا به افزودن ویدیو به وب سایت خود فکر می کنید؟ از آنجایی که دستگاه‌ها و اتصالات شبکه سریع‌تر و قدرتمندتر شده‌اند، می‌توانید فراتر از تصاویر حرکت کنید و ویدیو را به مجموعه ابزارهای خود برای ساخت وب اضافه کنید. تحقیقات نشان می‌دهد که وب‌سایت‌های دارای ویدیو منجر به تعامل و فروش بالاتر می‌شوند. بنابراین حتی اگر هنوز ویدیو را به سایت‌های خود اضافه نکرده‌اید، احتمالاً تا زمانی که این کار را انجام دهید، زمان زیادی است.

به احتمال زیاد، فایل های ویدئویی که به سایت خود اضافه می کنید، بزرگترین فایل هایی هستند که دانلود می شوند. به همین دلیل، بسیار مهم است که مطمئن شوید فایل ها برای پخش سریع و ثابت برای همه مشتریان شما ساخته شده اند. حتی اگر ویدیو می‌تواند تعامل و رضایت مشتری را افزایش دهد، ویدیویی که پخش نمی‌شود یا در حین پخش متوقف می‌شود، می‌تواند منجر به ناامیدی مشتری شود. این پست بر استفاده از تگ <video> HTML5 برای ارائه ویدیو تمرکز دارد و بنابراین پخش ویدیو را پوشش نخواهد داد.

پس بیایید شروع کنیم!

تگ <video>

به نظر واضح است، درست است؟ برای افزودن ویدیو، باید تگ <video> را اضافه کنید، به یک منبع اشاره کنید و سپس به مسابقه بروید!

<video src="myVideo.mp4">

و، حق با شماست. در بالاترین سطح، این تنها چیزی است که برای افزودن یک ویدیو به وب نیاز دارید. اما ویژگی‌های زیادی وجود دارد که می‌توانید برای بهبود طرح‌بندی و ارائه ویدیو به تگ ویدیو اضافه کنید.

تگ <source>

شاید بهترین راه برای بهبود ارائه ویدئو در وب، بهینه سازی فایل هایی باشد که به مرورگر تحویل داده می شوند. روش انجام این کار استفاده از تگ <source> است:

<video>
  <source src="myWebmVideo.webm" type="video/webm">
  <source src="myh265Video.mp4" type="video/mp4">
  <source src="myh264Video.mp4" type="video/mp4">
</video>

این به سه فایل منبع جداگانه ارجاع می دهد. مرورگر از بالا شروع می شود و اولین فرمت و کدک مورد استفاده را انتخاب می کند. در دنیای ویدیو، فرمت فایل که معمولاً کانتینر نامیده می‌شود، می‌تواند با کدک‌های مختلفی ذخیره شود که هر کدام ویژگی‌های متفاوتی دارند. ( اطلاعات بیشتر در این مورد اینجاست .) در مثال بالا، اولین انتخاب قالب WebM است ( که می تواند با کدک های VP8 یا VP9 رمزگذاری شود )، و (در زمان نگارش مقاله) توسط 78٪ از کاربران جهانی پشتیبانی می شود. انتخاب دوم کدک H.265 mp4 است که در iOS و مک های جدیدتر پشتیبانی می شود. این کدک‌ها جدیدتر هستند و فشرده‌سازی داده‌ها را بهبود می‌بخشند، در حالی که ویدیوهای با کیفیتی مشابه فرمت‌های ویدیویی قدیمی ارائه می‌دهند.

انتخاب نهایی در لیست ما H.264 mp4 است که 92 درصد از کاربران جهانی از آن پشتیبانی می‌کنند، اما قالب قدیمی‌تری است و به این ترتیب، عموماً بسیار بزرگ‌تر از ویدیوهای WebM یا H.265 است. در یک مثال، می توانید تفاوت را برای یک فیلم دو دقیقه ای ببینید:

ارائه فایل های کوچکتر بهترین بهینه سازی عملکردی است که می توانید برای ارائه بهتر ویدیوهای خود انجام دهید. وقتی ویدیوی کوچک‌تری دانلود می‌شود، پخش ویدیو زودتر انجام می‌شود و بافر ویدیو سریع‌تر پر می‌شود. این منجر به توقف کمتر در حین پخش ویدیو می شود. علاوه بر این، بار سرور کاهش می یابد، که نیازهای ذخیره سازی چند فایل ویدئویی را جبران می کند.

ویژگی preload

تا زمانی که مقداری ویدیو به صورت محلی دانلود و ذخیره نشده باشد، ویدیوها نمی توانند شروع به پخش کنند. با استفاده از ویژگی preload، می توانید میزان بارگیری ویدیو در بارگذاری صفحه را کنترل کنید. سه مقدار برای ویژگی preload وجود دارد: auto ، metadata و none .

پیش بارگذاری = 'خودکار'

اگر از 'auto' استفاده شود، کل ویدیو دانلود خواهد شد، مهم نیست که کاربر پخش را فشار دهد یا نه. این امکان پخش سریع ویدیو را فراهم می کند زیرا ویدیو قبل از اینکه کاربر پخش را فشار دهد به صورت محلی دانلود می شود. از نظر مصرف داده (و دیدگاه بارگذاری سرور) این تنها زمانی باید استفاده شود که احتمال تماشای ویدیو وجود داشته باشد. در غیر این صورت تمام داده های دانلود کامل ویدیو هدر می رود.

preload='metadata'

این تنظیم پیش‌فرض برای بارگذاری اولیه در کروم و سافاری است. وقتی 'metadata' استفاده می‌شود، 3 درصد اول ویدیو دانلود می‌شود. اگرچه این اخطارهایی را با 'auto' به اشتراک می‌گذارد، دانلود فقط 3 درصد از ویدیو هزینه مصرف سرور/داده بسیار کمتری نسبت به کل ویدیو دارد، در حالی که هنوز مطمئن می‌شود که بخشی از ویدیو به صورت محلی برای راه‌اندازی سریع ویدیو ذخیره می‌شود.

پیش بارگذاری = "هیچ"

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

پوستر

ممکن است بخواهید یک تصویر پوستری داشته باشید که قبل از شروع پخش ویدیو در پنجره ویدیو نمایش داده شود:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

با افزودن عکس به جای جعبه سیاه در صفحه، وب سایت خود را جذاب تر و تعاملی تر می کنید. با این حال، استفاده از ویژگی poster ، دانلود تصویر را قبل از شروع دانلود ویدیو اضافه می کند. به همین دلیل، ممکن است از اضافه کردن پوستر برای ویدیوهایی که به صورت خودکار پخش می شوند خودداری کنید (زیرا دانلود اضافی بارگیری ویدیو را به تاخیر می اندازد).

کنترل های پخش

افزودن یک ویژگی controls ، کنترل‌های پخش را اضافه می‌کند. بدون این موارد، مشتریان شما نمی توانند ویدیوی شما را شروع یا متوقف کنند. شما باید این را برای ویدیوها اضافه کنید تا کاربران بتوانند متوقف و مکث کنند، صدا را تغییر دهند و غیره. برای ویدیوهای پس‌زمینه یا حلقه‌ای، ممکن است بخواهید این ویژگی را حذف کنید.

خاموش

ویژگی muted باعث می شود که پخش در حالت خاموش شروع شود. اگر هیچ کنترلی ارائه نشود، برای کل پخش خاموش می ماند. اگر در نظر گرفته شده است، ممکن است منطقی باشد که آهنگ صوتی را از ویدیو حذف کنید. این امر باعث کاهش حجم فایل ویدئویی در حال تحویل به مشتری می شود.

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

حلقه

برای ارائه ویدیویی که محتوا را حلقه می کند (مانند یک GIF متحرک)، ویژگی loop را اضافه کنید. از آنجایی که فایل های ویدیویی معمولاً بسیار کوچکتر از GIF های متحرک هستند، این مکانیسم به شما امکان می دهد فایل های GIF خود را با فایل های ویدیویی جایگزین کنید .

پخش خودکار ویدیو

اگر می‌خواهید ویدیوتان فوراً پخش شود (مثلاً به‌عنوان ویدیوی پس‌زمینه یا ویدیویی که مانند یک GIF متحرک حلقه می‌شود)، می‌توانید ویژگی autoplay را اضافه کنید:

<video src="myVideo.mp4" playsinline autoplay>

گفتنی است، برای اینکه یک ویدیو به صورت خودکار در مرورگرهای تلفن همراه پخش شود، ویژگی muted نیز باید اضافه شود:

<video src="myVideo.mp4" playsinline autoplay muted>

نتیجه گیری

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