آشنایی با تگ صدا audio و تگ ویدیو video در HTML

در جلسه هفتم آموزش به نحوه ی قرار دادن تصاویر در صفحات وب پرداختیم و در این مقاله آموزشی با تگ های video و audio برای قرار دادن فایل های صوتی و تصویری به صفحات وب در HTML5 آشنا می شویم. تگ <video> برای جاسازی محتوای ویدیویی در یک سند، مانند یک کلیپ فیلم یا سایر جریان های ویدیویی استفاده می شود. تگ <audio> برای جاسازی محتوای صوتی در یک سند، مانند موسیقی یا سایر جریان‌های صوتی استفاده می‌شود.

حال زمان آن رسیده که همراه با این آموزش شروع به اضافه کردن پخش کننده های ویدیویی و صوتی به اسناد HTML خود کنید!

پشتیبانی HTML5 از تگ audio و تگ video

در سال‌های گذشته، با سرعت هر چه بیشتر باند اینترنت، شاهد تحول وب از صفحات ثابتی بودیم که باز شدن آنها به چند ثانیه زمان نیاز داشت و عمدتاً متن و تصاویر کمی داشتند تا معرفی Macromedia Flash و انیمیشن‌های آن در اواخر دهه 90.

اولین هجوم ویدیوها و صداهای آنلاین با فناوری های اختصاصی مبتنی بر پلاگین مانند Flash و Silverlight امکان پذیر شد .Macromedia Flash نقش بزرگی در توسعه صفحات وب در اوایل سال 2000 ایفا کرد، هر شرکتی می خواست یک وب سایت ساخته شده با انیمیشن، موسیقی، ویدئو و فلش با استفاده از پلاگین ها و پخش کننده های خاص امکان پذیر باشد. هر دوی اینها مشکلات امنیتی و دسترسی داشتند و اکنون منسوخ شده اند.

در سال 2014 آخرین نسخه HTML5 دو عنصر جدید را معرفی کرد که امکان ترکیب اشیاء رسانه ای را در یک صفحه HTML فراهم می کند، این عناصر تگ audio و video هستند و دیگر نیازی به پلاگین های Flash نیست و هر دو صدا و تصویر ، به راحتی به صفحات وب اضافه می شوند. این تگ از کروم، فایرفاکس، سافاری، اپرا و اج در سه فرمت صوتی MP3، WAV، OGG پشتیبانی می کند. فقط مرورگر سافاری از فرمت صوتی OGG پشتیبانی نمی کند.

قبل از HTML5 ، برای معرفی کردن صدا و تصویر به صفحات HTML از تگی به نام object استفاده می‌شد و این مورد باعث می‌شد که شما نتوانید خیلی شخصی سازی خوبی برای اجرا کننده های صدا و اجرا کنندگان ویدئو ها ایجاد کنید.

نکات و آموزش نحوه استفاده از تگ ویدیو در HTML5

همانطور که از نام آن پیداست، تگ video برای نمایش فایل های ویدئویی در مرورگر استفاده می شود. با استفاده از این تگ می توانید ویدیو خود را که ایجاد کرده اید را در وب سایت خود نمایش دهید. برای نمایش انواع فایل های ویدئویی که می توانید در وب سایت نشان دهید، محدودیتی وجود دارد. شما فقط می توانید از انواع فایل های mp4 ، .webm و ogg . استفاده کنید. به غیر از این، فرمت ها در صفحه وب نمایش داده نمی شوند.

اکنون، قرار دادن این برچسب‌ها در متن HTML تضمینی برای نمایش ویدیوی شما نیست. مسیر ویدیوی شما باید مشخص باشد. می توانید این کار را با استفاده از تگ <source> انجام دهید .

مانند :

<video>
         <source src="مسیر ویدیوی خود" type="video/mp4">
</video>

در بالا، نحوه ی استفاده از تگ video آمده است. همانطور که می بینید، ما مسیر فایل mp4 خود را با استفاده از ویژگی ‘src’ ارائه کرده ایم. با این کار ویدیوی شما در وب سایت شما نمایش داده می شود.

ویژگی های بسیاری برای تگ video در دسترس است که به شما امکان می دهد تا تقریباً هر کاری را برای ویدیوی خود انجام دهید. بیایید ویژگی ها را با هم بررسی کنیم.

ویژگی های تگ video

ویژگی‌ها در تگ‌های HTML برای افزودن برخی قابلیت‌های سفارشی به برچسب‌های ما استفاده می‌شوند. از آن برای دادن اطلاعات اضافی در مورد برچسب‌های شما مانند کنترل‌ها ، عرض ، ارتفاع و غیره استفاده می‌شود. ما در بالا دیدیم که فقط ارائه یک تگ <video> کافی نیست. شما باید ویژگی ‘src’ را به همراه تگ <source> بنویسید و مسیر ویدیو را برای نمایش ویدیو طی کنید. در زیر لیستی از ویژگی هایی است که می توانید در تگ <video> استفاده کنید.

