فایل ویدیویی را به‌درستی برای وب آماده کرده‌اید. ابعاد و وضوح صحیح را به آن داده‌اید. حتی فایل‌های WebM و MP4 جداگانه‌ای برای مرورگرهای مختلف ایجاد کرده‌اید.
برای اینکه هرکسی بتواند ویدیو شما را ببیند، همچنان باید آن را به صفحه وب اضافه کنید. برای انجام درست این کار، باید دو عنصر اچ‌تی‌ام‌ال اضافه شود: عنصر <video> و عنصر <source>. علاوه‌بر اصول اولیه درباره این برچسب‌ها، این مقاله مشخصه‌هایی را توضیح می‌دهد که باید به این برچسب‌ها اضافه کنید تا تجربه کاربری خوبی ایجاد کنید.
یک فایل را مشخص کنید
اگرچه توصیه نمی‌شود، می‌توانید از عنصر ویدیو به‌تنهایی استفاده کنید. همیشه
از مشخصه 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>
همیشه باید مشخصه type را به برچسب‌های <source> اضافه کنید، هرچند این کار اختیاری است. این کار تضمین می‌کند که مرورگر فقط فایلی را بارگیری می‌کند که
قادر به پخش آن است.
این رویکرد نسبت‌به ارائه 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–بدون نیاز به کدگذاری و ارائه چندین فایل.
برای اینکه این ویژگی کار کند، سرورتان باید از درخواست‌های محدوده پشتیبانی کند و این قابلیت باید فعال باشد. اکثر سرورها درخواست‌های محدوده را به‌طور پیش‌فرض فعال می‌کنند. چون برخی‌از سرویس‌های میزبانی آن‌ها را خاموش می‌کنند، باید تأیید کنید که درخواست‌های محدوده برای استفاده از قطعه‌ها در سایتتان دردسترس است.
خوشبختانه می‌توانید این کار را در ابزارهای توسعه‌دهنده مرورگرتان انجام دهید. برای مثال، در Chrome، این گزینه در پانل شبکه قرار دارد. به‌دنبال سرصفحه Accept-Ranges بگردید و
بررسی کنید که bytes را نشان دهد. در تصویر، کادر قرمزی دور این سرصفحه کشیده‌ام. اگر bytes را به‌عنوان مقدار نمی‌بینید، باید با
ارائه‌دهنده خدمات میزبانی وب خود تماس بگیرید.
تصویر پوستر اضافه کنید
یک مشخصه پوستر به عنصر video اضافه کنید تا بینندگان به‌محض بار شدن عنصر، بدون نیاز به بارگیری ویدیو یا شروع بازپخش، ایده‌ای از محتوا داشته باشند.
<video poster="poster.jpg" ...>
…
</video>
اگر ویدیو src خراب باشد یا هیچ‌کدام از قالب‌های ویدیو ارائه‌شده پشتیبانی نشود، پوستر می‌تواند به‌عنوان جایگزین استفاده شود. تنها جنبه منفی تصویر پوستر، درخواست فایل اضافی است که مقداری پهنای باند مصرف می‌کند و نیاز به رندر کردن دارد.
برای اطلاعات بیشتر، کدبندی کارآمد تصاویر را ببینید.
مطمئن شوید ویدیوها از ظرف‌ها سرریز نمی‌کنند
وقتی عناصر ویدیو برای نمای هدف خیلی بزرگ باشند، ممکن است از ظرفشان سرریز کنند و کاربر نتواند محتوا را ببیند یا از کنترل‌ها استفاده کند.
می‌توانید ابعاد ویدیو را بااستفاده از CSS کنترل کنید. اگر CSS همه نیازهای شما را برآورده نمی‌کند، کتابخانه‌ها و افزایه‌های جاوا اسکریپت مانند FitVids می‌توانند کمک کنند، حتی برای ویدیوهای YouTube و منابع دیگر. متأسفانه این منابع می‌توانند اندازه بار خالص شبکه شما را افزایش دهند و پیامدهای منفی برای درآمد شما و کیف پول کاربرانتان داشته باشند.
برای کاربردهای ساده مانند مواردی که در اینجا شرح می‌دهم، از پرس‌وجوهای رسانه‌ای CSS برای
مشخص کردن اندازه عناصر بسته به ابعاد نمای دید استفاده کنید؛ max-width:
100% دوست شما است.
برای محتوای رسانه‌ای در iframe (مانند ویدیوهای YouTube)، رویکرد واکنش‌گرا را امتحان کنید (مانند رویکردی که توسط جان سورداکوفسکی پیشنهاد شده است).
CSS
.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%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
نمونه پاسخگو را با نسخه غیرپاسخگو مقایسه کنید. همان‌طور که می‌بینید، نسخه غیرواکنش‌گرا تجربه کاربری خوبی نیست.
جهت دستگاه
جهت دستگاه برای نمایشگرهای رایانه یا رایانه‌های کیفی مسئله‌ای نیست، اما هنگام درنظر گرفتن طراحی صفحه وب برای دستگاه‌های همراه و رایانه‌های لوحی بسیار مهم است.
Safari در iPhone به‌خوبی بین جهت عمودی و افقی جابه‌جا می‌شود:
جهت دستگاه در iPad و Chrome در Android می‌تواند مشکل‌ساز باشد. برای مثال، بدون هیچ سفارشی‌سازی، ویدیویی که در iPad در جهت افقی پخش می‌شود به این شکل است:
تنظیم ویدیو width: 100% یا max-width: 100% با CSS می‌تواند
بسیاری از مشکلات چیدمان جهت دستگاه را حل کند.
پخش خودکار
مشخصه autoplay کنترل می‌کند که آیا مرورگر ویدیو را فوراً بارگیری و پخش کند یا نه. نحوه دقیق عملکرد آن به پلاتفرم و مرورگر بستگی دارد.
Chrome: به عوامل متعددی بستگی دارد، ازجمله اینکه آیا مشاهده در رایانه انجام می‌شود و اینکه آیا کاربر تلفن همراه سایت یا برنامه شما را به صفحه اصلی خود اضافه کرده است یا نه. برای جزئیات، به روال‌های مطلوب پخش خودکار مراجعه کنید.
Firefox: همه ویدیوها و صداها را مسدود می‌کند، اما به کاربران امکان می‌دهد این محدودیت‌ها را برای همه سایت‌ها یا سایت‌های خاصی کاهش دهند. برای جزئیات، به مجاز یا مسدود کردن پخش خودکار رسانه در Firefox مراجعه کنید
Safari: از گذشته به اشاره کاربر نیاز داشته است، اما در نسخه‌های اخیر این الزام را کاهش داده است. برای جزئیات، خط‌مشی‌های جدید <video> برای iOS را ببینید.
حتی در پلاتفرم‌هایی که پخش خودکار امکان‌پذیر است، باید درنظر بگیرید که آیا فعال کردن آن ایده خوبی است یا نه:
- مصرف داده می‌تواند گران باشد.
- پخش رسانه قبل‌از اینکه کاربر بخواهد می‌تواند پهنای باند و CPU را اشغال کند و درنتیجه پرداز صفحه را به‌تأخیر بیندازد.
- کاربران ممکن است در شرایطی باشند که پخش ویدیو یا صدا برایشان مزاحمت ایجاد کند.
پیش‌بارگیری
مشخصه preload به مرورگر راهنمایی می‌کند که چه مقدار اطلاعات یا محتوا را پیش‌بارگیری کند.
| مقدار | شرح |
|---|---|
none |
ممکن است کاربر تصمیم بگیرد ویدیو را تماشا نکند، بنابراین هیچ چیزی را پیش‌بار نکنید. |
metadata |
فراداده (مدت، ابعاد، قطعه‌های نوشتاری) باید پیش‌بارگیری شود، اما با حداقل ویدیو. |
auto |
بارگیری فوری کل ویدیو مطلوب درنظر گرفته می‌شود. رشته خالی همان نتیجه را تولید می‌کند. |
مشخصه preload در پلاتفرم‌های مختلف تأثیرات متفاوتی دارد.
برای مثال، Chrome در رایانه ۲۵ ثانیه از ویدیو را میان‌گیری می‌کند اما در iOS یا Android این کار را نمی‌کند. این یعنی در تلفن همراه ممکن است تأخیرهایی در شروع بازپخش وجود داشته باشد
که در رایانه وجود ندارد. برای جزئیات بیشتر، به بازپخش سریع با پیش‌بارگیری صدا و ویدیو یا
وبلاگ استیو سودرز مراجعه کنید.
اکنون که می‌دانید چگونه رسانه را به صفحه وب خود اضافه کنید، وقت آن است که درباره دسترس‌پذیری رسانه بیاموزید که در آن زیرنویس‌ها را به ویدیو خود برای افراد کم‌شنوا اضافه می‌کنید، یا زمانی که پخش صدا گزینه مناسبی نیست.