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

یکی از مزیت های اینترنت ارتباط آسان با مخاطب است و در این تعامل برقراری ارتباط از طریق صوت و تصویر نقش مهمی ایفا می کند ، شاید بیان مطلبی از طریق نوشتن زمان بر باشد  باشد و ما هم نتوانیم به هدف اصلی خود برسیم ولی با یک ویدئوی چند دقیقه ایی منظورمان را به طور کامل ادا کنیم . در این آموزش عناصر رسانه ایی یعنی استفاده از ویدئو و صدا را در 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