ویدیو و صدا

در این فصل چه می‌سازی#

تا امروز صفحه‌هایت متن و عکس داشتند. آخر این فصل یک صفحهٔ «موزهٔ علوم» داری که پخش می‌شود: ویدیوی شکفتنِ یک گل که چند روز را در چند ثانیه نشان می‌دهد، صدای بازسازی‌شدهٔ غرش یک تیرانوسور، و یک ویدیوی خوش‌آمدگویی که زیرنویس دارد — تا کسی که صدا را نمی‌شنود هم هیچ‌چیز را از دست ندهد. همه فقط با HTML.

آخر این فصل می‌توانی:

• با <video> و <audio> ویدیو و صدا در صفحه بگذاری و بگویی controls چه می‌کند و چرا بدونش کاربر گیر می‌افتد
• با <source> بیش از یک فرمت به مرورگر پیشنهاد بدهی و بگویی چرا
• با <track> برای ویدیو caption بگذاری و بگویی نبودنش چه کسانی را بیرون می‌گذارد
• یک ویدیوی پخش‌نشده را با پنل Network در DevTools عیب‌یابی کنی

قبل از شروع#

• از فصل ۴: <img> و src و width/height — <video> برادرِ بزرگ‌ترِ همان است.
• از فصل ۳: مسیر نسبی و مطلق — آدرسِ فایلِ ویدیو و صدا دقیقاً همان قاعده را دارد.
• از فصل ۹: عینکِ دسترس‌پذیری — این فصل همان درس را به صدا و تصویر می‌رساند.

مثل همیشه فقط یک مرورگر لازم داری، یا همین آزمایشگاه.

۱. <video>: برادرِ بزرگ‌ترِ <img>#

عکس را با <img src> آوردی؛ ویدیو هم همان‌قدر ساده شروع می‌شود. در آزمایشگاه این را داری:

<h2>شکفتن یک گل، تندشده</h2>
<video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
       width="640" height="360" controls></video>

مثل عکس، ویدیو هم یک فایلِ جداست که مرورگر می‌رود و می‌آورد — فقط خیلی سنگین‌تر. و دو فرق با <img> می‌بینی. اول، <video> یک tag بسته دارد — داخلش بعداً چیزهای مهمی می‌گذاریم. دوم، یک attribute تازه: controls. این به مرورگر می‌گوید «دکمه‌های خودت را بگذار» — پخش، مکث، صدا، تمام‌صفحه. و width/height همان درسِ فصل ۴ است: جای ویدیو از اول رزرو می‌شود تا صفحه نپرد.

✅ چک کن: یک پخش‌کننده با دکمهٔ پخش می‌بینی. پخشش کن — یک گل جلوی چشمت شکوفا می‌شود.

۲. حالا عمداً خرابش کن: controls را بردار#

controls را از tag حذف کن و به صفحه نگاه کن. ویدیو هنوز آن‌جاست — قابِ اولش را مثل یک عکسِ بی‌حرکت می‌بینی — ولی هیچ دکمه‌ای نیست. نه پخش، نه مکث، نه صدا. ویدیو هست، ولی هیچ‌کس نمی‌تواند پخشش کند. و مرورگر هم مثل همیشه فریاد نمی‌زند (فصل ۱ را یادت هست: HTML خراب معمولاً ساکت می‌شود).

حالا controls را برگردان تا دکمه‌ها برگردند. این attribute مقدار هم نمی‌خواهد؛ خودِ بودنش یعنی «بله».

این را یادداشت کن: اولین باری بود که جاافتادنِ یک attribute کاربر را نه با ظاهرِ زشت، بلکه با قفل‌شدنِ کامل تنبیه کرد. در بخش ۵ همین اتفاق برای گوش می‌افتد.

⚠️ مواظب باش: شاید جایی attribute ای به‌نام autoplay ببینی که ویدیو را خودکار پخش می‌کند. سراغش نرو: صفحه‌ای که سرخود صدا پخش می‌کند کاربر را فراری می‌دهد، و مرورگرها هم معمولاً جلوی پخشِ خودکارِ صدادار را می‌گیرند. بگذار کاربر خودش دکمه را بزند.

۳. <audio>، و فایلِ خودت با مسیر نسبی#

صدا هم دقیقاً همین الگوست، فقط قاب تصویری ندارد. آدرسِ صدای نمونه داخل کامنتِ آزمایشگاه است:

<h2>غرش تیرانوسور</h2>
<audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" controls></audio>

✅ چک کن: یک نوار پخشِ باریک می‌بینی؛ پخشش کن و غرش را بشنو. حالا controls را از <audio> بردار: این‌بار هیچ‌چیز روی صفحه نمی‌ماند — صدا قاب ندارد که حداقل دیده شود. برش گردان.

