Как вставить видео с помощью 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-ом:

---

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

Теги:
тег videoвидео тег videoатрибуты тега videoтег video htmlтег video htmlкаковы функции тега videoтег video не работаетposter для тега videoатрибут poster тега videoтег video autoplayчто означает атрибут poster для тега videoтег video youtubeатрибуты тега video html