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

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

پخش اختصاصی

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

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

در ابتدا باید بگم در کل این کار خیلی مرسوم نمی باشد . چون موزیک شما باعث ایجاد یک حجم اضافی در وب سایت شما میگردد و طبیعتا سرعت load سایت شما را پایین می آورد .

اما برای سایت هایی که دارای دیزاینی خاص و یا فانتزی هستند , این کار خالی از لطف نیست …

ابتدا یک موزیک ( ترجیجا کم حجم ) با فرمت mp3 را انتخاب نموده و در وب سایت خود ( مثلا در پوشه ای به نام audio ) آپلود کنید .

حال توسط تگ زیر , این موزیک را اجرا کنید

<audio loop autoplay controls hidden>
    <source src="آدرس فایل موزیک آپلود شده" type="audio/mpeg">
</audio>

در مثال زیر فرض بر این است که اسم موزیک شما mohsen-chavoshi و در پوشه ی audio قرار دارد .

<audio loop autoplay controls hidden>
    <source src="audio/mohsen-chavoshi.mp3" type="audio/mpeg">
</audio>

توجه : فرمت mp3 از هم اکنون توسط تمامی مرورگر ها پشتیبانی میشود و دیگر نیازی نیست تا چند فرمت مختلف برای مرورگرهای مختلف آماده کنیم .

نکات مهم :

loop : به معنای تکرار بی نهایت موزیک

autoplay : به معنای اجرای اتوماتیک موزیک به محض باز شدن وب سایت

controls : به معنای پنل نمایشی موزیک می باشد

hidden : به معنای مخفی کردن این پنل , تا کاربر متوجه پنل موزیک نشده و توانایی قطع موزیک را نداشته باشد .

در نتیجه اگر علاقه دارید کاربر پنل کاربری موزیک را مشاهده نماید , فقط کافیست خاصیت hidden را از کد بالا حذف نمایید .

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

پخش اختصاصی