این آدرس‌ها مطلق بودند — فایل‌های نمونه‌ای که روی سایتِ MDN زندگی می‌کنند. روی کامپیوتر خودت، فایل ویدیو یا صدا را کنار index.html می‌گذاری و مثل فصل ۳ مسیر نسبی می‌دهی: src="flower.mp4". قاعده عیناً همان است: مسیر از جایی شروع می‌شود که خودِ صفحه هست؛ اگر فایل‌ها را در پوشه‌ای به‌نام media مرتب کردی، مسیر می‌شود media/flower.mp4.

🔧 اگر کار نکرد: مسیر را اشتباه بنویسی — مثلاً src="video.mp4" وقتی اسم واقعی فایل flower.mp4 است — فقط یک قابِ خالیِ پخش‌نشدنی می‌بینی و باز هم هیچ خطایی فریاد نمی‌زند. راهِ دیدنِ حقیقت، پنل Network در DevTools است: 1. با F12 بازش کن و tab با نام Network را انتخاب کن. 2. صفحه را refresh کن. 3. در فهرست، فایلِ ویدیو را پیدا کن — قرمز است با وضعیت 404، یعنی «مرورگر خواست، کسی جواب نداد». اسم یا مسیر فایل را درست کن تا سبز شود.

۴. <source>: به‌جای یک فایل، چند پیشنهاد#

فایل‌های ویدیو شکل‌های ذخیره‌سازی متفاوتی دارند که به هرکدام یک فرمت می‌گویند — مثل MP4 و WebM. هر مرورگری هر فرمتی را پخش نمی‌کند، و اینکه دقیقاً کدام را، چیزی است که با زمان عوض می‌شود. پس قاعدهٔ ما حفظ‌کردنِ جدول نیست؛ پیشنهاد دادن است: src را بردار و به‌جایش چند <source> داخل خود <video> بگذار:

<video width="640" height="360" controls>
  <source src="flower.webm" type="video/webm">
  <source src="flower.mp4" type="video/mp4">
  <p>مرورگرت این ویدیو را نشان نمی‌دهد — <a href="flower.mp4">فایلش را دانلود کن</a>.</p>
</video>

مرورگر از بالا می‌خواند و اولین فرمتی را که بلد است برمی‌دارد؛ type کمکش می‌کند بدون دانلودکردن تصمیم بگیرد. آن پاراگرافِ آخر هم فقط در مرورگرهای خیلی قدیمی دیده می‌شود که اصلاً <video> را نمی‌شناسند — برای بقیه نامرئی است. (این نسخه با مسیرِ نسبی برای کامپیوترِ خودت است؛ وقتی در آزمایشگاه امتحانش می‌کنی، همان آدرسِ نمونهٔ MDN را داخل src یکی از <source> ها بگذار تا واقعاً پخش شود.)

💡 نکته: «کدام فرمت بهتر است؟» جوابش امروز و فردا فرق دارد، پس حفظش نکن. MP4 معمولاً امن‌ترین نقطهٔ شروع است؛ اگر نسخهٔ WebM هم داشتی، به‌عنوان پیشنهاد اول اضافه‌اش کن. همین.

قبل از ادامه، جواب بده: اگر مرورگر هر دو فرمت را بلد باشد، کدام را پخش می‌کند؟ — اولی را از بالا. برای همین ترتیبِ <source> ها دستِ توست، نه دستِ شانس.

۵. <track>: زیرنویس، همان alt برای صدا#

فصل ۴ گفتیم عکسِ بی‌alt برای کاربرِ screen reader یک سوراخِ سیاه است. ویدیویی که در آن حرف می‌زنی هم برای کسی که نمی‌شنود — یا در اتوبوس بی‌هندزفری نشسته — دقیقاً همان سوراخ است. جوابش caption است: متنِ گفته‌ها که همزمان روی ویدیو نشان داده می‌شود. و فقط برای ناشنوایان هم نیست: در جای شلوغ، در سکوتِ نیمه‌شب، و برای کسی که تازه دارد فارسی یاد می‌گیرد، همان متن نجات‌بخش است. دو تکه دارد. اول یک فایل متنی سادهٔ زمان‌بندی‌شده با نام‌هایی مثل captions.vtt (به این قالب WebVTT می‌گویند):

WEBVTT

00:00.000 --> 00:03.000
سلام! به موزهٔ علوم خوش آمدی.

00:03.000 --> 00:07.000
اینجا هر چیزی یک داستان دارد.

و دوم یک <track> که آن فایل را به ویدیو وصل می‌کند. چهار attribute کارش را کامل می‌کنند:

• kind="captions" — نوعِ این متن: caption.
• srclang="fa" — زبانِ متن.
• label="فارسی" — اسمی که در منوی پخش‌کننده دیده می‌شود.
• default — خودکار روشن باشد.

