Muuqaallada iyo Maqallada HTML

Casharkaan waxaan baranayaa sida muuqaallada (video) iyo maqallada (audio) loogu geliyo boggaga HTML-ka. HTML5 wuxuu noo fududeeyay gelitaanka warbaahinta adiga oo u baahnayn barnaamij dheeraad ah.

Unugga `<video>`

Unugga <video> waxaa loo adeegsadaa in muuqaal lagu soo geliyo webpage-ka.

<video width="320" height="240" controls>
  <source src="muqaal.mp4" type="video/mp4">
</video>

Sifadaha `<video>`

Sifada	Shaqadiisa
`width`	Ballaca muuqaalka
`height`	Dhererka muuqaalka
`controls`	Wuxuu soo muujiyaa badhannada (play, pause, xajmiga)
`autoplay`	Muuqaalku wuxuu bilaabmaa isla markiiba
`muted`	Cod la’aanta — loo baahan yahay `autoplay`
`loop`	Muuqaalku wuxuu dib u bilaabmaa markuu dhammaado
`poster`	Sawirka muuqda muuqaalku hortii uu bilaabanin

<video width="640" height="360" controls poster="sawir-hore.jpg" loop>
  <source src="cashar.mp4" type="video/mp4">
  <source src="cashar.webm" type="video/webm">
  Browser-kaagu ma taageero muuqaallada HTML5.
</video>

Sababta lagu daray labada <source>: browser kasta wuxuu taageeraa jaadad kala duwan. Browser-ku wuxuu isticmaali doonaa kan ugu horreeya ee uu taageeraa.

Jaadadka Muuqaallada

Jaadad	type=
`.mp4`	`video/mp4` — ugu baahsan
`.webm`	`video/webm`
`.ogg`	`video/ogg`

Talo: Isticmaal .mp4 marka hore — dhammaan browser-yada casriga ah waxay taageeraan.

Unugga `<audio>`

Unugga <audio> wuxuu kuu ogolaanayaa in aad soo geliso cod ama maqal webpage-kaaga.

<audio controls>
  <source src="maqal.mp3" type="audio/mpeg">
  Browser-kaagu ma taageero maqallada HTML5.
</audio>

Sifadaha `<audio>`

Sifada	Shaqadiisa
`controls`	Wuxuu soo muujiyaa badhannada (play, pause, cod)
`autoplay`	Maqalku wuxuu bilaabmaa isla markiiba
`loop`	Maqalku wuxuu dib u bilaabmaa
`muted`	Billaabmaa oo cod la’aan ah

Jaadadka Maqallada

Jaadad	type=
`.mp3`	`audio/mpeg` — ugu baahsan
`.wav`	`audio/wav`
`.ogg`	`audio/ogg`

Unugga `<source>`

Unugga <source> waa unug maran oo ku dhex jira <video> ama <audio>. Wuxuu qeexayaa:

src — jidka file-ka
type — jaadka file-ka

Browser-ku wuxuu akhristaa <source> kii ugu horreeya ee uu taageeraa — kuwa kale waa uu iska daayaa.

YouTube iyo Dibadda Video

Halkii aad ku kaydinayso muuqaalka serverkaaga, waxaad sidoo kale ku dari kartaa muuqaallada YouTube iyada oo la isticmaalayo <iframe>:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Muuqaalka YouTube"
  allowfullscreen>
</iframe>

Wax ka baddel VIDEO_ID magaca muuqaalka YouTube.

Tusaale Dhamaystiran

<!DOCTYPE html>
<html>
<head>
  <title>Warbaahinta HTML</title>
</head>
<body>

  <h1>Muuqaalka Casharka</h1>

  <video width="640" height="360" controls poster="cashar-sawir.jpg">
    <source src="cashar-html.mp4" type="video/mp4">
    <source src="cashar-html.webm" type="video/webm">
    Browser-kaagu ma taageero muuqaallada HTML5.
  </video>

  <hr>

  <h2>Maqalka Casharka</h2>

  <audio controls>
    <source src="cashar-audio.mp3" type="audio/mpeg">
    <source src="cashar-audio.ogg" type="audio/ogg">
    Browser-kaagu ma taageero maqallada HTML5.
  </audio>

  <hr>

  <h2>Muuqaalka YouTube</h2>

  <iframe
    width="560" height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Muuqaal YouTube"
    allowfullscreen>
  </iframe>

</body>
</html>

Qodobada Muhiimka ah

Waxaa wanaagsan in muuqaalka ama maqalku kula kaydsan yahay folder-ka document HTML-kaaga
Had iyo jeer ku dar controls si adeegsaduhu uu maamuli karo
Ku dar jaadad badan <source> si browser kasta uu mid taageero
Compress muuqaalada — muuqaallo culus waxay tartiibiyaan bogga

Casharka xigta: Waxaan baranayaa Faallada HTML iyo sida kheyraadka lagu maamulo.

Unugga <video>

Sifadaha <video>

Jaadadka Muuqaallada

Unugga <audio>

Sifadaha <audio>