FrontEnd.ro logo

Video și Audio

media player

Î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 principale ale elementului <audio>

  • 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 principale 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>

Resurse suplimentare

  1. Documentatia completa a elementului <audio> pe MDN
  2. Documentatia completa a elementului <video> pe MDN

Ai vreo sugestie de îmbunătățire a acestei lecții? Contribuie pe GitHub

#Exerciții