de Abhishek Jakhar

Cum să încorporați videoclipuri și sunete în HTML

Cum sa incorporati videoclipuri si sunete in HTML

HTML ne permite să creăm playere video și audio bazate pe standarde care nu necesită utilizarea niciunui plugin. Adăugarea de videoclipuri și audio la o pagină web este aproape la fel de ușoară ca adăugarea unei imagini sau formatarea unui text.

Există două moduri diferite de a include elemente video. Vom discuta despre amândouă mai jos.

Element video

<video> element ne permite să încorporăm fișiere video într-un HTML, foarte asemănător cu modul în care sunt încorporate imaginile.

Atributele pe care le putem include sunt:

  • src Acest atribut reprezintă sursa, care este foarte asemănătoare cu atributul src utilizat în elementul imagine. Vom adăuga linkul la un fișier video în atributul src.
  • type Acesta va fi video / mp4 deoarece .mp4 este formatul videoclipului pe care îl folosim. De asemenea, putem folosi diferite formate video, cum ar fi .ogg sau .webm, apoi valoarea atributului de tip se va schimba în video / ogg sau respectiv video / WebM.

Notă: unele formate video obișnuite sunt WebM, Ogg, MP4.

Cum sa incorporati videoclipuri si sunete in HTML

Acum avem acest videoclip pe pagina noastră. Dar există o problemă. Acest videoclip nu se redă automat și, de asemenea, nu există comenzi pentru a porni videoclipul.
Va trebui să adăugăm controale manual folosind controls atribut elementului nostru video.

Acest atribut nu ia nicio valoare, deoarece este un atribut boolean. Asta înseamnă că poate fi adevărat sau fals.

Acum, având controls atributul din elementul nostru video, înseamnă că este adevărat și va afișa comenzile de redare.

1611903426 860 Cum sa incorporati videoclipuri si sunete in HTML

Acum, dacă eliminăm comenzile, am putea face și redarea automată a videoclipului, utilizând atributul de redare automată. Acesta este, de asemenea, un atribut boolean.

1611903426 365 Cum sa incorporati videoclipuri si sunete in HTML

Acum, după cum puteți vedea, videoclipul se redă singur și nu există control. Deci, nu am pornit de fapt videoclipul, dar nici nu putem opri videoclipul.

De asemenea, putem avea comenzi și redare automată împreună.

Cum sa incorporati videoclipuri si sunete in HTML

Puteți furniza diferite atribute elementului video, în funcție de cerință.

Am menționat mai sus că există două moduri diferite de a adăuga elementul video. Să încercăm altfel.

Element sursă

Anterior am folosit un element video cu etichetă de închidere automată, dar aici vom închide elementul video. Deci, avem acum o etichetă de deschidere și închidere.

De asemenea, vom elimina atributele tip și sursă din elementul video și le vom lipi într-un alt element.

<video>  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>

Tocmai am mutat atributele în elementul sursă.

Acum, de ce am vrea să facem asta?

Ei bine, în majoritatea cazurilor, cu videoclipul vom avea mai multe surse, deoarece trebuie să oferim diferite tipuri de fișiere, în funcție de browserul care vă vizualizează videoclipul, deoarece diferite browsere acceptă diferite tipuri de fișiere.

1611903426 109 Cum sa incorporati videoclipuri si sunete in HTML

Videoclipul va arăta exact la fel. Dar acum avem un suport mai larg pentru browser.

1611903426 989 Cum sa incorporati videoclipuri si sunete in HTML
Video cu suport mai larg pentru browser (fără atribute)

Acum, dacă dorim să adăugăm atribute precum controls, autoplay, loop etc, îl vom adăuga la <video> element.

1611903426 954 Cum sa incorporati videoclipuri si sunete in HTML
Video cu suport mai larg pentru browser și alte atribute

Element audio

<audio> element este foarte asemănător cu elementul video. Cu toate acestea, singura diferență majoră este că nu există imagini.

Putem folosi elementul audio pentru a reda un fișier audio pe pagina noastră web – cum ar fi un fișier mp3.

Acum, la fel ca eticheta video, există două moduri diferite de a face acest lucru.

  • Utilizați o singură etichetă care reprezintă întregul element.
  • Deschiderea și închiderea etichetei cu elementele copil între ele.

Acum, vom avea o etichetă audio de deschidere și închidere, apoi vom adăuga elementul sursă între ele.

Structura folderelor ar putea arăta astfel:

|-- project    |-- audio      |-- sample.mp3      |-- sample.ogg    |-- css      |-- main.css      |-- normalize.css    index.html

Nu există atribute de control date pentru <audio> element din exemplul de mai sus, so the &lt; elementul audio> nu va apărea în documentul HTML.

Acum, puteți vedea că există doar câteva diferențe cheie aici. Valoarea în type atributul este schimbat din „video / mp4” în „audio / mp3”. În src atribut, am trecut de la un fișier video cu extensia .mp4 la un fișier audio cu extensie .mp3.

Acum, la fel ca elementul video, de fapt nu vom putea opri sau porni sunetul fără nicio comandă. Deci, vom adăuga controls atribut elementului audio.

1611903427 162 Cum sa incorporati videoclipuri si sunete in HTML
Element audio () cu mai multe surse pentru suport mai larg al browserului

De asemenea, puteți adăuga alte atribute în <audio> element precum redare automată, buclă etc.

Am acoperit elementele esențiale ale elementelor audio și video în HTML.

Puteți afla mai multe despre audio și video în linkurile date mai jos:

Sper că ați găsit această postare informativă și utilă. Mi-ar plăcea să vă aud feedbackul!

Mulțumesc că ai citit!