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

یکی از مشهورترین این پلاگین های adobr flash player می باشد که همان فایل های فلش هست .

دو تگ برای درج یک ویدیو یا موزیک در وب سایت که از 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 میتواند باعث اذیت کاربران شود پس ترجیحا داده نشود .

پخش اختصاصی

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