Înainte de HTML5, pentru a putea reda un videoclip pe o pagină web, ar trebui să utilizați un plugin precum Adobe Flash Player. Odată cu introducerea HTML5, acum puteți plasa videoclipuri direct în pagina în sine.

Acest lucru face posibilă redarea videoclipurilor pe pagini concepute pentru dispozitive mobile, deoarece pluginurile precum Adobe Flash Player nu funcționează pe Android sau iOS.

Codul HTML <video> elementul este folosit pentru a încorpora videoclipuri în documente web. Poate conține una sau mai multe surse video, reprezentate folosind src atribut sau sursă element.

Pentru a încorpora un fișier video, trebuie doar să adăugați acest fragment de cod și să schimbați fișierul src către calea fișierului dvs. video:

<video controls>
  <source src="https://www.freecodecamp.org/news/html5-video/tutorial.ogg" type="video /ogg">
  <source src="tutorial.mp4" type="video /mpeg">
  Your browser does not support the video element. Kindly update it to latest version.
</video >

<video> elementul este acceptat de toate browserele moderne. Cu toate acestea, nu toate browserele acceptă același format de fișier video. Fișierele MP4 sunt formatul cel mai acceptat, iar alte formate precum WebM și Ogg sunt acceptate în Chrome, Firefox și Opera.

Pentru a vă asigura că videoclipul dvs. este redat în majoritatea browserelor, este recomandată să le codificați atât în ​​formatele Ogg, cât și în formatele MP4, și să le includeți pe ambele în <video> element ca în exemplul de mai sus. Browserele vor utiliza primul format recunoscut.

ad-banner

Dacă, dintr-un anumit motiv, browserul nu recunoaște niciunul dintre formate, va fi afișat textul „Browserul dvs. nu acceptă elementul video. Actualizați-l la cea mai recentă versiune”.

S-ar putea să fi observat și tu controls în <video> etichetă. Acest element include o mulțime de atribute utile pentru a personaliza experiența de redare.

<video> atribute

controls

controls atributul gestionează dacă apar controale precum butonul de redare / pauză sau glisorul de volum.

Acesta este un atribut boolean, ceea ce înseamnă că poate fi setat la adevărat sau fals. Pentru a-l seta la adevărat, pur și simplu adăugați-l la <video> etichetă. Dacă nu este prezent în etichetă, va fi setat la fals și comenzile nu vor apărea.

autoplay

„redare automată” poate fi setată la adevărat sau fals. Îl setați la adevărat adăugându-l în etichetă, dacă nu este prezent în etichetă, este setat la fals. Dacă este setat la adevărat, videoclipul va începe să fie redat de îndată ce o cantitate suficientă de videoclip a fost memorată pentru ca acesta să poată fi redat. Mulți oameni consideră că videoclipurile cu redare automată sunt perturbatoare sau enervante. Așadar, utilizați această caracteristică cu ușurință. De asemenea, rețineți că unele browsere mobile, cum ar fi Safari pentru iOS, ignoră acest atribut.

Acesta este un alt atribut boolean. Prin includerea autoplay în <video> etichetă, videoclipul încorporat va începe redarea de îndată ce s-a tamponat suficient.

<video autoplay>
  <source src="https://www.freecodecamp.org/news/html5-video/video.mp4" type="video/mp4">
</video>

Rețineți că mulți oameni consideră că videoclipurile cu redare automată sunt deranjante sau enervante, așa că folosiți această caracteristică cu moderare. De asemenea, rețineți că unele browsere mobile precum Safari pentru iOS ignoră în totalitate acest atribut.

poster

poster atributul este imaginea care apare pe videoclip până când utilizatorul dă clic pentru a-l reda.

<video poster="poster.png">
  <source src="https://www.freecodecamp.org/news/html5-video/video.mp4" type="video/mp4">
</video>

Videoclipurile pot fi costisitoare

Deși este mai ușor ca niciodată să includeți videoclipuri pe pagina dvs., este adesea mai bine să încărcați videoclipurile dvs. la un serviciu precum YouTube, Vimeo sau Wistia și să le încorporați codul. Acest lucru se datorează faptului că difuzarea videoclipurilor poate fi costisitoare, atât pentru dvs. în ceea ce privește costurile serverului, cât și pentru spectatorii dvs., dacă au planuri de date limitate.

Găzduirea propriilor fișiere video poate duce și la probleme cu lățimea de bandă, ceea ce ar putea însemna bâlbâială a videoclipurilor cu încărcare lentă. Mai mult decât atât, browserele tind să varieze în calitate atunci când vine vorba de redarea video, deci este greu să controlați exact ceea ce vor vedea spectatorii dvs. De asemenea, este foarte ușor să descărcați videoclipuri încorporate cu <video> etichetă, deci dacă sunteți preocupat de piraterie, vă recomandăm să căutați alte opțiuni.

Și cu aceasta, mergeți mai departe și încorporați videoclipuri după conținutul inimii. Sau nu – este apelul tău.