Как вставить видео с помощью html на сайт
video html. Из чего состоит тег video, как вставить видео с помощью html на сайт. Автозапуск. Добавим картинку в тег poster.
Подробно о теге video
- Пример использования тега video
- Как запускать видео при загрузке страницы!?
- Устанавливаем poster для тега video
Тег video - запуск
Для того, чтобы собрать тег video нам понадобится:
Тег video
Выставляем ширину width
Выставляем высоту height
Чтобы были кнопки контроля за видео - controls
Тег source :
Атрибут src - вставляем туда путь до файла видео.
Тип выставляем - "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 тега 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>