ویدیو در HTML
نمای کلی Media چند خانواده را نشان داد. این جلسه روی یکی تمرکز میکند: عنصر video برای کلیپ و دمویی که خودتان میزبانی میکنید. بهجای غافلگیر کردن با صدای خودکار، با controls به بازدیدکننده UI پخش و مکث بدهید.
video چه میکند؟
video به مرورگر میگوید فایل فیلم را بگیرد و در صفحه بکشد. میتوانید با src به یک فایل اشاره کنید، یا چند فرزند <source> فهرست کنید تا مرورگر فرمت پشتیبانیشده را برگزیند. ویژگیهای اختیاری اندازه رزرو میکنند (width / height)، قبل از پخش فریم ثابت نشان میدهند (poster)، و کنترل بومی را نمایان میکنند.
پاسخ مستقیم
از <video controls src="movie.mp4"> استفاده کنید یا برای چند فرمت فرزندان <source> تودرتو کنید. برای فریم پیشنمایش قبل از پخش یک تصویر poster بگذارید. متن کوتاه پشتیبان (و اختیاری پیوند دانلود) داخل video برای عاملهایی که رسانه را پخش نمیکنند بگنجانید. فایل فشرده و معقول را ترجیح دهید.
ویدیوی ساده با controls
یک MP4 تنها بهعلاوهٔ controls و یک width برای بسیاری صفحات آموزشی کافی است.
ویدیوی ساده با controls
html<video controls width="480" src="media/demo.mp4">
Sorry, your browser does not support this video.
</video>خواندن نمونهٔ ساده
controlsاز مرورگر UI پخش/مکث میخواهدwidth="480"کمک میکند هنگام بار فایل فضا رزرو شودsrcبه فایل فیلم در پوشهٔmediaاشاره میکند- متن داخل
videoمحتوای پشتیبان است وقتی عنصر پشتیبانی نشود
چند منبع و poster
مرورگرها در راحتی فرمت فرق دارند. فهرست WebM و MP4 با اشارهٔ type، بهعلاوهٔ تصویر ثابت poster، الگوی عملی رایجی است.
چند منبع و poster
html<video controls width="480" poster="media/demo-poster.jpg">
<source src="media/demo.webm" type="video/webm">
<source src="media/demo.mp4" type="video/mp4">
Download the <a href="media/demo.mp4">MP4</a> instead.
</video>خواندن نمونهٔ چندمنبعی
posterتا شروع پخش تصویر پیشنمایش نشان میدهد- هر
sourceیک فایل و یکtypeاز نوع MIME نام میبرد - مرورگر اولین منبعی را که بتواند پخش کند برمیگزیند
- پیوند دانلود داخل وقتی پخش در دسترس نیست کمک میکند
حجم فایل و فرمتها
خروجی خام دوربین روی شبکهٔ کند گیر میکند. MP4 با اندازهٔ وب (و اختیاری WebM) صادر کنید که با نیاز آموزش جور باشد — دموی کوتاه روی صفحهٔ درس از master چندگیگابایتی بهتر است. روز اول به هر کانتینر نیاز ندارید؛ یک MP4 واضح راه بیندازید، بعد اگر مخاطب لازم داشت فرمت دوم را اضافه کنید.
Autoplay: اول controls را یاد بگیرید
پخش خودکار با صدا اغلب مسدود و معمولاً بیادبانه است. ترفند muted autoplay برای قهرمان بازاریابی وجود دارد، اما مبتدی باید اول controls و پخش شروعشده توسط کاربر را مسلط شود. وقتی بعداً به autoplay نیاز داشتید، سیاست مرورگر را با دقت بخوانید و مسیر مکث دسترسپذیر نگه دارید.
زیرنویس و دسترسپذیری (عادت)
اگر محتوای گفتاری چیز مهمی یاد میدهد، زیرنویس یا رونوشت برنامهریزی کنید — حتی اگر اتصال کامل track را در گذر بعدی ببندید. به تنهایی روی تصویر poster بهعنوان خلاصهٔ دسترسپذیر درس talking-head تکیه نکنید.
width، height و چیدمان
تنظیم width (و height همخوان وقتی نسبت تصویر را میدانید) پرش چیدمان هنگام بار metadata ویدیو را کم میکند. کشیدن با اعداد ناسازگار بد به نظر میرسد؛ مثل تصاویر نسبت واقعی را در ذهن نگه دارید.
تمرین در ویرایشگر
- یک
.mp4کوتاه در پوشهٔmediaبگذارید. - با
video+controls+ width معقول جاسازی کنید. - متن پشتیبان داخل عنصر اضافه کنید.
- اختیاری: تصویر
posterو فرمتsourceدوم بگذارید. - صفحه را باز کنید، پخش و مکث کنید، بعد اگر میتوانید با شبکهٔ محدود تست کنید — ببینید چرا حجم فایل مهم است.
اشتباهات رایج
- نبود
controlsتا کاربر بهراحتی پخش نکند - فرستادن فایلهای فشردهنشدهٔ خیلی بزرگ که روی شبکهٔ کند گیر میکنند
- فراموش متن پشتیبان یا پیوند دانلود
- رفتن سراغ autoplay با صدا قبل از فهم پایهها
- گذاشتن
altرویvideoمثلimg(بهجایش از زیرنویس/رونوشت و توصیف قابلدید استفاده کنید) - قاطی کردن embed یوتیوب (
iframe) با فایلvideoخودمیزبان
خلاصه
videoفایل فیلمی که میزبانی میکنید را جاسازی میکند- برای UI پخش از
controlsاستفاده کنید - چند تگ
sourceپشتیبانی فرمت را بهتر میکند posterقبل از پخش فریم پیشنمایش نشان میدهد- فایل فشرده را ترجیح دهید و از صدای autoplay غافلگیرکننده پرهیز کنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود