برای نمایش زیرنویس جدا روی ویدئوی وب، می‌توانید عنصر track را داخل video قرار دهید. فایل متن زمان‌دار باید در قالب پشتیبانی‌شده مانند WebVTT باشد. نام فارسی زیرنویس، زبان و نشانی فایل را جدا مشخص کنید؛ گذاشتن لینک SRT در track الزاماً کار نمی‌کند.
ساده‌ترین ساختار صفحه
<video controls preload="metadata" src="video.mp4">
<track kind="subtitles" src="captions.fa.vtt"
srclang="fa" label="فارسی" default>
</video>در این مثال، نشانی‌ها جایگاه فایل‌های واقعی شما هستند. srclang زبان متن track و label عنوان قابل مشاهده در انتخاب زیرنویس است. default پیشنهاد فعال‌کردن این مسیر است؛ ترجیحات کاربر و مرورگر هم می‌توانند در انتخاب اثر داشته باشند. اگر متن شامل اطلاعات صوتی لازم برای دسترس‌پذیری است، نوع captions را متناسب محتوا و مخاطب بررسی کنید.
فایل VTT آزمایشی
WEBVTT
00:00:00.000 --> 00:00:02.000
این زیرنویس آزمایشی است.
00:00:02.000 --> 00:00:04.000
متن و زمان را با ویدئوی خود جایگزین کنید.
این دو جمله جایگزین متن واقعی فیلم نیستند. زمان‌ها فقط برای آزمون نمایشی چهارثانیه‌ای‌اند و باید با ویدئوی مجاز شما هماهنگ شوند. برخلاف نمونه رایج SRT، سرآیند WEBVTT داریم و قسمت اعشاری زمان با نقطه آمده است.
نمونه محلی بدون آپلود
صفحه آزمون track و VTT نمونه را دریافت کنید. صفحه آزمون از شما یک ویدئوی محلی و یک فایل زیرنویس می‌گیرد و با نشانی موقت مرورگر نمایش می‌دهد؛ در کد نمونه ارسال شبکه‌ای وجود ندارد. ویدئو همراه فایل نیست؛ باید رسانه مجاز خودتان را انتخاب کنید.
این فایل آموزشی برای آزمایش محلی است و نصب پخش‌کننده آماده روی سایت شما محسوب نمی‌شود. در انتشار واقعی، نشانی پایدار فایل ویدئو و زیرنویس را روی میزبان خود تنظیم کنید. اگر دو فایل در مبدأهای متفاوت‌اند، سیاست دسترسی و CORS هم باید بررسی شود؛ خاموش‌کردن حفاظت مرورگر راه‌حل انتشار نیست.
سه خطا را جدا پیدا کنید
| علامت | اول چه چیزی بررسی شود؟ |
|---|---|
| گزینه زیرنویس دیده نمی‌شود | وجود track، kind، زبان و خوانده‌شدن فایل |
| گزینه هست اما متن دیده نمی‌شود | فعال‌بودن مسیر، زمان cue و زمان فعلی ویدئو |
| حروف فارسی خراب است | UTF-8 فایل و جهت جمله؛ فقط با جابه‌جایی دستی حروف اصلاح نکنید |
| متن هست اما قابل خواندن نیست | اندازه روی موبایل، کنتراست، طول cue و سرعت خواندن |
رخداد load یعنی فایل پردازش شده، نه اینکه متن با گفتار منطبق یا دسترس‌پذیری کامل تأیید شده باشد. نمونه کد برای فهم اتصال است؛ پیش از استفاده واقعی، ویدئو را در مرورگرهای هدف با زیرنویس خاموش و روشن و در عرض موبایل بررسی کنید. این مقاله نتیجه آزمون همه مرورگرها را ادعا نمی‌کند.
برای ساخت فایل اولیه، ساخت SRT فارسی و برای ارزیابی محتوا، زمان نمایش زیرنویس را ببینید. در درخواست از اپرانگار، نیاز خروجی زمان‌دار را جدا نهایی کنید؛ این مثال پشتیبانی خودکار VTT در محصول را اعلام نمی‌کند.
منبع رفتار عنصر و ویژگی‌ها: استاندارد زنده HTML، بخش track. فایل و متن فارسی نمونه، ساخته تحریریه‌اند.