FrontEnd.ro logo

Video și Audio

Doodle cu un audio waveform și un video

În lecția anterioară am aflat cum putem adăuga imagini pe site-urile noastre. Cum ar fi dacă v-am spune că putem adăuga fișiere audio și video pentru a oferi și mai multă interactivitate paginilor dezvoltate de noi? Ei bine, hai să vedem cum putem face asta.

#Elementul <audio>

Elementul <audio> este folosit pentru a adăuga fișiere audio paginii tale web. Următorul exemplu arată o simplă utilizare a lui, cu ajutorul atributului src:

<audio src="fișier-audio.mp3"></audio>

O altă metodă de a declara <audio> este folosind două sau mai multe elemente <source>. Fiecare astfel de element va trebui să conțină atributul src împreună cu atributul type pentru a specifica formatul fișierului.

Nu toate browserele suportă fiecare tip de fișier audio, de aceea este recomandat să oferim mai multe formate diferite (mp3, ogg, etc), iar browser-ul o va alege pe prima compatibilă.

<audio>
  <source src="fișier-audio.mp3" type="audio/mpeg" />
  <source src="fișier-audio.ogg" type="audio/ogg" />
  <p>
    Browser-ul tău nu suportă fișiere audio.
    Folosește <a href="fișier-audio.mp4">acest link</a> 
    pentru a-l putea vizualiza.
  </p>
</audio> 
Deschide demo-ul într-o pagină nouă

Elementul <p> din exemplul de mai sus, are rolul de fallback. Acesta va fi afișat în cazul în care browser-ul nu suportă nici unul dintre formatele specificate.

#Atributele elementului <audio>

Pentru a vedea lista întreaga a atributelor, accesează MDN. Aici le vom prezenta pe cele mai des întâlnite:

  • src – indică locația fișierului audio
  • type – specifică tipul fișierului audio
  • controls – dacă acest atribut este prezent, browser-ul va oferi funcții pentru a permite user-ului să dea play/pause, să controleze volumul, etc.
<audio controls>
  <source src="fișier-audio.mp3" type="audio/mpeg" />

  <source src="fișier-audio.ogg" type="audio/ogg" />

   <p>
    Browser-ul tău nu suportă fișiere audio.
    Folosește <a href="fișier-audio.mp4">acest link</a> 
    pentru a-l putea vizualiza.
  </p>
</audio>

Nu uita că ordinea elementelor <source> este extrem de importantă căci browserul le va parcurge de sus în jos și o va alege pe prima compatibilă.

#Elementul <video>

Elementul <video> ne permite adăugarea unui video pe pagina noastră. Cel mai simplu mod de utilizare este - similar ca la audio - prin atributul src.

<video src="fișier-video.mp4"></video>

La fel ca si la audio, putem specifica mai multe surse ale clipului video folosind tagul <source>:

<video>
  <source src="fișier-video.webm" type="video/webm" />
        
  <source src="fișier-video.mp4" type="video/mp4" />
        
  <p>
    Browser-ul tău nu suportă fișiere video.
    Folosește <a href="fișier-video.webm">acest link</a> 
    pentru a-l putea vizualiza.
  </p>
</video>
Exemplu de utilizare a elementului <video>
Demo complet

#Atributele elementului <video>

Trebuie să știi că toate atributele elementului audio menționate mai sus sunt valabile și pentru clipuri video. Pe lângă acestea, unui video putem să-i specificăm și:

  • width – specifica lățimea playerului video exprimată în pixeli;
  • height – specifica înălțimea playerului video exprimată în pixeli;
  • muted – prin acest atribut browser-ul va initializa clipul audio cu volum 0. Acesta poate fi schimbat de utilizator daca atributul controls este specificat;
  • autoplay – dacă acest atribut este prezent, browser-ul va da "play" la audio imediat ce acesta este încărcat în pagină;
<video controls muted autoplay width="350" height=”250”>

  <source src="fisier-video.webm" type="video/webm" />
  <source src="fisier.video.mp4" type="video/mp4" />
        
  <p>
    Browser-ul tău nu suportă fișiere video.
    Folosește <a href="fișier-video.webm">acest link</a> 
    pentru a-l putea vizualiza.
  </p>
</video>

Aici am prezentat doar cele mai des întâlnite atribute. Pentru lista întreagă, aruncă un ochi pe MDN.

#Subtitrări sau Captions

Unui element video putem să-i atașăm subtitrări sau captions. Mai întâi creem un fișier în format .vtt unde vom configura timpii subitrării:

WEBVTT

00:00.700 --> 00:04.000
Ca și FrontEnd developer vei lucra cu 3 limbaje de programare:

00:04.500 --> 00:08.000
HTML (Hyper Text Markup Language)
CSS (Cascading Style Sheets)
și JavaScript

iar apoi îl legăm de video prin elementul <track>

<video muted autoplay controls>
  
  <source 
    type="video/mp4"
    src="https://d3tycb976jpudc.cloudfront.net/public/video/video-element-demo.mp4"  
  />
  
  <track default srclang="ro" src="/video/captions.vtt" />

</video>

Sursa elementului track trebuie să fie pe aceeași origine cu pagina pentru a funcționa.

Resurse suplimentare

  1. Documentatia elementului <audio> pe MDN
  2. Documentatia elementului <video> pe MDN
  3. Documentatia elementului <track> pe MDN