مقدمه‌ای بر المان Video در HTML5

تا چندی پیش استفاده از محتوای مولتی مدیا در وب توسط پلاگین‌ها و نرم‌افزارهای مختلف نظیر Quick Time، Realtime Player و Sliverlight و یا Flash Player امکان پذیر بود. کاربر مجبورند بود یا پلاگین خاصی را دانلود کند و یا نرم‌افزار خاصی داشته باشد تا بتواند محتوای مولتی مدیا را ببیند.

هنوز هم درصد قابل توجهی از وب سایت ها از این پلاگین‌ها برای نمایش محتوای مولتی مدیا خودشون استفاده می‌کنند. و برای اینکه بتوانیم ویدیو و صدا در صفحات وب بگنجانیم باید از فلش پلیر Adobe استفاده کنیم. Flash Player توسط شرکت Macromedia منتشر شده و سپس در سال ۲۰۰۵ توسط شرکت Adobe خریداری شده و تا هم اکنون بدون تغییرات خاصی آن را نگه داشته است.

تا قبل از معرفی HTML5 هیچ راه استانداردی برای اضافه کردن ویدیو و صدا به صفحات وب وجود نداشت. تا اینکه و ورود HTML5  تگ‌های video و audio هم لیست اضافه شدند. اگر با ماهیت تگ img آشنا باشید در HTML5 تگ audio و تگ video و هم تقریبا همان کاری را می‌کنند که img می‌کند. البته با امکاناتی مختص این نوع رسانه. در این روش دیگر کاربر قرار نیست پلاگین و یا نرم‌افزار خاصی دانلود و نصب کند، در این طرف همه چیز به عهده مرورگر وب و توسعه‌دهنده هست تا تصویر و صدا را به روش مناسبی در اختیار کاربر قرار دهد.

البته مسئله به همین سادگی‌ها هم که به نظر میرسد نیست و باید فاکتورهای زیادی را بررسی کنیم و ببینیم که چطور یک ویدیو را در صفجه وب قرار دهیم به طور مثال اینترنت اکسپلورر ۸ که هنوز قسمت بزرگی از کاربران اینترنت از آن استفاده می‌کنند اکثر دستورات HTML5 را پشتیبانی نمی‌کند. بقیه مرورگرها هم اگر به روز نباشند از این خاصیت HTML5 پشتیبانی نمی‌کنند.

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

در ضمن شما می‌توانید مانند تگ img به ویدیو خود طول عرض مورد نظر خود را بدهید تا به هر اندازه‌ای که دوست دارید درآیند. البته در نظر داشته باشید که اعدادی که در طول و عرض ویدیو می‌نویسیم بدون واحد هستند ولی در اصل بر پایه پیکسل هستند.

خوب برای اینکه کاربر بتواند ویدیو را کنترل کند باید control را به آن اضافه کرد تا مرورگرها به صورت پیشفرض رابط کاربری را که برای ویدیوها در نظر گرفته‌اند به کاربر نشان دهند، در ضمن رابط کاربری مرورگرها ممکن است با یکدیگر فرق کنند و جای نگرانی نیست:

در ضمن اگر دوست دارید که صدای ویدیو شما به صورت پیشفرض پخش نشود می‌توانید از کد زیر استفاده کنید و صدای ویدیو را به حالت mute در بیاوردید.

همان طوری که در ابتدای مطلب اشاره شد، در هنگام استفاده از این TAG باید موارد زیادی را مد نظر قرار داد. یکی از مهمترین موارد حجم ویدئو  مورد نظر و همچنین گروه کاربران هدف وب سایت مورد نظر هست. حتما قبل از استفاده از ویدئو موارد ذکر شده را بررسی کنید.

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

امین ضیا

کارم طراحی رابط کاربریه، ولی دوست دارم در حوزه منابع انسانی و وصل کردن نیروی فنی و متخصص به کارفرمای خوب، کار کنم و تمامی تلاشم رو هم میکنم که این کار رو به بهترین شکل انجام بدم. همیشه در حال یادگیری هستم و چیزایی رو که بلدم با همه به اشتراک میزارم . شاید در یک پست بلاگ و یا در قالب کلاس های آموزشی. همیشه میتونید با یه هدیه کوچیک خوشحالم کنید #صرفاجهت‌اطلاع

همچنین ممکن است دوست داشته باشید ...

یک واکنش

  1. مسعود گفت:

    امین جان کد های HTML رو اصلاح کن درست نمایش نمیده

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *