یکی از قابلیت‌های مهم HTML5 این است که برای پخش محتوای صوتی و ویدئویی، دیگر لازم نیست به فناوری‌ها و افزونه‌های قدیمی وابسته باشیم. HTML5 عناصر اختصاصی audio و video را در اختیار ما قرار می‌دهد تا بتوانیم فایل‌های صوتی و ویدئویی را مستقیماً در صفحات وب قرار دهیم. در این مقاله ابتدا با ساختار این دو تگ آشنا می‌شویم، سپس ویژگی‌های مهم آن‌ها مانند controls، autoplay، muted، loop، poster و preload را بررسی می‌کنیم و در ادامه یاد می‌گیریم چگونه با استفاده از source چند فایل با فرمت‌های مختلف ارائه کنیم تا مرورگر بتواند مناسب‌ترین گزینه را انتخاب کند.

چرا صوت و ویدئو در HTML5 مهم هستند؟

در نسخه‌های قدیمی وب، پخش صوت و ویدئو معمولاً به نرم‌افزارها یا افزونه‌های جانبی وابسته بود.

HTML5 این روند را ساده‌تر کرد و عناصر اختصاصی زیر را در اختیار ما قرار داد:

<audio>

برای صوت و:

<video>

برای ویدئو.

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

قرار دادن فایل صوتی با <audio>

ساده‌ترین حالت استفاده از audio به شکل زیر است:

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

در اینجا:

<audio>

عنصر پخش صوت است.

و:

src="audio/music.mp3"

مسیر فایل صوتی را مشخص می‌کند.

اما ویژگی مهم دیگری نیز وجود دارد:

controls

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

ویژگی controls

اگر controls را قرار ندهیم:

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

ممکن است هیچ کنترل قابل مشاهده‌ای برای کاربر نمایش داده نشود.

اما:

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

کنترل‌های پخش در اختیار کاربر قرار می‌گیرد.

کاربر می‌تواند بسته به امکانات مرورگر:

• پخش کند

• توقف کند

• میزان صدا را تغییر دهد

• موقعیت پخش را تغییر دهد

بنابراین در مثال‌های آموزشی و بسیاری از کاربردهای عمومی، استفاده از controls انتخاب مناسبی است.

استفاده از <source>

روش حرفه‌ای‌تر برای تعریف فایل صوتی استفاده از source است:

<audio controls>

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

</audio>

در اینجا فایل صوتی داخل source مشخص شده است.

مزیت source این است که می‌توانیم چند منبع مختلف برای یک محتوای صوتی تعریف کنیم.

استفاده از چند فرمت صوتی

مثلاً:

<audio controls>

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

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

</audio>

مرورگر منابع را بررسی می‌کند و از گزینه‌ای که بتواند پخش کند استفاده می‌کند. ارائه چند source می‌تواند برای سازگاری بهتر با مرورگرها مفید باشد.

فرمت‌های رایج صوتی

در پروژه‌های وب ممکن است با فرمت‌های مختلفی مواجه شوید.

برخی فرمت‌های رایج:

برای شروع یادگیری، استفاده از MP3 ساده‌ترین انتخاب است.

مثلاً:

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

مسیر فایل صوتی

مانند تصاویر، مسیر فایل صوتی نیز اهمیت زیادی دارد.

فرض کنید ساختار پروژه ما این باشد:

website/
│
├── index.html
│
└── audio/
    └── music.mp3

در این حالت:

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

اگر فایل صوتی در همان پوشه index.html باشد:

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

اگر در پوشه والد قرار داشته باشد، می‌توانیم از .. استفاده کنیم:

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

متن جایگزین برای صوت

می‌توانیم داخل audio یک متن جایگزین نیز قرار دهیم:

<audio controls>

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

    <p>
        مرورگر شما از پخش این فایل صوتی پشتیبانی نمی‌کند.
    </p>

</audio>

این محتوا می‌تواند در شرایطی که عنصر صوتی قابل پشتیبانی نیست، به عنوان fallback استفاده شود.

حتی می‌توانیم لینک دانلود قرار دهیم:

<audio controls>

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

    <p>
        برای دریافت فایل
        <a href="audio/music.mp3">اینجا کلیک کنید.</a>
    </p>

</audio>

ویژگی autoplay

با استفاده از autoplay می‌توانیم درخواست کنیم رسانه به صورت خودکار شروع به پخش کند:

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

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

بنابراین برای شروع، بهتر است از autoplay بدون دلیل مشخص استفاده نکنیم.

ویژگی loop

ویژگی loop باعث می‌شود رسانه پس از پایان دوباره پخش شود.

مثلاً:

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

این ویژگی برای مواردی مانند:

• موسیقی پس‌زمینه

• صداهای کوتاه

• نمونه‌های صوتی تکرارشونده

ممکن است کاربرد داشته باشد.

ویژگی muted

با استفاده از muted می‌توان رسانه را به صورت بی‌صدا شروع کرد:

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

این ویژگی در کنار video کاربرد بیشتری دارد، مخصوصاً زمانی که ویدئو قرار است بدون صدای اولیه نمایش داده شود.

ویژگی preload

ویژگی preload به مرورگر درباره نحوه بارگذاری اولیه رسانه اطلاعات می‌دهد.

مثلاً:

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

مقادیر رایج:

none
metadata
auto

none

یعنی مرورگر ترجیح دهد رسانه را از ابتدا بارگذاری نکند.

metadata

یعنی اطلاعاتی مانند مدت زمان رسانه در اولویت باشد.

auto

یعنی مرورگر می‌تواند برای بارگذاری رسانه تصمیم بگیرد.

برای شروع لازم نیست درگیر جزئیات این ویژگی شوید؛ مهم این است که بدانید preload به نحوه بارگذاری رسانه مربوط است.

حالا سراغ ویدئو برویم

برای قرار دادن ویدئو از تگ:

<video>

استفاده می‌کنیم.

ساده‌ترین مثال:

<video controls width="600">
    <source src="videos/intro.mp4" type="video/mp4">
</video>

در این مثال:

controls

کنترل‌های پخش را نمایش می‌دهد.

و:

width="600"

عرض ویدئو را مشخص می‌کند.

عنصر video برای قراردادن یک پخش‌کننده ویدئو در صفحه طراحی شده است.

ویژگی width

برای تعیین عرض ویدئو می‌توانیم از width استفاده کنیم:

<video controls width="800">
    <source src="videos/movie.mp4" type="video/mp4">
</video>

در اینجا عرض ویدئو 800 پیکسل در نظر گرفته شده است.

البته در پروژه‌های حرفه‌ای، کنترل اندازه ویدئو معمولاً با CSS انجام می‌شود.

مثلاً:

<video controls class="main-video">
    <source src="videos/movie.mp4" type="video/mp4">
</video>

و بعداً در CSS:

.main-video {
    width: 100%;
    max-width: 800px;
}

این روش برای طراحی Responsive مناسب‌تر است.

ویژگی height

می‌توانیم ارتفاع را نیز مشخص کنیم:

<video
    controls
    width="800"
    height="450">

    <source
        src="videos/movie.mp4"
        type="video/mp4">

</video>

اما باید توجه داشته باشیم که تعیین همزمان اندازه‌های نامتناسب ممکن است نسبت تصویر ویدئو را خراب کند.

در پروژه‌های واقعی بهتر است اندازه ویدئو با توجه به نسبت تصویر و طراحی Responsive مدیریت شود.

فرمت‌های رایج ویدئو

چند فرمت رایج که در وب با آن‌ها مواجه می‌شوید:

برای شروع یادگیری معمولاً استفاده از MP4 ساده است:

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

استفاده از چند منبع ویدئو

مانند audio، برای video نیز می‌توان چند source تعریف کرد:

<video controls width="700">

    <source
        src="videos/movie.mp4"
        type="video/mp4">

    <source
        src="videos/movie.webm"
        type="video/webm">

</video>

مرورگر تلاش می‌کند یکی از منابع قابل پشتیبانی را انتخاب کند.

تفاوت src و <source>

می‌توانیم مستقیماً src را روی video قرار دهیم:

<video
    controls
    src="videos/movie.mp4">
</video>

یا از source استفاده کنیم:

<video controls>

    <source
        src="videos/movie.mp4"
        type="video/mp4">

</video>

اگر فقط یک فایل داریم، روش اول ساده‌تر است.

