Video daxil etmək: <video>

4.1 <video> etiketi haqqında əsaslar

Video elementindən <video> istifadə edərək, veb-səhifədə video məzmununu birbaşa brauzer vasitəsilə yayımlamaq mümkündür. Bu element, müxtəlif formatların dəstəklənməsi, atributların və JavaScript metodlarının köməyi ilə idarəetmə daxil olmaqla geniş imkanlar təqdim edir. Gəlin bu elementi ətraflı nəzərdən keçirək.

Sadə bir nümunə

<video> etiketi videofaylın yolunu göstərən src atributu ilə istifadə olunur. Həmçinin, standart idarəetmə elementlərini göstərmək üçün controls atributunu əlavə etmək olar, məsələn, oynatma, pauza düymələri və səsin tənzimlənməsi.

    
      <video src="videofile.mp4" controls></video>
    
  

Bir neçə mənbə ilə nümunə

Müxtəlif brauzerlərin dəstəklənməsini təmin etmək üçün <source> etiketi ilə bir neçə video mənbəyi təyin etmək olar. Bu, brauzerə uyğun formatı seçməyə imkan verir.

    
      <video controls>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Brauzeriniz video elementini dəstəkləmir.
      </video>
    
  

<video> etiketi atributları

• src: videofaylın yolunu göstərir
• controls: oynatma idarəetmə elementlərini göstərir
• autoplay: səhifə yüklənən kimi videonu avtomatik oynadır
• loop: videonu bitdikdən sonra təkrarlayır
• muted: səhifə yüklənəndə səsi söndürür
• preload: brauzerin videonu necə yükləməsi lazım olduğunu göstərir. Mümkün dəyərlər: none, metadata, auto
• width və height: video pleyerin enini və hündürlüyünü təyin edir
• poster: videonu oynatmazdan əvvəl göstərilən yer tutucu şəkli müəyyən edir

4.2 Əsas atributlar

1. Avtomatik çalma

autoplay atributu videonun səhifə yükləndikdən dərhal sonra avtomatik çalınmasını təmin edir. Audio fayllarda olduğu kimi, bu atributu istifadə edərkən diqqətli olmaq lazımdır ki, istifadəçiləri narahat etməsin.

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. Videonun dövri çalınması

loop atributu videonun sonsuz dövr olaraq çalınmasını təmin edir. Bu, fon videoları və ya animasiyalar üçün faydalıdır.

    
      <video src="videofile.mp4" loop></video>
    
  

3. Səsin deaktiv edilməsi

muted atributu videonun səsini səhifə yükləndikdə deaktiv edir. Bu, video standart olaraq səssiz çalınsın və istifadəçi ehtiyac olduqda səsi aktiv etsin deyə faydalıdır.

    
      <video src="videofile.mp4" muted></video>
    
  

4. Əvvəlcədən yükləmə

preload atributu brauzerə videonu səhifə yükləndikdə necə yükləməli olduğunu göstərir. Bu atribut üç dəyər ala bilir:

• none: brauzer videonu əvvəlcədən yükləməməlidir
• metadata: brauzer yalnız metadataları yükləməlidir (məsələn, uzunluq, ölçülər və s.)
• auto: brauzer səhifə yükləndikdə videonu tamamilə yükləməlidir

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. Poster

poster atributu videonun çalınmasına başlamazdan əvvəl göstərilən bir şəkili təyin edir. Bu, istifadəçiyə videonun məzmunu haqqında vizual məlumat vermək üçün faydalıdır.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 Dəstəklənən video formatları

Brauzerlərarası uyğunluğu təmin etmək üçün bir neçə video formatından istifadə edilməyi tövsiyə olunur. Ən geniş yayılmış formatlara MP4, WebM və OGG daxildir.

MP4 Formatı

MP4 (MPEG-4 Part 14) — ən populyar video formatlarından biridir. Bu format əksər brauzerlər və cihazlar tərəfindən dəstəklənir. MP4 formatı itkisiz sıxılmadan istifadə edir və kiçik fayl ölçüsü ilə yaxşı video keyfiyyəti təmin edir.

Nümunə:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

WebM Formatı

WebM — internetdə istifadə üçün hazırlanmış açıq video sıxılma formatıdır. Əksər müasir brauzerlər bu formatı dəstəkləyir və yaxşı video keyfiyyəti təqdim edir.

Nümunə:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

OGG Formatı

OGG (Ogg Theora) — bir çox brauzer tərəfindən dəstəklənən açıq video formatıdır. Bu format yaxşı video keyfiyyəti təmin edir və çox vaxt MP4 və WebM formatlarına alternativ kimi istifadə olunur.

Nümunə:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

Uyğunluğu təmin etmək üçün bir neçə formatın istifadəsinə nümunə

Brauzerlərarası uyğunluğu təmin etmək üçün müxtəlif formatlı bir neçə video mənbəyini göstərmək tövsiyə olunur. Brauzer ilk dəstəklənən formatı seçəcək.

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Brauzeriniz video elementini dəstəkləmir.
      </video>