ویدئو، صوت و آی فریم در HTML

قبل از اینکه تگ‌ها را معرفی کنیم، باید این نکته را به شما یادآوری کنیم و آن اینکه سعی کنید یک پوشه جدید ایجاد کنید و اسمی برای آن انتخاب کنید؛ مثلا audios و صوت‌های مد نظرتان را درون آن قرار دهید. سپس آن را درون پوشه اصلی‌تان که مربوط به پروژه‌تان است انتقال دهید. این کار را برای ویدئو‌هایتان هم انجام دهید.

تگ صوت (audio) در HTML

تگ <audio> که یک تگ زوج است و برای قرار دادن صوت به کار می‌رود. ما هم می‌خواهیم یک فایل صوتی را درون سایتمان قرار دهیم. حال مساله ای که پیش می‌آید این است فرمت صوتمان باید چه چیزی باشد؟ فرمت‌هایی که در html5 مجاز هستند عبارتند از mp3 ، wav و ogg پس ما می‌توانیم صوت خود را با این سه فرمت استفاده کنیم. در واقع یک تگ به نام <source> وجود دارد که می‌توانیم آن را درون تگ <audio> قرار دهیم. یکی از اتربیوت‌هایی که درون این تگ قرار می‌گیرد تگ src است که برای آدرس دهی از آن استفاده می‌کنیم. قبلا از این اتربیوت برای تصاویر استفاده کرده‌ایم. آدرس دهی فایل صوتی مان را هم مانند آدرس دهی تصاویر به صورت آدرس دهی نسبی می‌نویسیم. یعنی موقعیت فایل درون پوشه مان را نسبت به سند html مان می‌نویسیم به صورت زیر :

Src=”audios/نام فایل”

بهتر است از اتربیوت type هم برای تگ source استفاده کنیم و مقدار audio/format را برای آن بنویسیم.

مهم ترین اتربیوتی که برای تگ audio باید بنویسیم، اتربیوت جذاب conttols است. خب حالا می‌توانیم تمام نکات را به صورت زیر درآوریم:

<audio>

<source src=”audios/نام فایل” type=”audio/mp3”>

<source src=”audios/نام فایل” type=”audio/wav”>

<source src=”audios/نام فایل” type=”audio/ogg”>

مرورگر شما این فایل را پشتیبانی نمی‌کند.

</audio>

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

اتربیوت controls دکمه‌های کنترل مانند پخش، توقف و تنظیمات صدا را برای کاربر ایجاد می‌کند. حالا به سراغ ویدئو می‌رویم.

تگ ویدئو (video) در HTML

برای قرار دادن ویدئو باید شبیه به بالا عمل کنیم. با این تفاوت که از تگ <video> استفاده می‌کنیم. در واقع تگ source برای ویدئو به همان صورت صوت به کار می‌رود. پس به شکل زیر عمل می‌کنیم.

<video>

<source src=”videos/نام فایل” type=”video/mp4”>

<source src=”videos/نام فایل” type=”video/webm”>

<source src=”videos/نام فایل” type=”video/ogg”>

مرورگر شما این فایل را پشتیبانی نمی‌کند.

</video>

فرمت‌های مجاز html5 برای ویدئو mp4 ، webm و ogg هستند. برای زیبا تر نمایش دادن ویدئو یمان می‌توانیم از اتربیوت‌های width و height استفاده کنیم.

نکته ی دیگری که وجود دارد این است که ما می‌توانیم به جای اتربیوت controls از اتربیوت autoplay استفاده کنیم. در این صورت به محض اینکه کاربر صفحه سایت را باز می‌کند ویدئو به صورت خودکار پخش می‌شود و دیگر دکمه‌های کنترل وجود ندارند.

تگ آیفریم (iframe)

در پایان به سراغ معرفی تگ برای ایجاد آیفریم می‌رویم. به زبان ساده آیفریم یک کادر برای ما ایجاد می‌کند که می‌توانیم درون کادر صفحه ای از سایت خودمان و یا از یک سایت دیگری را نشان دهیم. به عنوان مثال فرض کنید ما می‌خواهیم درون صفحه ی اصلی سایتمان از یک آیفریم استفاده کنیم که صفحه اصلی سایت ابزاروردپرس را نشان دهد. پس به صورت زیر عمل می‌کنیم:

<iframe src=”https://www.abzarwp.com/”></iframe>