<source> və <track> elementləri

8.1 <source> Elementi

<source> və <track> elementləri HTML5-də mühüm rol oynayır, müxtəlif multimedia formatlarını dəstəkləyir və kontentin əlçatanlığını artırır. Gəlin onları ətraflı öyrənək.

<source> elementi <audio>, <video> və <picture> elementləri daxilində multimedia kontentinin müxtəlif mənbələrini göstərmək üçün istifadə olunur. Bu, brauzerlərə oynatma üçün ən uyğun formatı seçməyə imkan verir, kross-brauzer uyğunluğunu və müxtəlif cihazların dəstəyini təmin edir.

Sintaksis

    
      <source src="URL" type="MIME-type">
    
  

Atributlar

• src: multimedia faylının yolunu göstərir
• type: faylın tipini və MIME-tipini göstərir. Bu, brauzerə bu formatın dəstəkləndiyini müəyyən etməyə kömək edir

İstifadə nümunələri:

Nümunə 1: <video> elementi daxilində

Bu nümunədə brauzer birinci dəstəklənən formatı oynatmağa çalışacaq.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogv" type="video/ogg">
        Sənin brauzerin video oynatmağı dəstəkləmir.
      </video>
    
  

Nümunə 2: <audio> elementi daxilində

    
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Sənin brauzerin audio oynatmağı dəstəkləmir.
      </audio>
    
  

Nümunə 3: <picture> elementi daxilində

    
      <picture>
        <source srcset="image-320w.jpg" media="(max-width: 320px)">
        <source srcset="image-640w.jpg" media="(max-width: 640px)">
        <source srcset="image-1280w.jpg" media="(max-width: 1280px)">
        <img src="image-1280w.jpg" alt="Şəkil nümunəsi">
      <picture>
    
  

<source> istifadəsinin üstünlükləri

• Kross-brauzer uyğunluğu: müxtəlif formatları göstərməyə imkan verir, bu da müxtəlif brauzerlərdə oynatmağı təmin edir
• Cihazlara uyğun optimizasiya: müxtəlif cihazlar və şərtlər üçün fərqli faylları göstərmə imkanı

8.2 <track> elementi

<track> elementi multimedia məzmununa mətn track-lər əlavə etmək üçün istifadə olunur, məsələn: altyazılar, eşitmə qüsurlular üçün altyazılar, təsvirlər, başlıqlar və metadata. Bu element <audio> və ya <video> elementlərinin içində yerləşdirilir.

Sintaksis

    
      <track src="URL" kind="tip" srclang="dil" label="etiket">
    
  

Atributlar

1. src: mətn track-in fayl yolunu göstərir.
2. kind: mətn track-in tipini müəyyən edir. Mümkün dəyərlər:
   • subtitles: dialoqların tərcüməsi üçün altyazılar
   • captions: eşitmə qüsurlular üçün altyazılar, daxilində səs təsvirləri
   • descriptions: görmə qüsurlular üçün səs təsvirləri
   • chapters: multimedia məzmunun naviqasiyası üçün başlıqlar
   • metadata: JavaScript tərəfindən istifadə oluna bilən metadata
3. srclang: mətn track-in dilini müəyyən edir (məsələn, en ingilis dili üçün, es ispan dili üçün).
4. label: Track seçimi üçün menyuda göstərilən təsviri ad.
5. default: həmin track-in standart olaraq aktiv olmasını göstərir.

İstifadə nümunələri:

Nümunə 1: Videoya altyazılar

Bu nümunədə videoda iki altyazı track-i var: biri ingilis, digəri isə ispan dilində. İstifadəçi menyudan uyğun track-i seçə bilər.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
        Brauzeriniz videonu oynada bilmir.
      </video>
    
  

Nümunə 2: Eşitmə qüsurlular üçün altyazılar

Bu konfiqurasiya ingilis dilində eşitmə qüsurlular üçün altyazı track-i əlavə edir.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="captions" srclang="en" label="altyazılar">
        Brauzeriniz videonu oynada bilmir.
      </video>
    
  

<track>-in üstünlükləri

• Əlçatanlığın artırılması: Altyazılar və təsvirlər məzmunu eşitmə qüsurlu, zəif eşidən və görmə qüsurlu istifadəçilər üçün əlçatan edir
• Çoxdilliliyin dəstəklənməsi: Müxtəlif dillərdə altyazılar əlavə etmək imkanı
• Əlavə məlumat: Başlıqlar və metadata multimedia məzmununu təşkil və strukturlaşdırmağa kömək edir

8.3 Mətn yollari üçün fayl formatları

Mətn yolları adətən WebVTT (Web Video Text Tracks) formatında saxlanılır. Bu format müasir brauzerlərin əksəriyyəti tərəfindən dəstəklənir və həm maşınlar, həm də insanlar tərəfindən asan oxunur.

WebVTT faylının nümunəsi (subtitles_en.vtt)

    
      WEBVTT
      1
      00:00:00.000 --> 00:00:05.000
      Video təqdimatımıza xoş gəldiniz.

      2
      00:00:05.000 --> 00:00:10.000
      Ümid edirik ki, bunu həm məlumatlandırıcı, həm də əyləncəli tapacaqsınız.
    
  

<source> və <track> elementlərinin kompleks istifadəsinə nümunələr

    
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Çoxsaylı mənbələr və mətn yolları ilə video nümunəsi</title>
        </head>
        <body>
          <h1>Çoxsaylı mənbələr və mətn yolları ilə video nümunəsi</h1>
          <video controls width="600" poster="posterimage.jpg">
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.webm" type="video/webm">
            <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
            <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
            <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
            <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
            Sizin brauzer video elementini dəstəkləmir.
          </video>
        </body>
      </html>