Відео

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

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

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

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

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

Приклад:


html
9
1
2
3
<video controls autoplay loop>
  <!-- Source tags will be defined here -->
</video>

Джерело

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


html
9
1
2
3
4
5
<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.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Video</title>

</head>

<body>

<source

src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-3/sea-waves-video-example.mp4"

type="video/mp4"

Your browser does not support the video element.

</video>

</body>

</html>