پیش از HTML 5 ویدیوها را فقط می توانستیم در مرورگرهایی که دارای پلاگین باشند پخش کنیم. المان در اچ تی ام ال 5 راهی استاندارد را برای درونسازی یک ویدیو در یک صفحه ی وب مشخص سازی می کند.

پشتیبانی مرورگر

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

المان video در html

برای نمایش ویدیو در HTML از المان video استفاده کنید: 

مثال:

روش کارکرد

خصیصه یcontrols  کنترل های ویدیو مثل Play، Pause و Volume را اضافه می کند.

بهتر است همیشه از خصیصه هایwidth  و height هم استفاده کنیم. اگر Height و Width تنظیم نشده باشند ممکن است صفحه هنگام بارگذاری ویدیو بپرد.

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

متن موجود بین تگ های video و /videoفقط در مرورگرهایی نمایش داده می شود که المانvideo را پشتیبانی نمی کنند.

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

برای شروع خودکار یک ویدیو از خصیصه ی autoplay استفاده کنید:

مثال:

نکته: خصیصه ی پخش خودکار در دستگاه های موبایل مثل iPad و iPhone کار نمی کند.

پشتیبانی مرورگر از HTML Video

در HTML5 سه فرمت ویدیویی پشتیبانی شده داریم: MP4، WebM وOgg .

پشتیبانی مرورگرها از فرمت های مختلف به شرح زیر است:

Media type های ویدیوی HTML

متدها، ویژگی ها و Event های مربوط به HTML Video

HTML متدهای DOM، Property ها و Event های المان videoرا تعریف می کند.

این ویژگی به شما اجازه می دهد تا ویدیوها را Play، Pause و بارگذاری و زمان و صدای آنها را تنظیم کنید.

همچنین DOM Event هایی هم وجود دارند که وقتی ویدیویی شروع به پخش می کند یا Pause می شود یا دیگر اتفاق ها را به شما اطلاع می دهند.

تگ های ویدیویی HTML5

شما می توانید برای یادگیری کامل HTML و  CSS از دوره آموزشی صفر تا صد HTML و CSS موجود در همین سایت استفاده کنید.