Width and Height

از ویژگی های Height و Width برای تعیین ارتفاع و عرض اندازه ویدیو در HTML استفاده می شود. به طور کلی، هر ویدیو اندازه خاصی دارد، مانند 16×9 (نمای عمودی) یا 9×16 (نمای افقی). به همین ترتیب، می توانید عرض و ارتفاع وضوح ویدیوی خود را انتخاب کنید.

مانند:

<video width="320" height="240">
  <source src="bridge.mp4" type="video/mp4">
</video>

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

کنترل‌ها

این ویژگی به ما امکان می‌دهد کنترل‌های مختلفی مانند پخش، مکث، تنظیمات صدا، نماد تمام صفحه و 3 نقطه را نشان دهیم که حتی به شما امکان می‌دهد فایل ویدیویی را روی ویدیوی خود دانلود کنید. شما فقط باید کنترل ها را به عنوان یک ویژگی بنویسید.

به طور مثال:

<video>
  <source src="bridge.mp4" type="video/mp4" controls>
</video>

در خروجی، اکنون می توانید کنترل هایی مانند دکمه های پخش و مکث، دکمه های صدا، دکمه های تمام صفحه و غیره را مشاهده کنید.

پوستر

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

به طور مثال:

<video controls poster="image.png">
  <source src="bridge.mp4" type="video/mp4">
</video>

توجه داشته باشید که تصویر به جای آن نماد بارگیری نمایش داده می شود. تصویر تا زمانی که ویدیو را پخش نکنید وجود خواهد داشت.

خاموش کردن صدا

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

<video controls muted>
  <source src="ocean.mp4" type="video/mp4">
</video>

هنگامی که ویدیو را پخش می کنید، صدایی نمی شنوید زیرا ویدیو قطع می شود.

پخش خودکار

کاری که این ویژگی انجام می دهد این است که به محض دانلود کامل ویدیو به طور خودکار ویدیو را پخش می کند. کاربران مجبور نخواهند بود دکمه پخش را فشار دهند زیرا ویدیو به خودی خود شروع می شود. تنها محدودیتی که در اینجا وجود دارد این است که شما باید از ویژگی “muted” به همراه ویژگی “autoplay” استفاده کنید.

بیایید مثال را ببینیم.

<video autoplay muted controls>
  <source src="bridge.mp4" type="video/mp4">
</video>

اکنون، همانطور که می بینید، ویدیو به طور خودکار پخش می شود.

حلقه video

ویژگی حلقه به ما امکان می دهد یک ویدیوی خاص را بی نهایت بار تکرار کنیم. به محض تمام شدن ویدیو، از اول شروع می شود. بیایید مثال را ببینیم.

<video controls loop>
  <source src="bridge.mp4" type="video/mp4">
</video>

ویدیو را تا انتها پخش کنید و خواهید دید که پخش ویدیو از ابتدا از سر گرفته می شود.

پیش بارگذاری

این ویژگی به شما امکان می دهد از کاربر بپرسید که چگونه می خواهد ویدیوی شما پس از بارگیری صفحه بارگذاری شود. اساساً دارای سه مقدار است : auto , metadata  و no one .

• auto : هنگامی که صفحه بارگیری می شود، مقدار خودکار کل ویدیو را بارگیری می کند.
• metadata : زمانی که صفحه بارگیری می شود، مقدار فراداده فقط ابرداده ویدیو را بارگیری می کند.
• no one : زمانی که صفحه بارگیری می شود، هیچ مقدار ویدیو را بارگیری نمی کند.

مانند:

<video controls preload="auto">
  <source src="bridge.mp4" type="video/mp4">
</video>

<video controls preload="metadata">
  <source src="bridge.mp4" type="video/mp4">
</video>

<video controls preload="none">
  <source src="bridge.mp4" type="video/mp4">
</video>

ویژگی های جهانی

HTML برخی از ویژگی های جهانی را ارائه می دهد. همانطور که از نام آن می‌گوید “جهانی”، می‌توانیم این نکته را دریافت کنیم که این ویژگی‌ها می‌توانند توسط تمام عناصر HTML استفاده شوند. در زیر لیستی از تمام ویژگی های جهانی آمده است.

accesskey : یک کلید میانبر برای فعال کردن/تمرکز یک عنصر را مشخص می کند.

class : یک یا چند نام کلاس را برای یک عنصر مشخص می کند.

contenteditable : مشخص می کند که آیا محتوای یک عنصر قابل ویرایش است یا خیر.

