استارت‌آپ و کارآفرینی

مقدمه‌ای بر المان 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 پشتیبانی نمی‌کنند.

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

<video src="demo.mp4" >
   HTML5 Video is required for this example
</video>

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

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

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

<video controls src="demo.mp4" >
    HTML5 Video is required for this example
</video>

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

<video muted src="demo.mp4" >
    HTML5 Video is required for this example
</video>

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

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

1 نظر
  1. مسعود می گوید

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

ارسال یک پاسخ

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