<ویدئو> و <منبع> برچسب ها

Derek Herman

Joe Medley

Sam Dutton

شما به درستی یک فایل ویدیویی را برای وب آماده کرده‌اید . ابعاد و وضوح تصویر صحیح را به آن داده‌اید. حتی فایل‌های WebM و MP4 جداگانه‌ای برای مرورگرهای مختلف ایجاد کرده‌اید.

برای اینکه کسی ویدیوی شما را ببیند، هنوز باید آن را به یک صفحه وب اضافه کنید. انجام صحیح این کار مستلزم اضافه کردن دو عنصر HTML است: عنصر <video> و عنصر <source> . علاوه بر اصول اولیه در مورد این تگ‌ها، این مقاله ویژگی‌هایی را که باید به آن تگ‌ها اضافه کنید تا یک تجربه کاربری خوب ایجاد کنید، توضیح می‌دهد.

یک فایل واحد را مشخص کنید

اگرچه توصیه نمی‌شود، اما می‌توانید از عنصر video به تنهایی استفاده کنید. همیشه از ویژگی type همانطور که در زیر نشان داده شده است استفاده کنید. مرورگر از این برای تعیین اینکه آیا می‌تواند فایل ویدیویی ارائه شده را پخش کند یا خیر استفاده می‌کند. اگر نتواند، متن پیوست شده نمایش داده می‌شود.

<video src="chrome.webm" type="video/webm">
    <p>Your browser cannot play the provided video file.</p>
</video>

مشخص کردن چندین فرمت فایل

از اصول اولیه فایل‌های رسانه‌ای به یاد بیاورید که همه مرورگرها از فرمت‌های ویدیویی یکسانی پشتیبانی نمی‌کنند. عنصر <source> به شما امکان می‌دهد چندین فرمت را به عنوان جایگزین مشخص کنید در صورتی که مرورگر کاربر از یکی از آنها پشتیبانی نمی‌کند.

مثال زیر ویدیوی جاسازی‌شده‌ای را تولید می‌کند که بعداً در این مقاله به عنوان نمونه استفاده خواهد شد.

<video controls>
  <source src="chrome.webm" type="video/webm">
  <source src="chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

آن را در Glitch امتحان کنید

شما همیشه باید یک ویژگی type به رویداد <source> tags اضافه کنید، هرچند که اختیاری است. این کار تضمین می‌کند که مرورگر فقط فایلی را دانلود می‌کند که قادر به پخش آن است.

این رویکرد مزایای متعددی نسبت به ارائه HTML های مختلف یا اسکریپت نویسی سمت سرور، به خصوص در موبایل، دارد:

• می‌توانید فرمت‌ها را به ترتیب اولویت فهرست کنید.
• سوئیچینگ سمت کلاینت، تأخیر را کاهش می‌دهد؛ فقط یک درخواست برای دریافت محتوا ارسال می‌شود.
• اینکه به مرورگر اجازه دهید فرمتی را انتخاب کند، ساده‌تر، سریع‌تر و به‌طور بالقوه قابل اعتمادتر از استفاده از یک پایگاه داده پشتیبانی سمت سرور با تشخیص عامل کاربر است.
• مشخص کردن نوع منبع هر فایل، عملکرد شبکه را بهبود می‌بخشد؛ مرورگر می‌تواند بدون نیاز به دانلود بخشی از ویدیو برای «استخراج» فرمت، منبع ویدیو را انتخاب کند.

این مسائل به ویژه در زمینه‌های موبایل اهمیت دارند، جایی که پهنای باند و تأخیر بسیار مهم هستند و احتمالاً صبر کاربر محدود است. حذف ویژگی type می‌تواند در صورت وجود چندین منبع با انواع پشتیبانی نشده، بر عملکرد تأثیر بگذارد.

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

زمان شروع و پایان را مشخص کنید

پهنای باند را ذخیره کنید و سایت خود را واکنش‌گراتر کنید: از قطعات رسانه‌ای برای اضافه کردن زمان شروع و پایان به عنصر ویدیو استفاده کنید.

برای استفاده از یک قطعه رسانه، #t=[start_time][,end_time] را به آدرس اینترنتی رسانه اضافه کنید. برای مثال، برای پخش ویدیو از ثانیه ۵ تا ۱۰، مشخص کنید:

<source src="chrome.webm#t=5,10" type="video/webm">

همچنین می‌توانید زمان‌ها را در <hours>:<minutes>:<seconds> مشخص کنید. برای مثال، #t=00:01:05 ویدیو را از یک دقیقه و پنج ثانیه شروع می‌کند. برای پخش فقط یک دقیقه اول ویدیو، #t=,00:01:00 را مشخص کنید.

شما می‌توانید از این ویژگی برای ارائه چندین نمایش در یک ویدیو - مانند نقاط راهنما در یک DVD - بدون نیاز به رمزگذاری و ارائه چندین فایل استفاده کنید.

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

خوشبختانه، می‌توانید این کار را در ابزارهای توسعه‌دهنده مرورگر خود انجام دهید. به عنوان مثال، در کروم، در پنل شبکه قرار دارد. به دنبال سربرگ Accept-Ranges بگردید و تأیید کنید که bytes در آن نوشته شده است. در تصویر، من یک کادر قرمز دور این سربرگ کشیده‌ام. اگر مقدار bytes را نمی‌بینید، باید با ارائه‌دهنده خدمات میزبانی خود تماس بگیرید.

تصویر پوستر را هم قرار دهید

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

<video poster="poster.jpg" ...>
  …
</video>

اگر src ویدیو خراب باشد یا هیچ یک از فرمت‌های ویدیویی ارائه شده پشتیبانی نشوند، یک پوستر می‌تواند جایگزین مناسبی باشد. تنها نکته منفی تصاویر پوستر، درخواست فایل اضافی است که مقداری از پهنای باند را مصرف می‌کند و نیاز به رندر دارد. برای اطلاعات بیشتر به Efficiently encoding images مراجعه کنید.

نکن

بدون پوستر جایگزین، ویدیو خراب به نظر می‌رسد.

انجام دهید

یک پوستر جایگزین باعث می‌شود طوری به نظر برسد که انگار فریم اول ثبت شده است.

مطمئن شوید که ویدیوها از کانتینرها سرریز نمی‌شوند

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

شما می‌توانید ابعاد ویدیو را با استفاده از CSS کنترل کنید. اگر CSS تمام نیازهای شما را برآورده نمی‌کند، کتابخانه‌های جاوا اسکریپت و افزونه‌هایی مانند FitVids می‌توانند کمک کنند، حتی برای ویدیوهای یوتیوب و سایر منابع. متأسفانه، این منابع می‌توانند حجم بار شبکه شما را افزایش دهند که پیامدهای منفی برای درآمد و کیف پول کاربران شما دارد.

برای کاربردهای ساده‌ای مانند مواردی که اینجا توضیح می‌دهم، از کوئری‌های رسانه‌ای CSS برای تعیین اندازه عناصر بسته به ابعاد نمایشگر استفاده کنید؛ max-width: 100% دوست شماست.

برای محتوای رسانه‌ای در آی‌فریم‌ها (مانند ویدیوهای یوتیوب)، یک رویکرد واکنش‌گرا (مانند رویکردی که جان سورداکوفسکی پیشنهاد داده است ) را امتحان کنید.

سی‌اس‌اس

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

اچ‌تی‌ام‌ال

<div class="video-container">
  <iframe
    src="//www.youtube.com/embed/l-BA9Ee2XuM"
    frameborder="0"
    width="560"
    height="315"
  ></iframe>
</div>

امتحانش کن

نمونه واکنش‌گرا را با نسخه غیر واکنش‌گرا مقایسه کنید. همانطور که می‌بینید، نسخه غیر واکنش‌گرا تجربه کاربری خوبی ندارد.

جهت گیری دستگاه

جهت دستگاه برای مانیتورهای رومیزی یا لپ‌تاپ‌ها مسئله‌ای نیست، اما هنگام بررسی طراحی صفحه وب برای دستگاه‌های تلفن همراه و تبلت‌ها بسیار مهم است.

سافاری در آیفون در تغییر جهت بین حالت عمودی و افقی عملکرد خوبی دارد:

جهت‌گیری دستگاه در آیپد و کروم در اندروید می‌تواند مشکل‌ساز باشد. برای مثال، بدون هیچ سفارشی‌سازی، ویدیویی که در آیپد در جهت افقی پخش می‌شود، به این شکل است:

تنظیم width: 100% یا max-width: 100% با CSS می‌تواند بسیاری از مشکلات طرح‌بندی جهت دستگاه را حل کند.

پخش خودکار

ویژگی autoplay کنترل می‌کند که آیا مرورگر بلافاصله یک ویدیو را دانلود و پخش کند یا خیر. نحوه دقیق عملکرد آن به پلتفرم و مرورگر بستگی دارد.

• کروم: به عوامل متعددی بستگی دارد، از جمله اینکه آیا مشاهده روی دسکتاپ است یا خیر و اینکه آیا کاربر تلفن همراه سایت یا برنامه شما را به صفحه اصلی خود اضافه کرده است یا خیر. برای جزئیات بیشتر، به بهترین شیوه‌های پخش خودکار مراجعه کنید.

• فایرفاکس: تمام ویدیوها و صداها را مسدود می‌کند، اما به کاربران این امکان را می‌دهد که این محدودیت‌ها را برای همه سایت‌ها یا سایت‌های خاص کاهش دهند. برای جزئیات بیشتر، به بخش «مجاز یا مسدود کردن پخش خودکار رسانه در فایرفاکس» مراجعه کنید.

• سافاری: از گذشته به یک حرکت کاربر نیاز داشته است، اما در نسخه‌های اخیر این الزام را کاهش داده است. برای جزئیات بیشتر، به سیاست‌های جدید <video> برای iOS مراجعه کنید.

حتی در پلتفرم‌هایی که پخش خودکار امکان‌پذیر است، باید در نظر بگیرید که آیا فعال کردن آن ایده خوبی است یا خیر:

• استفاده از داده می‌تواند پرهزینه باشد.
• پخش رسانه قبل از زمانی که کاربر بخواهد می‌تواند پهنای باند و CPU را اشغال کند و در نتیجه رندر صفحه را به تأخیر بیندازد.
• ممکن است کاربران در شرایطی باشند که پخش ویدیو یا صدا مزاحم آنها باشد.

پیش بارگذاری

ویژگی preload به مرورگر نشان می‌دهد که چه مقدار اطلاعات یا محتوا را باید از قبل بارگذاری کند.

ویژگی preload در پلتفرم‌های مختلف، اثرات متفاوتی دارد. برای مثال، کروم در دسکتاپ ۲۵ ثانیه از ویدیو را بافر می‌کند، اما در iOS یا اندروید هیچ تأخیری ندارد. این بدان معناست که در موبایل، ممکن است تأخیرهایی در شروع پخش وجود داشته باشد که در دسکتاپ اتفاق نمی‌افتد. برای جزئیات بیشتر به پخش سریع با پیش‌بارگذاری صدا و تصویر یا وبلاگ استیو سودرز مراجعه کنید.

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