Вбудовування відео схоже на вбудовування аудіо. Використовувані атрибути та теги є порівнянними. Давайте розглянемо це детальніше.

Вбудовування аудіо

Тег <video> вбудовує відеоконтент у HTML-документ, дозволяючи користувачам відтворювати відео безпосередньо у браузері.

Атрибути відео

• controls: Додає елементи керування відео для відтворення, паузи та регулювання гучності;
• autoplay: Вказує на функціональність автоматичного відтворення;
• loop: Дозволяє безперервне повторення відео.

Приклад:

<video controls autoplay loop>
  <!-- Source tags will be defined here -->
</video>

Джерело

Тег <source> використовується всередині тега <video> для вказівки джерела (URL) відеофайлу та його атрибутів. src вказує URL відеофайлу. type вказує MIME-тип відеофайлу.
Приклад:

<video controls autoplay loop>
  <source src="video-url.mp4" type="video/mp4" />
  <source src="video-url.webm" type="video/webm" />
  Your browser does not support the video element.
</video>

У наведеному вище прикладі:

• Тег <video> включає атрибути controls, autoplay та loop;
• Теги <source> вказують URL-адреси джерел відеофайлів та їх MIME-типи;
• Якщо браузер не підтримує тег <video> або вказані формати відео, відображається альтернативний текст Your browser does not support the video element.

Відео-урок