<video width="640" height="360" controls>
  <source src="welcome.mp4" type="video/mp4">
  <track src="captions.vtt" kind="captions" srclang="fa" label="فارسی" default>
</video>

یک نکتهٔ صادقانه: مرورگر فایلِ زیرنویسی را که از سایتِ دیگری می‌آید، بدون اجازهٔ صریحِ آن سایت بار نمی‌کند — یک قانونِ امنیتی است. پس <track> را روی کامپیوتر خودت امتحان کن، جایی که captions.vtt کنار صفحه‌ات است؛ در آزمایشگاه نوشتنش اشکال ندارد، فقط زیرنویس ظاهر نمی‌شود.

💡 نکته: caption فقط گفته‌ها نیست؛ صداهای مهمِ غیرگفتاری را هم می‌نویسد — مثل «[صدای در]» یا «[موسیقی آرام]». معیارش این است: اگر کسی صدا را نشنود، چه چیزی از داستان را از دست می‌دهد؟ همان را بنویس.

۶. صفحهٔ کاملِ موزه#

حالا همه‌چیز را در یک صفحه برای کامپیوتر خودت کنار هم بگذار — ویدیوی خوش‌آمد با caption، گلِ تندشده با دو پیشنهادِ فرمت، و غرش تیرانوسور:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>موزهٔ علوم</title>
  </head>
  <body>
    <header>
      <h1>موزهٔ علوم</h1>
      <p>ببین، بشنو، بخوان — هر سه با هم.</p>
    </header>

    <main>
      <section>
        <h2>خوش آمدی!</h2>
        <video width="640" height="360" controls>
          <source src="welcome.mp4" type="video/mp4">
          <track src="captions.vtt" kind="captions" srclang="fa" label="فارسی" default>
          <p>مرورگرت این ویدیو را نشان نمی‌دهد — <a href="welcome.mp4">فایلش را دانلود کن</a>.</p>
        </video>
        <p>در این ویدیو می‌گویم این موزه چیست — و هر جمله‌اش caption دارد.</p>
      </section>

      <section>
        <h2>شکفتن یک گل، تندشده</h2>
        <video width="640" height="360" controls>
          <source src="flower.webm" type="video/webm">
          <source src="flower.mp4" type="video/mp4">
          <p>مرورگرت این ویدیو را نشان نمی‌دهد — <a href="flower.mp4">فایلش را دانلود کن</a>.</p>
        </video>
        <p>چیزی که در دنیای واقعی چند روز طول می‌کشد، اینجا در چند ثانیه. این ویدیو گفتاری ندارد؛ متنِ جایگزینش همین جمله است.</p>
      </section>

      <section>
        <h2>غرش تیرانوسور</h2>
        <audio controls>
          <source src="t-rex-roar.mp3" type="audio/mpeg">
          <p>مرورگرت این صدا را پخش نمی‌کند — <a href="t-rex-roar.mp3">فایلش را دانلود کن</a>.</p>
        </audio>
        <p>بازسازیِ صدای جانوری که هیچ انسانی هرگز نشنیده است.</p>
      </section>
    </main>

    <footer>
      <p>موزهٔ علوم — ۱۴۰۵</p>
    </footer>
  </body>
</html>

✅ چک کن: در آزمایشگاه، همین صفحه با آدرس‌های نمونهٔ MDN به‌جای مسیرهای نسبی کار می‌کند (زیرنویس، همان‌طور که گفتیم، فقط روی کامپیوتر خودت ظاهر می‌شود). سه بخش می‌بینی، هر سه با دکمه‌های پخش، و هر media یک متنِ همراه دارد که بدون دیدن و شنیدن هم داستان را می‌گوید.

و یک نگاهِ آخر به اسکلت بینداز: هر media داخل یک <section> با تیتر و متنِ خودش نشسته — همان الگویی که کل ترم تمرین کردی. ویدیو و صدا مهمان‌های تازه‌اند، ولی خانه همان خانهٔ semantic است.

واژه‌های تازهٔ این فصل#

در فصل بعد#

با این فصل، مفهوم‌های تازهٔ ترم ۱ واقعاً تمام شد. فصل بعد فصلِ پروژه است: صفحهٔ معرفی خودت. هیچ tag تازه‌ای نیست؛ همه‌چیزِ این ترم را در یک صفحهٔ واقعیِ چندبخشی کنار هم می‌گذاری، و دو ابزارِ حرفه‌ای را می‌بینی: validator که می‌گوید HTML ات معتبر است یا نه، و پنلِ Elements در DevTools که می‌گذارد اسکلتِ صفحه‌ات را همان‌طور که مرورگر می‌بیند تماشا کنی.