تگ های Video , Audio و Source در html ( ساده ولی کاربردی قسمت 21 )

پس از مدتی وقعه , برای این ساعت از سایت اسکریپت دات کام با آموزش دو تگ html5 در خدمت شما عزیزان هستم.

دو تگ برای درج یک ویدیو یا موزیک در وب سایت که از html5 به صورت رسمی و استاندارد برای تمامی مرورگر ها رونمایی شد .

همان طور که در آموزش های قبل دیدید , سعی دارم به ساده ترین روش ممکن آموزشی کامل در مورد این تگ ها بنویسم .

تگ video : این تگ به صورت container و Inline Level میباشد که برای درج یک ویدئو در وب سایت به کار میرود .

3 پسوند مجاز برای ویدئو در مرورگرها وجود دارد که عبارت اند از mp4 , webm و ogg . پسوندی که تمامی مرورگرها قادر به اجرای آن هستند , mp4 میباشد .

پس به همین دلیل ما فقط ویدئو خود را باید به این فرمت تبدیل کنیم و سپس با استفاده از تگ source که فرزند video می باشد آن را در وب سایت نمایش میدهیم .

تگ source : این تگ Empty و Inline Level میباشد و به معنی منبع می باشد که باید آدرس فیلم را به خاصیت src آن داد . ضمنا این تگ دارای یک خاصیت دیگر به نام type هم میباشد که برای نمایش ویدئو باید مقدار آن را video/mp4 قرار داد .

<video>
    <source src="آدرس فایل.mp4" type="video/mp4">
</video>

تگ video شامل خاصیت هایی هم می باشد :

خاصیت width و height : پهنا و ارتفاع دلخواه خود را قرار دهید .

خاصیت autoplay : با دادن این خاصیت که فاقد مقدار میباشد , دستور اجرای اتوماتیک فیلم را میدهید .

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

خاصیت controls : با دادن این خاصیت که فاقد مقدار می باشد , دستور درج پنل کاربری راهنمای ویدئو را میدهید ( ترجیها داده شود )

خاصیت muted : با دادن این خاصیت که باز هم فاقد مقدار میباشد , دستور قطع صدا پیش فرض ویدئو را میدهید .

خاصیت poster : در مقدار این خاصیت میتوانید لینک یک عکس را قرار دهید تا در صورت load نشدن فیلم , به جای یک صفحه سیاه رنگ , عکس دلخواه نمایان شود .

به عنوان مثال ویدئو 600 در 400 میخواهیم که دارای کنترل پنل و اجرای خودکار باشد و همچنین یک عکس برای از بین بردن صفحه سیاه قبل از نمایش :

<video controls autoplay width="600" height="400" poster="images/vms.jpg">
    <source src="آدرس فایل.mp4" type="video/mp4">
</video>

تگ audio : این تگ به صورت container و Inline Level میباشد که برای درج یک موزیک در وب سایت به کار میرود .

3 پسوند مجاز برای ویدئو در مرورگرها وجود دارد که عبارت اند از mp3 , wave و ogg . پسوندی که تمامی مرورگرها قادر به اجرای آن هستند , mp3 میباشد .

پس به همین دلیل ما فقط موزیک خود را باید به این فرمت تبدیل کنیم و سپس با استفاده از تگ source که فرزند audio می باشد آن را در وب سایت نمایش میدهیم .

ضمنا خاصیت type از تگ Source را در اینجا audio/mpeg قرار میدهیم .

این تگ هم دقیقا مانند video دارای خاصیت های autoplay , loop , muted , controls , width و height میباشد و فاقد خاصیت poster می باشد .

به عنوان مثال موزیکی با پهنای 100% میخواهیم که دارای کنترل پنل و اجرای خودکار باشد :

<audio controls autoplay width="100%">
    <source src="آدرس فایل.mp3" type="video/mpeg">
</audio>

نکته 1 : اگر این دو تگ در مرورگری قدیمی ساپورت نشوند میتوانیم با نوشتن یک جمله در زیر source , کاربر را از این موهم باخبر سازیم . مثلا :

<audio controls autoplay width="100%">
    <source src="آدرس فایل.mp3" type="audio/mpeg">
    این فایل قادر به اجرا نمیباشد
</audio>

نکته 2 : هم video و هم audio , خود دارای خاصیتی به نام src میباشند که میتوانیم به صورت مستقیم آدرس فایل ها رو در آن بنویسیم و دیگر از تگ source استفاده نکنیم . اما ترجیحا از این تگ به دلیل بهینه سازی بیشتر استفاده خواهیم کرد .

نکته 3 : طبیعتا خاصیت autoplay میتواند باعث اذیت کاربران شود پس ترجیحا داده نشود .

پخش اختصاصی

آموزش : وحید مجیدی