صوت و ویدیو در HTML؛ audio، video و زیرنویس فارسی | درس 17

درس 17 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

گاهی معرفی یک خدمت با یک فایل صوتی یا فیلم کوتاه بهتر انجام می شود. برای نمایش صوت و ویدیو در HTML می توان از پخش کننده خود مرورگر استفاده کرد. در این درس تگ های audio، video، source و track را یاد می گیریم، یک زیرنویس فارسی می سازیم و صفحه معرفی یک پروژه را تکمیل می کنیم؛ بدون نیاز به کتابخانه پخش یا جاوااسکریپت.

این درس ادامه درس 16 درباره دسترس پذیری در HTML است. برای مرور جلسات به فهرست آموزش HTML و CSS بروید. فایل های این درس نمونه هستند و باید آنها را با رسانه واقعی خودتان جایگزین کنید.

فرق audio و video چیست؟

تگ audio برای فایل صوتی و تگ video برای ویدیوی قابل نمایش است. با ویژگی controls، کنترل های بومی مرورگر را در اختیار کاربر می گذاریم. شکل این کنترل ها در مرورگرها یکسان نیست. وجود تگ، فایل رسانه را ایجاد یا تبدیل نمی کند؛ src باید به فایل واقعی با قالب قابل پخش اشاره کند.

<h2>معرفی صوتی پروژه</h2>
<audio controls preload="metadata" src="media/project-intro.mp3">
  مرورگر شما از پخش کننده صوتی HTML پشتیبانی نمی کند.
</audio>
<p><a href="media/project-intro.mp3">باز کردن فایل صوتی معرفی پروژه</a></p>

لینک را بیرون audio هم قرار داده ایم تا همیشه در دسترس باشد. متن داخل audio برای مرورگری است که خود این عنصر را پشتیبانی نمی کند؛ صرفا خراب بودن فایل در یک مرورگر امروزی لزوما این متن را نمایش نمی دهد. عنوان مجاور نیز موضوع فایل را روشن می کند. ترتیب عنوان ها را مانند درس 6 درباره عنوان ها و پاراگراف ها حفظ کنید.

ساخت پخش کننده ویدیو

<video controls preload="metadata" playsinline
       width="640" height="360"
       poster="images/project-cover.jpg">
  <source src="media/project-intro.mp4" type="video/mp4">
  مرورگر شما از پخش کننده ویدیو HTML پشتیبانی نمی کند.
</video>
<p><a href="media/project-intro.mp4">باز کردن فیلم معرفی پروژه</a></p>

poster نشانی تصویر پیش نمایش است. width و height اندازه نمایش را تعیین می کنند؛ فایل اصلی را فشرده نمی کنند. playsinline برای پخش در محدوده خود عنصر است. در درس های CSS اندازه را متناسب با عرض صفحه تنظیم خواهیم کرد. تصویر جلد را با مفهوم مسیر img در درس 9 درباره تصاویر HTML مقایسه کنید، اما poster ویژگی alt ندارد؛ اطلاعات مهم جلد را در متن صفحه هم بنویسید.

controls، preload و autoplay را بشناسید

preload یک راهنما برای مرورگر است، نه تضمین میزان دانلود. در نمونه آموزشی، کاربر خودش پخش را آغاز می کند. autoplay درخواست پخش خودکار است و ممکن است طبق سیاست مرورگر مسدود شود. برای حذف یک ویژگی بولی مثل autoplay، آن را از تگ بردارید؛ نوشتن autoplay=”false” به معنی خاموش کردن آن نیست. این موضوع به درس 5 درباره ویژگی های تگ ها برمی گردد.

source و قالب فایل؛ تغییر پسوند کافی نیست

اگر واقعا دو نسخه از یک فیلم دارید، می توانید هر دو را معرفی کنید. مرورگر منابع را به ترتیب بررسی می کند تا منبع مناسب پیدا کند. type نوع رسانه را اعلام می کند؛ مثلا audio/mpeg برای MP3 و video/mp4 برای MP4. برای این ساختار، src را روی خود video ننویسید و مسیرها را در source قرار دهید.

<video controls preload="metadata">
  <source src="media/project-intro.webm" type="video/webm">
  <source src="media/project-intro.mp4" type="video/mp4">
</video>

پسوند فایل تنها بخشی از موضوع است؛ کدک داخل فایل هم باید پشتیبانی شود. تغییر نام movie.mov به movie.mp4 آن را تبدیل نمی کند. برای تمرین، فیلم کوتاهی را با ابزار تبدیل رسانه به قالب مورد نیاز خروجی بگیرید، سپس روی مرورگر دسکتاپ و گوشی آزمایش کنید. نام و بزرگی حروف مسیر فایل باید دقیق باشد؛ جزئیات را در درس 8 درباره مسیرهای نسبی و مطلق مرور کنید.

افزودن زیرنویس فارسی با track

track یک فایل متن زمان بندی شده را به رسانه متصل می کند. برای زیرنویس از WebVTT با پسوند vtt استفاده می کنیم. در این نمونه captions انتخاب شده تا گفتار و صداهای مهم برای کسی که صدا را نمی شنود قابل فهم باشد؛ subtitles بیشتر برای رونویسی یا ترجمه گفتار کاربرد دارد.

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

src مسیر زیرنویس، srclang زبان آن و label نام قابل مشاهده در منوی زیرنویس است. default آن را به عنوان گزینه پیش فرض پیشنهاد می کند؛ تنظیمات کاربر می تواند در انتخاب اثر داشته باشد. track را بعد از source بنویسید. در تمرین، صفحه و زیرنویس را از همان مبدا وب سرو کنید تا مسائل دسترسی بین مبداها وارد پروژه نشود.

فایل WebVTT را چگونه بنویسیم؟

