Video și Audio

#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> 

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>

#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.