Чтобы добавить видео на страницу HTML, используется элемент <video>. Этот элемент позволяет вставлять видеофайлы и настраивать различные параметры, такие как воспроизведение, пауза, громкость и т.д. Давайте рассмотрим, как это сделать пошагово.

Основной синтаксис

Вот базовая структура тега <video>:

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Ваш браузер не поддерживает видео.
</video>

Параметры тега `<video>`

controls: добавляет элементы управления (кнопки воспроизведения, паузы и регулировки громкости).
width и height: задают ширину и высоту внешнего вида видео.
autoplay: видео начнет воспроизводиться сразу после загрузки.
loop: видео будет повторяться бесконечно.
muted: звук видео будет выключен по умолчанию.
poster: изображение (предпросмотр), которое будет отображаться до начала воспроизведения видео.

Пример видео на странице

В этом примере добавим видео с указанием всех параметров:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Встраивание видео</title>
</head>
<body>
    <h1>Как добавить видео на страницу HTML</h1>
    <video width="640" height="360" controls autoplay loop muted poster="poster.jpg">
        <source src="video.mp4" type="video/mp4">
        <source src="video.ogg" type="video/ogg">
        Ваш браузер не поддерживает видео.
    </video>
</body>
</html>

Объяснение примера:

Декларация doctype: Указывает, что это HTML5 документ.

<head> и <title>: Определяет заголовок страницы.

<body>: Используется для отображения содержимого страницы.

Тег <video>: Здесь мы видим параметры, такие как controls, autoplay, и т.д., а также путь к видеофайлам формата .mp4 и .ogg.

Текст: Сообщение для пользователей, если их браузер не поддерживает тег <video>.

Динамическая загрузка видео

Помимо использования встроенных видеофайлов, можно загружать видео из других источников (например, YouTube или Vimeo) с помощью их API или встраивания iframe. Например:

<iframe width="640" height="360" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Заключение

Теперь вы знаете, как добавить видео на страницу HTML с помощью тега <video>. Этот подход является стандартным для современных веб-приложений.

Предыдущий вопрос

Как создать пример, который добавляет полосу прокрутки в HTML?

Следующий вопрос

Как выровнять текст в HTML?

Содержание:

Основной синтаксис

Параметры тега <video>

Пример видео на странице

Объяснение примера:

Динамическая загрузка видео

Заключение

Редактировать