Cum să folosești elementul video în HTML — ghid complet

In this tutorial, you'll learn about Cum să folosești elementul video în HTML. We cover key concepts, practical examples, and best practices.

Elementul <video> permite redarea de filme și clipuri direct în browser, fără Flash — utilizat pentru tutoriale, reclame, streamuri și conținut multimedia.

The Problem

Redarea video în browser necesita cândva Flash sau QuickTime. Acum avem <video>, dar mulți nu specifică multiple formate, nu adaugă subtitrări sau nu oferă fallback corespunzător.

The Wrong Way

<video src="film.mp4" width="640"></video>

Probleme: Fără controls, utilizatorul nu poate porni/opri. Fără type pe surse, browserul nu știe formatul. Fără subtitrări, conținutul e inaccesibil.

The Right Way

<video controls width="640" poster="thumbnail.jpg">
  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">
  <source src="film.ogv" type="video/ogg">

  <track src="subtitrare-ro.vtt" kind="subtitles" srclang="ro" label="Română">
  <track src="subtitrare-en.vtt" kind="subtitles" srclang="en" label="English">

  Browserul tău nu suportă video HTML5.
  <a href="film.mp4">Descarcă videoclipul</a>
</video>

Step-by-Step Fix

1. Structurează elementul <video>

<video controls width="640" height="360" poster="previzualizare.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Text de fallback...
</video>

2. Adaugă subtitrări cu <track>

<track src="subtitrare-ro.vtt" kind="subtitles" srclang="ro" label="Română">

Fișierul VTT arată astfel:

WEBVTT

00:00:01.000 --> 00:00:05.000
Bun venit la tutorialul DodaTech.

00:00:06.000 --> 00:00:10.000
Astăzi învățăm despre video HTML.

3. Controlează redarea cu atribute

<video controls autoplay muted loop preload="auto">

Atribute comune:

Prevention Tips

• Oferă cel puțin MP4 și WebM pentru acoperire maximală
• Adaugă poster — altfel utilizatorul vede un ecran negru
• Subtitrările îmbunătățesc accesibilitatea și SEO
• Dimensiunea video se setează cu CSS sau atribute width/height

Common Mistakes

1. Fără controls — utilizatorul nu poate da play/pauză sau regla volumul
2. Un singur format — Safari preferă MP4, Firefox preferă WebM; oferă ambele
3. Autoplay fără muted — majoritatea browserelor blochează autoplay cu sunet
4. Fără subtitrări — conținutul e inaccesibil pentru surzi sau medii zgomotoase
5. Dimensiune nementionată — fără width/height, layout-ul poate sări la încărcare

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.