contextmenu : یک منوی زمینه را برای یک عنصر مشخص می کند. وقتی کاربر روی عنصر کلیک راست می کند، منوی زمینه ظاهر می شود.

data-* : برای ذخیره داده های سفارشی خصوصی در صفحه یا برنامه استفاده می شود.

dir : جهت متن را برای محتوای یک عنصر مشخص می کند.

draggable : مشخص می کند که آیا یک عنصر قابل کشیدن است یا خیر.

dropzone : مشخص می‌کند که آیا داده‌های کشیده شده کپی، منتقل یا پیوند داده می‌شوند.

hidden : مشخص می کند که یک عنصر هنوز مرتبط نیست یا دیگر مرتبط نیست.

id : یک شناسه منحصر به فرد برای یک عنصر مشخص می کند.

lang : زبان محتوای عنصر را مشخص می کند.

spellcheck : مشخص می کند که آیا عنصر باید املا و دستور زبان آن بررسی شود یا خیر.

style : یک سبک CSS درون خطی برای یک عنصر مشخص می کند.

tabindex : ترتیب جدول بندی یک عنصر را مشخص می کند.

title : اطلاعات اضافی در مورد یک عنصر را مشخص می کند.

translate : مشخص می کند که آیا محتوای یک عنصر باید ترجمه شود یا خیر.

نکات و آموزش نحوه استفاده از تگ audio در HTML5

همانطور که از تگ video برای افزودن فایل های ویدئویی به وب سایت شما استفاده می شود، تگ audio نیز برای افزودن فایل های صوتی به صفحه وب شما استفاده می شود.

HTML5 تگ audio را فراهم می کند که در آن می توانید فایل های موسیقی/صوتی را به جای استفاده از پلاگین های شخص ثالث (کتابخانه های خارجی) در سند HTML خود جاسازی کنید. 3 نوع فایل وجود دارد که می توانید به تگ صوتی اضافه کنید:

• mp3
• wav
• ogg

<audio>
    <source src="music.mp3" type="audio/mp3">
</audio>

در بالا نحوه ی استفاده از تگ audio برای قرار دادن فایل های صوتی در اسناد HTML آمده است.

حالا فقط نوشتن این کافی نیست. شما باید مسیر فایل صوتی خود را در ویژگی src مشخص کنید. ما آنها را در بخش ویژگی ها خواهیم دید. اساساً تگ audio تقریباً مشابه تگ ویدیو است. حتی برخی از صفات نیز یکسان است. بیایید برخی از آنها را ببینیم.

ویژگی های تگ audio

امیدوارم اکنون درک بهتری از ویژگی ها داشته باشید. بنابراین، بدون بحث بیشتر، اجازه دهید با اولین شروع کنیم.

src

ویژگی ‘src’ برای افزودن فایل صوتی به سند HTML شما استفاده می شود. شما باید مسیر فایل صوتی را در اینجا ارائه دهید و سپس فقط صدا در مرورگر پخش می شود.

<audio src= "آدرس فایل صوتی"> </audio>

حتی اگر این فایل صوتی را به صفحه وب شما اضافه می کند، نمی توانید آن را ببینید. این به این دلیل است که شما باید ویژگی دیگری به نام «کنترل‌ها» اضافه کنید که کنترل‌هایی مانند دکمه‌های پخش، مکث و صدا را درست مانند تگ ویدیو در اختیار شما قرار می‌دهد.

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

برای مثال، اگر فایل mp3 . پشتیبانی نمی‌شود، فایل دیگری را اضافه می‌کنم (مثلاً ogg .). اگر mp3 . پخش نشود، این فایل به عنوان یک فایل پشتیبان عمل می کند.

در حال حاضر، شما نمی توانید از ویژگی src در تگ audio استفاده کنید زیرا “src” می تواند تنها یک مسیر فایل داشته باشد. باید بیش از 1 مسیر فایل اضافه کنیم. به همین دلیل است که باید برای آن تگ جداگانه ای به نام <source> تعیین کنید.

بیایید با استفاده از مثال آخر بفهمیم.

<audio>
    <source src= "audio.mp3" type="audio/mp3">
    <source src= "audio.ogg" type="audio/ogg">
</audio>

همانطور که می بینید، من از دو فایل صوتی در اینجا استفاده کرده ام. در نتیجه باید از تگ <source> استفاده کنیم .

کنترل ها

ویژگی بعدی ویژگی کنترل ها است که برای نمایش کنترل هایی مانند پخش ، مکث ، بی صدا و غیره در مرورگر استفاده می شود. شما باید یک ویژگی کنترلی را در تگ <audio> ارائه دهید تا نمایش داده شود.

<audio controls>
  <source src="music.mp3" type="audio/mp3">
</audio>

می توانید کنترل های فایل صوتی را به عنوان خروجی مشاهده کنید.

پخش خودکار

