قرار دادن ویدئو و صدا در HTML

 

یکی از مزیت های اینترنت ارتباط آسان با مخاطب است و در این تعامل برقراری ارتباط از طریق صوت و تصویر نقش مهمی ایفا می کند ، شاید بیان مطلبی از طریق نوشتن زمان بر باشد باشد و ما هم نتوانیم به هدف اصلی خود برسیم ولی با یک ویدئوی چند دقیقه ایی منظورمان را به طور کامل ادا کنیم . در این آموزش عناصر رسانه ایی یعنی استفاده از ویدئو و صدا را در HTML فرا خواهیم گرفت .

استفاده از صدا

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

لینک به فایل صدا

برای لینک دادن از تگ a استفاده می کنیم به صورت زیر :

<a href=”music.mp3″>متن لینک موزیک</a>

 

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

قرار دادن صدا در صفحه

برای قرار دادن صدا در صفحه از کد زیر استفاده می شود :

<audio src=”music.mp3″ controls=”controls”> your browser does not support the audio element. </audio>

 

قبل از اینکه ویژگی های این تگ رو بررسی کنیم می خواهم دلیل متنی که براتون نوشتم رو بگویم ، این متن رو برای این می نویسیم که اگه مرورگری این تگ رو ساپورت نکرد این نوشته براش به نمایش در بیاد و بفهمد که مرورگرش این فایل صوتی رو ساپورت نمیکند ، شما می توانید به جای نوشته بالا هرچی که می خواهید بنویسید .

ویژگی controls

مقدار این ویژگی یا صفت برابر controls است . با کمک این ویژگی می توانید نوار ابزار کنترل کننده را در زمان نمایش صدا در اختیار کاربران قرار دهید . که خودشان بتوانند صدا را پخش یا متوقف کنند .

ویژگی autoplay

مقدار این ویژگی برابر autoplay است و اگه در کد بالا به جای cotrols از این صفت استفاده کنید خواهید دید که صدا به صورت خودکار شروع به پخش شدن می کند .

ویژگی loop

مقدار این ویژگی برابر loop هست به کمک این ویژگی می توانید بعد از به پایان رسیدن اجرای صدا ، صدا از اول پخش شود .

ویژگی preload

این ویژگی در زمان لود صفحه شروع به لود صدا می کند و در زمان استفاده از این عنصر ویژگی autoplay غیرفعال می شود .

ویژگی src

مقدار url با این ویژگی آدرس فایل صدا را مشخص می کند . فرمت های قابل استفاده در عنصر صدا به شرح زیر است :

Ogg vorbis
Mp3
Wav
Vorbis

استفاده از ویدئو

یکی از رسانه های مورد استفاده در وب ویدئو است که به کمک تگ یا عنصر Video می توان به نمایش ویدئو در وب پرداخت . به کد زیر توجه کنید :

<video width=”320″ height=”240″ controls=”controls”> <source src=”video.mp4″ type=”video/mp4″ /> <source src=”video.ogg” type=”video/ogg” /> Your browser does not support the video element. </video>

در کد بالا درون عنصر video به تنظیم ارتفاع و عرض و نوع کنترل پرداختیم و در خط دوم و سوم هم به معرفی منبع ویدئو اشاره کردیم و در خط چهارم هم همان طور که در بالا گفتم اگر مرورگری این عنصر را ساپورت نکند این نوشته برای او نشان داده خواهد شد.

ویژگی های مورد استفاده در تگ ویدئو :

ویژگی Autoplay

مقدار این ویژگی برابر autoplay است و با استفاده از این ویژگی در تگ ویدئو بعد از لود شدن صفحه ویدئو به صورت خودکار شروع به پخش شدن می کند .

ویژگی controls

مقدار این ویژگی برابر controls است با کمک این ویژگی می توانید کنترل ویدئو را در زمان لود و پخش که شامل دکمه های اجرا و … هست در اختیار کاربران قرار دهید .

ویژگی height

مقدار این ویژگی pixels ( مقدار عددی ) برای تنظیم ارتفاع نمایش ویدئو می باشد.

ویژگی loop

مقدار این ویژگی loop است و با کمک این ویژگی می توان بعد از اتمام ویدئو آن را به صورت خودکار دوباره نمایش داد .

ویژگی width

مقدار این ویژگی pixels ( مقدار عددی ) برای تنظیم پهنا یا عرض نمایش ویدئو است .

ویژگی src

مقدار این ویژگی URL یا آدرس محل ویدئو است با کمک این ویژگی محل ذخیره ویدئو را به کد می دهیم .

فرمت های مجاز ویدئو برای استفاده : MP4 , ogg , WebM , Flash Video