کار با فایل های ویدیویی در HTML5

کار با فایل های ویدیویی در HTML
0 351

کار با فایل های ویدیویی

قبل از معرفی HTML5 هر ویدیویی با هر فرمتی که بود باید با استفاده از پلاگین های خارجی به نمایش در می آمد (مانند flash) اما در HTML5 عنصری به نام <video> معرفی شد که راهی برای جایگذاری استاندارد ویدیو در صفحه ی وب است. از نظر پشتیبانی مرورگر ها از این ویژگی می توان گفت:

  • مرورگر chrome: از نسخه ی 4 به بعد پشتیبانی می شود.
  • مرورگر IE/Edge: از نسخه ی 9 به بعد پشتیبانی می شود.
  • مرورگر FireFox: از نسخه ی 3.5 به بعد پشتیبانی می شود.
  • مرورگر Safari: از نسخه ی 4 به بعد پشتیبانی می شود.
  • مرورگر Opera: از نسخه ی 10.5 به بعد پشتیبانی می شود.

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

توضیح این مثال:

controls به کاربر دکمه های کنترل پخش را می دهد (مانند pause و next و تنظیم صدا و …). بهتر است همیشه width و height را تعیین کنیم تا صفحات وب در هنگام بارگذاری به هم نریزند. عنصر <source> نیز به شما اجازه می دهد تا به جای یک فایل چندین فایل ویدیویی را تنظیم کنید تا اگر فایل اول قابلیت پخش در مرورگر کاربر را نداشت فایل بعدی پخش شود و الی آخر. در آخر متن عادی که در بین تگ های <video> و <video/> نوشته ایم تنها زمانی نمایش داده می شوند که مرورگر کاربر از عنصر <video> اصلا پشتیبانی نکند.

یکی دیگر از Attribute هایی که میبینید، قابلیت autoplay یا همان پخش خودکار ویدیو است. به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

نکته: قابلیت پخش خودکار در برخی از تلفن های همراه و iPad یا iPhone به خوبی کار نمی کند.

میدانیم که HTML5 از سه فرمت ویدیویی پشتیبانی می کند: MP4 و WebM و Ogg. توزیع این سه فرمت در مرورگر های مختلف به این شکل است:

مرورگر MP4 WebM Ogg
Internet Explorer پشتیبانی می شود پشتیبانی نمی شود پشتیبانی نمی شود
Chrome پشتیبانی می شود پشتیبانی می شود پشتیبانی می شود
Firefox پشتیبانی می شود پشتیبانی می شود پشتیبانی می شود
Safari پشتیبانی می شود پشتیبانی نمی شود پشتیبانی نمی شود
Opera پشتیبانی می شود (از نسخه ی 25 به بعد) پشتیبانی می شود پشتیبانی می شود

جاوا اسکریپت و ویدیو

HTML5 برای عنصر <video> انواع متد های DOM و خصوصیات و رویدادها را تعریف می کند بنابراین می توانیم انواع عملیات های مختلف مانند پخش، توقف، تنظیم صدا، تنظیم مدت ویدیو و … را روی ویدیوی مورد نظر انجام دهیم. همچنین با استفاده از رویدادها می توانیم زمان شروع به پخش یک ویدیو را مشخص کنیم (مثلا صدای خاصی پخش کنیم) و … .

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

کمی خلاق تر

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

به کدهای زیر توجه کنید:

مثال اول

کد HTML:

کد های CSS:

کد های جاوا اسکریپت با تکیه بر jQuery:

مشاهده ی خروجی از ترکیب این سه کد

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

مثال دوم، کدهای HTML:

کدهای CSS:

کد های جاوا اسکریپت:

مشاهده ی خروجی پس از ترکیب سه دسته کد بالا

مثال سوم: ما حتی می توانیم ویدیو را در قالب یک عنصر دیگر mask کنیم تا فقط درون آن نمایش داده شود. به مثال زیر دقت کنید.

کد های HTML:

کد های CSS:

کد های جاوا اسکریپت:

مشاهده ی خروجی پس از ترکیب سه کد بالا

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

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد HTML به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort