چگونه زیرنویس VTT را به ویدیوی HTML5 اضافه کنیم؟

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

مسیر فایل را وصل کنید

ویدیو و فایل VTT با کدگذاری UTF-8 را روی یک سایت قرار دهید. عنصر track را داخل video بگذارید. مسیر نسبی از نشانی صفحه محاسبه می‌شود. srclang زبان نوشته است، نه لزوماً زبان صدا؛ برای هر زبان برچسب جدا انتخاب کنید.

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

یک مسیر زیرنویس را جداگانه آزمایش کنید

فیلم نمونه و VTT را بگیرید و روی سرور آزمایشی کنار صفحهٔ HTML قرار دهید. برای کد نمونه نام‌ها باید lesson.mp4 و example-en.vtt باشند. صفحه را از نشانی وب باز کنید تا محدودیت فایل‌های محلی مرورگر در نتیجه اثر نگذارد.

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

وقتی منوی زیرنویس خالی است درخواست فایل را دنبال کنید

زبانهٔ شبکه را باز کنید، صفحه را تازه کنید و انگلیسی را برگزینید. اگر درخواست .vtt نیست، عنصر video صفحهٔ منتشرشده را ببینید. ممکن است ویرایشگر هنگام ذخیره track را حذف کرده باشد. در غیر این صورت نشانی کامل را با پوشهٔ بارگذاری بسنجید.

متن پاسخ باید با WEBVTT، یک خط خالی و زمان‌بندی شروع شود. صفحهٔ ورود هم ممکن است وضعیت 200 برگرداند. در خطای CORS، فایل را ابتدا روی همان مبدأ صفحه امتحان کنید و سپس مبدأ مجاز و ویژگی crossorigin را بررسی کنید.

از الگوی تأخیر محل برش را پیدا کنید

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

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

نمونه روند کار

صدای مصنوعی انگلیسی بر اساس متن اختصاصی EasySub است. نمونه، بند سوم SRT اصلی را به صورت VTT نشان می‌دهد؛ خروجی تازه یا متن بازبینی‌شده توسط ویراستار حرفه‌ای نیست.

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

WebVTT · EN · دریافت ویدیوی نمونه · SRT اصلی (انگلیسی)

یک بازه مشخص را بیازمایید

در نمونه English را انتخاب کنید و به ثانیه هشت بروید. در ثانیه سیزده جمله باید ناپدید شده باشد. نشانی فایل را باز کنید؛ صفحه ورود با پاسخ 200 زیرنویس نیست. نوع text/vtt و در دامنه دیگر تنظیم crossorigin و پاسخ CORS را بررسی کنید.