فایل captions/project-fa.vtt را با رمزگذاری UTF-8 بسازید. خط نخست WEBVTT است. میان سرآیند و اولین قطعه، و بین قطعه ها یک خط خالی قرار می گیرد. زمان آغاز و پایان هر قطعه باید با فیلم واقعی هماهنگ باشد. این متن و زمان ها فقط نمونه اند و باید متناسب با گفتار خودتان تغییر کنند.

WEBVTT

00:00:00.000 --> 00:00:03.000
به معرفی پروژه فروشگاه نمونه خوش آمدید.

00:00:03.000 --> 00:00:06.000
در این بخش، صفحه محصولات را می بینید.

00:00:06.000 --> 00:00:08.000
[صدای اعلان ثبت سفارش]

اعداد زمان و علامت پیکان باید انگلیسی باشند. قطعه اول از آغاز فیلم تا ثانیه 3 نمایش داده می شود. بازه ها را کوتاه و متن را خوانا نگه دارید. اگر صدا یا نام گوینده برای فهم محتوا مهم است، آن را هم اضافه کنید. زیرنویس خودکار را پیش از استفاده بازبینی کنید؛ خطای نام ها یا اصطلاحات فنی می تواند معنی آموزش را عوض کند.

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

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

مثلا اگر در فیلم بدون گفتار دکمه «افزودن به سبد» را می زنید، در نسخه متنی بنویسید: «کاربر روی افزودن به سبد می زند و یک محصول به سبد خرید اضافه می شود.» اگر اطلاعات بصری مهم در صدای فیلم بیان نشده، برای دسترسی به آن باید توضیح مناسب هم فراهم شود. تنها افزودن track همه نیازهای دسترس پذیری را حل نمی کند.

پروژه عملی؛ بخش معرفی نمونه کار

پوشه های media، images و captions را کنار index.html قرار دهید. یک فیلم، یک تصویر جلد و زیرنویس واقعی خودتان را در مسیرهای مثال بگذارید. قطعه زیر را داخل main صفحه درس 15 درباره ساختار معنایی اضافه کنید. اگر پوشه بندی را فراموش کرده اید، درس 3 درباره اولین پروژه وب را مرور کنید.

<section aria-labelledby="project-title">
  <h2 id="project-title">فیلم معرفی فروشگاه نمونه</h2>
  <p>نمایش صفحه محصولات و افزودن یک کالا به سبد خرید.</p>
  <figure>
    <video controls preload="metadata" playsinline
           width="640" height="360"
           poster="images/project-cover.jpg">
      <source src="media/project-intro.mp4" type="video/mp4">
      <track src="captions/project-fa.vtt" kind="captions"
             srclang="fa" label="فارسی" default>
    </video>
    <figcaption>معرفی امکانات اصلی فروشگاه نمونه</figcaption>
  </figure>
  <p><a href="media/project-intro.mp4">باز کردن فایل فیلم معرفی فروشگاه</a></p>
  <details>
    <summary>خواندن متن فیلم و توضیح تصاویر</summary>
    <p>گوینده: به معرفی پروژه فروشگاه نمونه خوش آمدید.</p>
    <p>تصویر: صفحه محصولات شامل کارت کالاها و قیمت آنها دیده می شود.</p>
    <p>گوینده: در این بخش، صفحه محصولات را می بینید.</p>
    <p>تصویر: یک کالا به سبد اضافه می شود و اعلان ثبت سفارش شنیده می شود.</p>
  </details>
</section>

متن بالا مربوط به فیلم فرضی کوتاه ماست. برای رسانه خودتان تمام محتوای لازم را جایگزین کنید. figcaption توضیح رسانه را نشان می دهد؛ summary نیز نام کنترل باز کردن متن است. این بخش یک فیلم آماده روی سایت منتشر نمی کند، بلکه ساختار مورد نیاز برای فایل های پروژه شما را آموزش می دهد.

چک لیست آزمایش و خطاهای رایج

• فیلم پخش نمی شود: مسیر فایل را مستقیم باز کنید؛ خطای 404، نوع فایل و کدک را بررسی کنید.
• زیرنویس دیده نمی شود: وجود فایل vtt، قالب زمان ها و گزینه زیرنویس پخش کننده را بررسی کنید.
• زیرنویس در فایل محلی مشکل دارد: پروژه را از یک وب سرور محلی یا فضای میزبانی آزمایشی اجرا کنید؛ محدودیت file:// ممکن است در بارگیری track اثر داشته باشد.
• صفحه روی موبایل بیرون می زند: width ثابت را در درس های CSS با اندازه متناسب اصلاح کنید.
• رسانه بدون صدا نامفهوم است: زیرنویس را با صدای خاموش بخوانید و صداهای مهم جاافتاده را اضافه کنید.
• کنترل پخش قابل استفاده نیست: با صفحه کلید و گوشی واقعی آزمایش کنید؛ وجود controls جای بررسی را نمی گیرد.

تمرین درس 17

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

<section aria-labelledby="audio-title">
  <h2 id="audio-title">معرفی صوتی خدمات</h2>
  <audio controls preload="metadata">
    <source src="media/services.mp3" type="audio/mpeg">
  </audio>
  <p><a href="media/services.mp3">باز کردن فایل صوتی معرفی خدمات</a></p>
  <details>
    <summary>متن کامل معرفی صوتی خدمات</summary>
    <p>ما برای کسب و کارها سایت شرکتی و فروشگاهی طراحی می کنیم.</p>
    <p>برای شروع، نیازها و هدف پروژه را همراه شما بررسی می کنیم.</p>
  </details>
</section>

منابع مطالعه

آموزش صوت و ویدیو MDN، مرجع track و راهنمای دسترس پذیری رسانه W3C.

درس قبلی: دسترس پذیری در HTML | درس 16