عنصر video در HTML5

وب سایت های جدید، اکثراً از ویدئو در محتوای خود استفاده می کنند. HTML5 استانداردی را برای نمایش آن ها فراهم کرده است.

نمایش ویدئو در وب

قبل از HTML5، هرگز استانداردی برای نمایش ویدئو در صفحات وب وجود نداشته است.
قبل از HTML5، ویدئوها از طریق پلاگین هایی مثل Flash پخش می شدند.
HTML5 روش استانداردی را برای نمایش ویدئو با استفاده از عنصر (video) فراهم کرده است.

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

مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <video> را پشتیبانی می کنند.

توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عنصر <video> را پشتیبانی نمی کنند.

عنصر <video> چگونه کار می کند؟

برای نمایش ویدئو در HTML5 به عنصر <video> نیاز دارید:

Your browser does not support the video tag.

</video>

چگونگی عملکرد کد بالا :

ویژگی controls برای افزودن کنترل های play ،pause و صدا بکار برده می شود.

سعی کنید همیشه خصوصیت های width و height را مشخص کنید. اگر این خصوصیات را تنظیم نکنید، مرورگر نمی تواند اندازه ویدئو را تشخیص دهد و اگر ویدئویی در بین متن باشد جای آن تا لود کامل ویدئو خالی خواهد ماند.اما اگر این خصوصیت ها تنظیم شوند، زمانی که صفحه در حال لود شدن است، مکان مورد نیاز برای ویدئو در بین دیگر عناصر صفحه رزرو شده است. بنابراین طرح صفحه در حال لود با طرح کاملاً لود شده ی صفحه، تفاوتی نخواهد داشت.

متن بین دو تگ <video> و </video> (.Your browser does not support the audio tag) فقط در مرورگرهایی که از عنصر <video> پشتیبانی نمی کنند نمایش داده می شود.

تگ های <source> می تواند به فایل های ویدئویی مختلفی لینک شوند. مرورگر اولین فرمتی که قابلیت نمایش آن را داشته باشد، به کاربر نشان می دهد.

خصوصیت Autoplay :

autoplay در صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود و مقداری که می تواند بگیرد: autoplay

فرمت های ویدئویی و پشتیبانی مرورگرها

در حال حاضر 3 فرمت توسط تگ <video> پشتیبانی می شود:

File Format	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

MP4: فایل های MPEG 4 با کدک تصویری H264 و کدک صوتی AAC

WebM: فایل های WebM با کدک تصویری VP8 و کدک صوتی Vorbis

Ogg: فایل های Ogg با کدک تصویری Theora و کدک صوتی Vorbis

مرورگر	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (from Opera 25)	YES	YES

متدها و خصوصیت های عنصر <video>

در HTML5 برای عناصر <video> و <audio>، متدها، خصوصیت ها و رویدادهایی تعریف شده است.

این متدها، خصوصیت ها و رویدادها به شما اجازه می دهد تا با استفاده از JavaScript عناصر <video> و <audio> را دستکاری نمایید.

برای مثال متدهایی برای پخش، توقف و بارگذاری ویدئو وجود دارد و همچنین خصوصیت هایی مثل duration و volume و یا رویدادهایی که می تواند شما را از شروع و یا توقف و یا به پایان رسیدن ویدئو مطلع کند.