HTML / Video ба audio

Video ба audio

Вэб хуудсанд зөвхөн зураг биш, видео болон аудио файл ч оруулж болно. HTML5-аас эхлэн <video> болон <audio> элементүүдийг шууд браузерт тоглуулах боломжтой болсон — Flash эсвэл гуравдагч програм шаардахгүй.

<video> элемент

html
<video src="хичээл.mp4" controls width="720" height="405">
  Таны хөтөч video дэмждэггүй байна.
</video>

Гол attribute-ууд:

  • src — видео файлын зам
  • controls — тоглуулах, зогсоох, дуу тохируулах товчнуудыг харуулна
  • width / height — хэмжээ (px-ээр)
  • autoplay — хуудас нээгдэхэд автоматаар тоглуулна (ихэнх хөтчид muted-тэй хамт л зөвшөөрнө)
  • loop — дуусахад дахин эхнээс тоглуулна
  • muted — дуугүй эхлүүлнэ
  • poster — видео тоглогдохоос өмнө харуулах зургийн зам
html
<!-- Автоматаар дуугүй тоглуулах, давтах -->
<video src="арилжааны-видео.mp4" autoplay muted loop poster="thumbnail.jpg">
</video>

<source> элемент — олон формат

Хөтөч бүр дэмждэг видео формат өөр байдаг. <source> ашигласнаар хөтөч өөрт тохирох форматыг сонгоно:

html
<video controls width="720">
  <!-- Хөтөч MP4 дэмжвэл эхлэж ашиглана -->
  <source src="хичээл.mp4" type="video/mp4" />
  <!-- Дэмжихгүй бол WebM-г оролдоно -->
  <source src="хичээл.webm" type="video/webm" />
  <!-- Аль нь ч биш бол энэ текст харагдана -->
  Таны хөтөч video дэмждэггүй байна.
</video>

Нийтлэг форматууд: MP4 (H.264) хамгийн өргөн дэмжлэгтэй (video/mp4), WebM нээлттэй ба жижиг хэмжээтэй (video/webm).

<audio> элемент

Audio элемент видеотой бараг ижил синтакстай, зөвхөн дэлгэцийн хэмжээ байхгүй:

html
<audio controls>
  <source src="дуу.mp3" type="audio/mpeg" />
  <source src="дуу.ogg" type="audio/ogg" />
  Таны хөтөч audio дэмждэггүй байна.
</audio>

controls, autoplay, muted, loop attribute-ууд видеотой адил ажилладаг. Нийтлэг аудио форматууд: MP3 (audio/mpeg), OGG Vorbis (audio/ogg), WAV (audio/wav).

Бүтэн жишээ

html
<!DOCTYPE html>
<html lang="mn">
  <head>
    <meta charset="UTF-8" />
    <title>Медиа жишээ</title>
  </head>
  <body>
    <!-- Видео тоглуулагч — poster зураг тоглогдохоос өмнө харагдана -->
    <figure>
      <video controls width="640" poster="thumbnail.jpg">
        <source src="хичээл.mp4" type="video/mp4" />
        <source src="хичээл.webm" type="video/webm" />
        Таны хөтөч энэ видеог дэмжихгүй байна.
      </video>
      <figcaption>HTML видео тоглуулагчийн жишээ</figcaption>
    </figure>

    <!-- Аудио тоглуулагч -->
    <figure>
      <audio controls>
        <source src="дуу.mp3" type="audio/mpeg" />
        Таны хөтөч энэ аудиог дэмжихгүй байна.
      </audio>
      <figcaption>Podcast эпизод</figcaption>
    </figure>
  </body>
</html>

Autoplay-н тухай

Chrome болон Firefox-д autoplay зөвхөн muted attribute-тэй хамт л ажилладаг. Хэрэглэгчийн зөвшөөрөлгүй дуутай видео автоматаар тоглуулахыг хөтчид хориглосон — энэ нь хэрэглэгчийн туршлагыг хамгаалах зорилготой.

Видео файл хэт том бол YouTube эсвэл Vimeo-д байрлуулж, <iframe>-ээр оруулах нь илүү үр дүнтэй — дараагийн хичээлд яг үүнийг үзнэ.

Дараагийн хичээлд:

<iframe> элементийг судлана — гадны вэб хуудас, YouTube видео, Google Maps зэргийг өөрийн хуудсандаа хэрхэн суулгах талаар практикаар үзнэ.

← Өмнөх хичээлMeta tag, title, charsetДараах хичээл →iframe