Как вставить видео с помощью html на сайт

video html. Из чего состоит тег video, как вставить видео с помощью html на сайт. Автозапуск. Добавим картинку в тег poster.

Подробно о теге video

1. Пример использования тега video
2. Как запускать видео при загрузке страницы!?
3. Устанавливаем poster для тега video

Тег video - запуск

Для того, чтобы собрать тег video нам понадобится:

Тег video

<video></video>

Выставляем ширину width

Выставляем высоту height

Чтобы были кнопки контроля за видео - controls

Тег source :

<source></source>

Атрибут src - вставляем туда путь до файла видео.

Тип выставляем - "type="video/mp4"" - зависит от разрешения файла

Соберем весь код тега video

<video width="100%" height="auto" controls=""><source src="http://здесь путь до файла/prizrachnyiy_patrul.mp4" type="video/mp4"></video>

Пример использования тега video

Разметим данный код прямо здесь.

Результат вывода тега video на странице:




Как запускать видео при загрузке страницы!?

Для того, чтобы запустить видео при загрузке страницы, надо добавить "autoplay" во внутрь тега video

<video width="100%" height="auto" controls autoplay><source src="https://dwweb.ru/__a-data/video/prizrachnyiy_patrul.mp4" type="video/mp4"></video>

Смотрим результат запуска видео при загрузке.

Результат


Как сделать, чтобы видео нельзя было остановить.

Не знаю - зачем это надо!? Когда вы ограничиваете свободу пользователя - это означает, что количество отказов на этой тсранице/сайте превысит, что у вас по умолчанию

Ну в общем это не моё дело, предположим, что нам это нужно сделать...

Из кода убираем атрибут controls

<video width="100%" height="auto" autoplay><source src="https://dwweb.ru/__a-data/video/prizrachnyiy_patrul.mp4" type="video/mp4"></video>

Результат




Устанавливаем poster для тега video

Что такое атрибут poster в теге video!?

Атрибут "poster" в теге video отвечает за то, чтобы вывести картинку, вместо черного экрана.

Синтаксис атрибута poster для тега video

Во внутрь тега "video" устанавливается атрибут

poster="путь_до_картинки"

Картинка для poster тега video :



Соберем всё вместе:

Код плеера с атрибутом poster в теге video!

<video width="100%" height="auto" controls poster="//dwweb.ru/__img/pleer/ripd.png"><source src="https://dwweb.ru/__a-data/video/prizrachnyiy_patrul.mp4" type="video/mp4"></video>

Результат вывода тега video с poster-ом: