آموزش HTML - ویدیو

 Video در HTML یک عنصر چندرسانه ای است که به توسعه دهندگان اجازه می دهد محتوای ویدیویی را در صفحات وب قرار دهند. HTML Video توسط اکثر مرورگرهای مدرن از جمله Chrome، Firefox، Safari و Edge پشتیبانی می‌شود و با استفاده از تگ <video> پیاده‌سازی می‌شود.

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

<video src="video.mp4" controls></video>

در این مثال، ویژگی «src» مکان فایل ویدیویی را مشخص می‌کند و ویژگی «controls» کنترل‌های پخش داخلی ویدیو را فعال می‌کند.

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

• "width" و "height": این ویژگی ها ابعاد پخش کننده ویدئو را در صفحه وب تعیین می کنند.
• "autoplay": این ویژگی ویدیو را قادر می سازد تا زمانی که صفحه وب بارگذاری می شود، به طور خودکار پخش شود.
• "loop": این ویژگی ویدیو را قادر می‌سازد تا به‌طور مداوم حلقه بزند و زمانی که به پایان رسید دوباره راه‌اندازی شود.
• "poster": این ویژگی تصویری را برای نمایش قبل از پخش ویدیو مشخص می کند.

در اینجا نمونه ای از تگ <video> است که از برخی از این ویژگی های اضافی استفاده می کند:

<video src="video.mp4" width="640" height="360" autoplay loop poster="poster.jpg">
</video>

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

ویدیوی html چگونه کار می کند

Video با استفاده از تگ <video> برای ایجاد یک بخش برای محتوای ویدیو و تعیین مکان فایل ویدیویی کار می کند. هنگامی که صفحه وب بارگیری می شود، مرورگر یک پخش کننده ویدیو ایجاد می کند و فایل ویدیویی را در آن بارگذاری می کند. سپس پخش کننده ویدیو محتوای ویدیویی را در صفحه وب نمایش می دهد و کنترل هایی را برای کاربر فراهم می کند تا ویدیو را پخش، مکث و تنظیم کند.

در اینجا مراحل اساسی مربوط به استفاده از Video در HTML آمده است:

1. ایجاد تگ <video>: برای افزودن محتوای ویدئویی به یک صفحه وب، توسعه دهندگان از تگ <video> استفاده می کنند که یک بخش برای محتوای ویدئو ایجاد می کند. در تگ <video>، توسعه دهندگان می توانند ویژگی های مختلفی را برای کنترل ظاهر و رفتار پخش کننده ویدیو مشخص کنند.
2. فایل منبع ویدئو را مشخص کنید: توسعه دهندگان از ویژگی "src" برای تعیین محل فایل ویدئویی استفاده می کنند. فایل ویدیویی را می توان روی همان سروری که صفحه وب یا روی یک سرور راه دور میزبانی می کند، میزبانی کرد.
3. افزودن کنترل‌های پخش: به‌طور پیش‌فرض، پخش‌کننده ویدیو شامل کنترل‌های پخش داخلی، مانند پخش، مکث و صدا است. توسعه دهندگان می توانند این کنترل ها را با استفاده از ویژگی "controls" فعال یا غیرفعال کنند.
4. سفارشی کردن پخش کننده ویدیو: توسعه دهندگان می توانند از ویژگی های اضافی برای سفارشی کردن ظاهر و رفتار پخش کننده ویدیو استفاده کنند. به عنوان مثال، آنها می توانند ابعاد پخش کننده ویدیو را با استفاده از ویژگی های "width" و "height" تنظیم کنند، پخش خودکار را با استفاده از ویژگی "autoplay" فعال کنند، یا با استفاده از ویژگی "loop" ویدیو را به صورت حلقه پخش کنند.
5. تعامل با ویدیو با استفاده از جاوا اسکریپت: توسعه دهندگان می توانند از جاوا اسکریپت برای تعامل با پخش کننده ویدیو و افزودن عملکرد سفارشی استفاده کنند. برای مثال، آنها می‌توانند کنترل‌های سفارشی ایجاد کنند، تعاملات کاربر با ویدیو را ردیابی کنند، یا زیرنویس یا زیرنویس اضافه کنند.

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

تگ <source>

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

عنصر <source> دو ویژگی اصلی دارد:

• "src": این ویژگی URL فایل منبع ویدیو را مشخص می کند. توسعه‌دهندگان می‌توانند چندین عنصر <source> را شامل کنند که هرکدام دارای فایل منبع ویدیویی و فرمت متفاوتی هستند.
• "type": این ویژگی نوع MIME فایل منبع ویدئو را مشخص می کند. نوع MIME یک روش استاندارد برای شناسایی نوع فایل است، مانند "video/mp4" برای فایل ویدئویی MP4 یا "video/webm" برای فایل ویدئویی WebM.

در اینجا مثالی از استفاده از عناصر <source> در عنصر <video> آورده شده است:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

در این مثال، عنصر <video> شامل دو عنصر <source> است، یکی برای یک فایل ویدئویی MP4 و دیگری برای یک فایل ویدئویی WebM. هنگامی که مرورگر ویدیو را بارگیری می کند، مناسب ترین منبع ویدیو را بر اساس دستگاه کاربر و سازگاری مرورگر انتخاب می کند.

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

فرمت های ویدئویی HTML

HTML Video از چندین فرمت ویدئو پشتیبانی می کند، از جمله:

• MP4 (MPEG-4 Part 14): این فرمت ویدیویی که به طور گسترده در ویدیوی HTML پشتیبانی می شود، می بشاد. MP4 یک فرمت ویدئویی فشرده است که کیفیت خوبی را در اندازه فایل نسبتا کوچک ارائه می دهد. ویدئوهای MP4 با اکثر مرورگرهای مدرن از جمله کروم، فایرفاکس، سافاری و اج سازگار هستند.
• WebM: WebM یک فرمت ویدئویی منبع باز است که توسط گوگل توسعه یافته است. از کدک ویدیویی VP8 یا VP9 و کدک صوتی Vorbis یا Opus استفاده می کند. WebM طوری طراحی شده است که جایگزینی با کیفیت بالا و بدون حق امتیاز برای کدک H.264 مورد استفاده در ویدیوهای MP4 باشد. ویدئوهای WebM با اکثر مرورگرهای مدرن از جمله کروم، فایرفاکس و اپرا سازگار هستند.
• Ogg: Ogg یک فرمت ویدئویی رایگان و منبع باز است که توسط بنیاد Xiph.org توسعه یافته است. از کدک ویدیویی Theora و کدک صوتی Vorbis استفاده می کند. ویدیوهای Ogg با اکثر مرورگرهای مدرن از جمله فایرفاکس و اپرا سازگار هستند.

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