اگر چند فرمت یا fallback می‌خواهیم، استفاده از source مناسب‌تر است.

ویژگی poster

یکی از ویژگی‌های بسیار کاربردی video، ویژگی poster است.

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

مثلاً:

<video
    controls
    width="700"
    poster="images/video-cover.jpg">

    <source
        src="videos/movie.mp4"
        type="video/mp4">

</video>

در این مثال:

poster="images/video-cover.jpg"

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

چرا poster مهم است؟

فرض کنید یک دوره آموزشی داریم.

به جای اینکه کاربر قبل از شروع ویدئو با یک تصویر نامشخص مواجه شود، می‌توانیم یک تصویر مناسب طراحی کنیم:

┌─────────────────────────────┐
│                             
│       آموزش HTML5          
│                            
│        ▶ شروع ویدئو       
│                             
└─────────────────────────────┘

این تصویر می‌تواند عنوان ویدئو، شماره جلسه یا تصویر مرتبط با آموزش را نمایش دهد.

autoplay در ویدئو

می‌توانیم از autoplay استفاده کنیم:

<video controls autoplay>
    <source src="videos/movie.mp4" type="video/mp4">
</video>

اما همان‌طور که گفتیم، مرورگرهای مدرن برای پخش خودکار رسانه دارای صدا محدودیت‌هایی دارند.

در بسیاری از سناریوها، اگر واقعاً نیاز به autoplay داشته باشیم، ویدئو را بدون صدا شروع می‌کنیم:

<video
    controls
    autoplay
    muted>

    <source
        src="videos/movie.mp4"
        type="video/mp4">

</video>

با این حال، autoplay باید با توجه به تجربه کاربر استفاده شود.

ویژگی loop در ویدئو

برای تکرار ویدئو:

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

پس از پایان ویدئو، دوباره از ابتدا شروع می‌شود.

ترکیب چند ویژگی

می‌توانیم چند ویژگی را با هم استفاده کنیم:

<video
    controls
    width="700"
    poster="images/cover.jpg">

    <source
        src="videos/course.mp4"
        type="video/mp4">

</video>

و حتی:

<video
    controls
    autoplay
    muted
    loop
    poster="images/cover.jpg">

    <source
        src="videos/background.mp4"
        type="video/mp4">

</video>

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

زیرنویس و <track>

یکی از قابلیت‌های مهم ویدئو، امکان اضافه کردن متن زمان‌بندی‌شده مانند زیرنویس و کپشن است.

برای این کار از track استفاده می‌شود.

مثلاً:

<video controls width="700">

    <source
        src="videos/course.mp4"
        type="video/mp4">

    <track
        src="subtitles/fa.vtt"
        kind="subtitles"
        srclang="fa"
        label="فارسی">

</video>

در اینجا فایل:

fa.vtt

فایل متن زمان‌بندی‌شده است.

فرمت WebVTT برای چنین trackهایی استفاده می‌شود.

در این مرحله لازم نیست ساختار فایل .vtt را به صورت عمیق یاد بگیرید؛ فعلاً کافی است بدانید track می‌تواند برای زیرنویس و متن زمان‌بندی‌شده استفاده شود.

مثال کامل ویدئو با زیرنویس

<video
    controls
    width="700"
    poster="images/html5-course.jpg">

    <source
        src="videos/html5-course.mp4"
        type="video/mp4">

    <source
        src="videos/html5-course.webm"
        type="video/webm">

    <track
        src="subtitles/fa.vtt"
        kind="subtitles"
        srclang="fa"
        label="فارسی">

    <p>
        مرورگر شما از پخش ویدئو پشتیبانی نمی‌کند.
    </p>

</video>

این مثال تقریباً یک ساختار کامل برای یک ویدئوی آموزشی دارد.

ساختار یک پروژه چندرسانه‌ای

فرض کنید پروژه ما این ساختار را دارد:

website/
│
├── index.html
│
├── images/
│   └── video-cover.jpg
│
├── audio/
│   └── introduction.mp3
│
├── videos/
│   ├── introduction.mp4
│   └── introduction.webm
│
└── subtitles/
    └── fa.vtt

در index.html می‌توانیم بنویسیم:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">

    <title>صفحه چندرسانه‌ای</title>