این ویژگی برای پخش خودکار صدا به محض بارگیری صفحه یا به محض دانلود کامل فایل صوتی استفاده می شود. اما اخیراً این قابلیت «پخش خودکار» برای جدیدترین نسخه گوگل کروم غیرفعال شده است. می‌توانید کد را روی Mozilla ، Microsoft Edge و Google Chrome قدیمی اجرا کنید. در زیر یک نمونه آورده شده است.

<audio controls autoplay>
  <source src="music.mp3" type="audio/mp3">
</audio>

شما نمی توانید پخش خودکار صدا را ببینید زیرا در Google Chrome غیرفعال شده است. اما اگر سعی کنید این کد را روی هر مرورگر دیگری اجرا کنید، مطمئناً پخش خودکار صدا را خواهید دید.

muted

ویژگی muted برای بی صدا کردن صدای صدا هنگام بارگیری صفحه استفاده می شود. می توانید یک ضربدر در کنار نوار صدا ببینید که نشان می دهد صدا قطع شده است. برای شنیدن صدا روی آن نماد کلیک کنید.

<audio controls muted>
  <source src="music.mp3" type="audio/mp3">
</audio>

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

حلقه های صدا

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

مثال:

<audio controls loop>
  <source src="music.mp3" type="audio/mp3">
</audio>

صدا را تا آخر پخش کنید و خواهید دید که صدا دوباره شروع می شود. این به دلیل ویژگی “حلقه” است.

راه های دیگر برای افزودن فایل صوتی در سند HTML خود.

تگ audio تنها راه برای افزودن فایل های صوتی در مرورگر شما نیست. 3 راه دیگر برای انجام این کار وجود دارد .

بیایید هر یک از آنها را ببینیم :

عنصر object

عنصر object یک تگ HTML است که به ما اجازه می دهد انواع رسانه ها را در صفحات وب خود قرار دهیم، مانند صدا، ویدئو، عکس و فایل های PDF. اغلب استفاده نمی شود زیرا توسط اکثر مرورگرها پشتیبانی نمی شود. و نحوه اجرای آن بستگی به نوع رسانه ای دارد که ما به آن متصل می کنیم.

مثال :

<object data="image.jpg" width="300" height="200"></object>
<object data="bridge.mp4" width="300" height="200"></object>

همانطور که می بینید، به جای تگ <img> و <video> از تگ شی برای نمایش تصویر و فایل ویدئویی استفاده کرده ایم .

تگ Anchor تگ لنگر <a>

برای ایجاد پیوندی به صفحه وب شما استفاده می شود که با کلیک روی آن، شما را به آن مقصد هدایت می کند. با توجه به اینکه تگ anchor فقط به یک مسیر نیاز دارد، اگر مسیر فایل صوتی خود را ارائه دهیم، به سمت صدا هدایت می شود. بیایید مثال زیر را ببینیم.

<a href="audio1.mp3">Audio 1</a>
<a href="audio2.mp3">Audio 2</a>

این قطعه کد دو پیوند ایجاد می کند : Audio 1 و Audio 2 . و اگر روی یکی از لینک ها کلیک کنید، یک تب جدید برای شما باز می شود تا آن فایل صوتی خاص را پخش کنید.

به طور کلی، این روش ترجیح داده نمی شود زیرا تگ anchor باعث ایجاد تغییر مسیر غیر ضروری در وب سایت شما می شود که کاربران می خواهند محتوایی را در همان صفحه ببینند.

جاسازی عنصر

این تگ با یک هدف واحد ساخته شده است: به شما امکان می دهد دارایی های چند رسانه ای را در سند HTML خود جاسازی کنید. همانند تگ object، می توانید هر نوع فایلی را در این تگ قرار دهید. بیایید مثال را ببینیم :

<embed src="image.jpg">
<embed src="video.mp4">

این فایل صوتی را در داخل صفحه وب شما جاسازی می کند.

درباره HTML بیشتر بخوانید و حرفه ای شوید:

• ایجاد اولین سند html و آشنایی با ساختار صفحات آن
• آموزش تگ های تیتر یا heading – تاثیر تگ هدینگ html در سئو سایت
• آموزش تگ p یا پاراگراف در html و کاربردهای آن
• آموزش تگ تاکیدی strong و em در HTML
• آموزش تگ های br و hr در HTML و نکات آن ها
• تمام نکات در مورد کامنت گذاری درHTML
• نحوه استفاده از تصویر با تگ img در HTML
• چگونه لینک یا پیوند یا hyperlink در HTML قرار دهیم؟
• آموزش ایجاد جدول HTML با استفاده از تگ Table

اگر سوالی یا نظری دارید خوش حال میشیم تا با ما در میان بگذارید. در تلگرام با ما در ارتباط باشید.