Video și Audio
![Doodle cu un audio waveform și un video](https://d3tycb976jpudc.cloudfront.net/public/seo/video-audio_2400w.jpg)
Î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>
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>
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.