</head>

<body>

    <h1>معرفی دوره طراحی وب</h1>

    <h2>فایل صوتی</h2>

    <audio controls>

        <source
            src="audio/introduction.mp3"
            type="audio/mpeg">

        <p>
            مرورگر شما از پخش صوت پشتیبانی نمی‌کند.
        </p>

    </audio>

    <h2>ویدئوی معرفی</h2>

    <video
        controls
        width="700"
        poster="images/video-cover.jpg">

        <source
            src="videos/introduction.mp4"
            type="video/mp4">

        <source
            src="videos/introduction.webm"
            type="video/webm">

        <track
            src="subtitles/fa.vtt"
            kind="subtitles"
            srclang="fa"
            label="فارسی">

        <p>
            مرورگر شما از پخش ویدئو پشتیبانی نمی‌کند.
        </p>

    </video>

</body>

</html>

تفاوت <audio> و <video>

به صورت ساده:

برای پخش صوت از audio و برای محتوای ویدئویی از video استفاده می‌کنیم.

آیا می‌توان با <video> فقط صدا پخش کرد؟

از نظر فنی، video می‌تواند محتوای صوتی را نیز پخش کند، اما اگر محتوای ما فقط صوت است، استفاده از audio انتخاب مناسب‌تری است.

پس:

<audio>

برای صوت انتخاب طبیعی‌تری است.

و:

<video>

برای ویدئو مناسب‌تر است.

تفاوت فایل ویدئو با ویدئوی آنلاین

یک نکته مهم این است که قرار دادن فایل ویدئویی در سایت با قراردادن یک ویدئوی سرویس‌هایی مانند YouTube یکسان نیست.

در این مقاله درباره فایل‌هایی مانند:

movie.mp4
movie.webm

صحبت می‌کنیم که خود صفحه مستقیماً آن‌ها را به عنوان media استفاده می‌کند.

در مقابل، سرویس‌های ویدئویی آنلاین معمولاً روش دیگری برای نمایش ویدئو در صفحه ارائه می‌کنند.

فعلاً تمرکز ما روی قابلیت‌های خود HTML5 است.

حجم فایل‌های صوتی و ویدئویی

فایل‌های رسانه‌ای معمولاً از فایل‌های HTML بسیار بزرگ‌تر هستند.

برای مثال ممکن است:

index.html      → چند KB
music.mp3       → چند MB
course.mp4      → صدها MB

باشد.

بنابراین در پروژه واقعی باید به مواردی مانند:

• حجم فایل

• کیفیت

• سرعت اینترنت

• مصرف پهنای باند

• مدت زمان ویدئو

• نوع فشرده‌سازی

توجه کنیم.

در این دوره فعلاً وارد فشرده‌سازی ویدئو و تنظیمات تخصصی Codecها نمی‌شویم.

یک اشتباه رایج در مسیر فایل

فرض کنید ساختار پروژه:

website/
│
├── index.html
│
└── videos/
    └── lesson.mp4

است.

مسیر درست:

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

اما اگر بنویسیم:

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

فایل پیدا نمی‌شود، چون نام پوشه videos بوده است.

پس اگر ویدئو نمایش داده نمی‌شود، یکی از اولین مواردی که باید بررسی کنیم مسیر فایل است.

اشتباه رایج: فراموش کردن controls

اگر این کد را بنویسیم:

<video>
    <source src="videos/movie.mp4" type="video/mp4">
</video>

ممکن است ویدئو روی صفحه کنترل‌های قابل مشاهده نداشته باشد.

برای یک پخش‌کننده ساده:

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

بهتر است.

اشتباه رایج: استفاده بی‌دلیل از autoplay

این کد:

<video autoplay>

لزومی ندارد انتخاب خوبی باشد.

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

بنابراین همیشه ابتدا از خودمان بپرسیم:

آیا واقعاً به autoplay نیاز داریم؟

اشتباه رایج: قرار دادن ویدئوی بزرگ بدون توجه به طراحی Responsive

مثلاً:

<video width="1200">

ممکن است روی صفحه‌های کوچک مشکل ایجاد کند.

در آینده با CSS و Responsive Design یاد می‌گیریم چگونه ویدئو را به شکل مناسب برای موبایل، تبلت و دسکتاپ نمایش دهیم.

مثلاً:

video {
    max-width: 100%;
    height: auto;
}

این موضوع را فعلاً فقط به عنوان یک نکته مقدماتی در نظر بگیرید.

تمرین عملی اول

یک پروژه جدید بسازید:

media-project/
│
├── index.html
│
├── audio/
│   └── song.mp3
│
└── videos/
    └── video.mp4

در index.html:

1. یک عنوان ایجاد کنید.

2. فایل صوتی را با audio نمایش دهید.

3. فایل ویدئویی را با video نمایش دهید.

4. برای هر دو controls قرار دهید.

تمرین عملی دوم

برای ویدئو موارد زیر را اضافه کنید:

controls
poster
width

مثلاً:

<video
    controls
    width="700"
    poster="images/cover.jpg">

    <source
        src="videos/course.mp4"
        type="video/mp4">

</video>

تمرین عملی سوم

یک فایل صوتی را با دو فرمت فرضی تعریف کنید:

<audio controls>

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

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

</audio>

سپس توضیح دهید که چرا ممکن است بیش از یک source تعریف کنیم.

چالش

یک صفحه معرفی دوره طراحی وب ایجاد کنید که شامل موارد زیر باشد:

بخش معرفی

عنوان دوره
توضیحات دوره

بخش صوت

عنوان فایل صوتی
audio

بخش ویدئو

عنوان ویدئو
video
poster
source

بخش زیرنویس

برای ویدئو یک track نیز تعریف کنید.

ساختار پروژه را نیز به شکل مرتب ایجاد کنید:

course/
│
├── index.html
│
├── images/
│   └── poster.jpg
│
├── audio/
│   └── introduction.mp3
│
├── videos/
│   └── lesson.mp4
│
└── subtitles/
    └── fa.vtt

هدف این تمرین این است که بتوانید یک صفحه HTML چندرسانه‌ای واقعی ایجاد کنید.

نکات مهم این مقاله

در این مقاله یاد گرفتیم:

• برای پخش صوت از audio استفاده می‌کنیم.

• برای پخش ویدئو از video استفاده می‌کنیم.

• controls کنترل‌های پخش را نمایش می‌دهد.

• source برای تعریف منبع رسانه استفاده می‌شود.

• می‌توان چند source برای یک رسانه تعریف کرد.

• autoplay باعث درخواست پخش خودکار می‌شود، اما باید با احتیاط استفاده شود.

• muted رسانه را بی‌صدا می‌کند.

• loop رسانه را تکرار می‌کند.

• preload با نحوه بارگذاری اولیه رسانه مرتبط است.

• poster تصویر اولیه ویدئو را مشخص می‌کند.

• track می‌تواند برای زیرنویس و متن زمان‌بندی‌شده استفاده شود.

• مسیر فایل‌های صوتی و ویدئویی باید دقیق باشد.

• حجم فایل‌های رسانه‌ای می‌تواند روی سرعت و مصرف پهنای باند تأثیر زیادی داشته باشد.

• برای طراحی Responsive بهتر است در مراحل بعد اندازه رسانه‌ها را با CSS مدیریت کنیم.

جمع‌بندی

HTML5 امکان قرار دادن صوت و ویدئو را به شکل مستقیم و استاندارد در صفحات وب فراهم کرده است. با استفاده از audio و video می‌توانیم بدون پیچیدگی زیاد یک پخش‌کننده رسانه‌ای ساده ایجاد کنیم و با source حتی چند منبع مختلف برای یک فایل در اختیار مرورگر قرار دهیم.

همچنین با ویژگی‌هایی مانند controls، poster، loop، muted و preload می‌توانیم رفتار رسانه را بهتر کنترل کنیم. در مورد ویدئو نیز با track می‌توانیم امکاناتی مانند زیرنویس و متن زمان‌بندی‌شده را اضافه کنیم.

در مقاله بعدی سراغ یکی از جذاب‌ترین قابلیت‌های HTML5 می‌رویم: Canvas. یاد می‌گیریم چگونه با استفاده از HTML و در ادامه JavaScript روی یک بوم گرافیکی رسم کنیم و شکل‌ها و عناصر گرافیکی ایجاد کنیم.