تگ track در html
از تگ track اغلب برای نمایش زیرنویس یا ترجمه یا راهنمای یک ویدیو یا فایل صوتی استفاده میشود. تگ <track> در واقع زیرمجموعه تگهای <audio> و <video> است.
- نحوه استفاده از تگ <track>
- attribute یا ویژگیهای قابل استفاده در تگهای <track>
- src
- srclang
- kind
- label
- default
- Global Attributes
- Event Attributes
نحوه استفاده از تگ <track>
↑محتوای متنی که درون تگ track
قرار میگیرد، معمولا شامل زیرنویسهای ویدیویی یا صوتی و یا متن ترجمه شده ویدیو است.
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
attribute یا ویژگیهای قابل استفاده در تگهای <track>
↑تگ track
میتواند دارای چندین ویژگی یا attribute باشد که برخی از این ویژگیهای ضروری و برخی دیگر اختیاری هستند.
src
↑ویژگی src
از ویژگیهای ضروری این تگ است آدرس فایل متنی ( فایل .vtt
) درون این ویژگی قرار میگیرد.
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
srclang
↑ویژگی srclang
زبان فایلهای متنی audio یا video را مشخص می کند. به همراه این ویژگی استفاده از ویژگی kind="subtitles"
نیز ضروری است.
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
kind
↑ویژگی kind
نوع متن را مشخص می کند و شامل چند مقدار مشخص است:
captions
: برای تعریف ترجمه دیالوگ و جلوه های صوتیchapters
: برای تعریف عناوین فصل (مناسب برای پیمایش در رسانه)descriptions
: تعریف یک توضیح متنی از محتوای ویدیویی (مناسب برای کاربران ناشنوا)metadata
: تعریف محتوای مورد استفاده توسط اسکریپت (برای کاربر قابل مشاهده نیست)subtitles
: تعریف زیرنویس در یک ویدیو
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
label
↑ویژگی label
عنوان ویدیو یا فایل صورتی را مشخص میکند و مرورگر هنگام فهرست کردن رسانههای موجود از آن استفاده میکند.
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
default
↑ویژگی default
مشخص میکند که اگر تنظیمات انتخابی کاربر قابل نمایش نیست از تگی که دارای ویژگی default
است، استفاده میشود توجه داشته باشید که فقط باید یک تگ <track>
با ویژگی default
در هر رسانه وجود داشته باشد.
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
Global Attributes
↑تگ <track>
از Global Attributes در HTML پشتیبانی می کند.
Event Attributes
↑تگ <track>
از Event Attributes in HTML در HTML پشتیبانی می کند.
ویژگیهای ظاهری پیشفرض در تگ <track>
↑اکثر مرورگرها تگ <track>
را با مقادیر پیش فرض زیر نمایش می دهند:
track{
display: none;
}
آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین
پروژه محور - ارتباط مستقیم با مدرس