HTML5 ļauj ērti iegult audio un video saturu tieši mājas lapā bez papildu spraudņiem (plugins). Agrāk bija nepieciešams Flash Player vai citi paplašinājumi, bet tagad multimediju var atskaņot ar iebūvētiem HTML elementiem.

Video

<video> elements ļauj iegult video failu lapā:

<video src="video.mp4" controls width="640" height="360">
Tava pārlūkprogramma neatbalsta video elementu.
</video>

Galvenie atribūti:

  • controls — parāda atskaņošanas vadīklas (play, pause, skaļums)
  • autoplay — sāk atskaņošanu automātiski (pārlūkprogrammas bieži bloķē, ja nav muted)
  • muted — izslēdz skaņu
  • loop — atkārto video bezgalīgi
  • poster — attēls, kas tiek parādīts pirms video sāk atskaņot
  • preload — auto, metadata vai none — kontrolē, cik daudz datu ielādēt iepriekš

Vairāki video formāti

Dažādas pārlūkprogrammas atbalsta dažādus video formātus. Ar <source> elementu var norādīt vairākus avotus:

<video controls width="640" height="360" poster="priekšskats.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
Tava pārlūkprogramma neatbalsta video atskaņošanu.
</video>

Populārākie video formāti tīmeklī:

  • MP4 (H.264) — visplašāk atbalstītais formāts
  • WebM (VP9/AV1) — atvērtais formāts ar labu kompresiju

Failu konvertēšanai uz pārlūkiem saprotamu formātu var izmantot https://ezgif.com/video-to-webm bezmaksas tiešsaites rīku.

Audio

<audio> elements darbojas līdzīgi kā video, bet ir paredzēts skaņas failiem:

<audio controls>
<source src="dziesma.mp3" type="audio/mpeg">
<source src="dziesma.ogg" type="audio/ogg">
Tava pārlūkprogramma neatbalsta audio atskaņošanu.
</audio>

Populārākie audio formāti:

  • MP3 — visizplatītākais audio formāts
  • OGG (Vorbis/Opus) — atvērtais formāts ar labu kvalitāti
  • WAV — nekompresēts formāts, lieli faili

YouTube un citu platformu video iegulšana

Lai iegultu video no YouTube, Vimeo vai citām platformām, lieto <iframe> elementu. YouTube piedāvā gatavu iegulšanas kodu (Embed), ko var nokopēt no video lapas:

<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="Video nosaukums"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>

Responsīvs video

Lai video pielāgotos dažādiem ekrāna izmēriem, var izmantot CSS:

<video controls style="max-width: 100%; height: auto;">
<source src="video.mp4" type="video/mp4">
</video>

Iframe video gadījumā bieži izmanto CSS konteineru ar proporciju saglabāšanu. Modernā CSS to var izdarīt ar aspect-ratio īpašību.

Laboja mad, labots 2x