- Videos in html format
- Кратко
- Пример
- Как понять
- Как пишется
- Атрибуты
- Параметры воспроизведения и элементы управления
- Размеры и постер
- Обработка данных
- Подсказки
- Ещё пример
- На практике
- Дока Дог советует
- Алёна Батицкая советует
- HTML Video
- Example
- The HTML Element
- Example
- How it Works
- HTML Autoplay
- Example
- Example
- Browser Support
- HTML Video Formats
- HTML Video — Media Types
- HTML Video — Methods, Properties, and Events
- Example: Using JavaScript
- HTML Video Tags
- HTML Tag
- Tips and Notes
- Browser Support
- Optional Attributes
Videos in html format
Нативный способ вставить видео на страницу сайта. В статье найдутся все нужные атрибуты, а также способы подключения видео в разных форматах.
Кратко
Скопировать ссылку «Кратко» Скопировано
Встраивает видео на страницу 📺
Пример
Скопировать ссылку «Пример» Скопировано
Одно видео в двух разных форматах и текст, который появится, если оба формата не поддерживаются браузером:
Ваш браузер не поддерживает встроенные видео :(
video controls width="250"> source src="flower.webm" type="video/webm"> source src="flower.mp4" type="video/mp4"> Ваш браузер не поддерживает встроенные видео :( video>
Как понять
Скопировать ссылку «Как понять» Скопировано
Тег добавляет на страницу видеоплеер, который может воспроизвести одно или несколько видео.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Тег всегда закрывается при помощи парного тега < / video>.
Адрес видео задаётся внутри контейнера через тег или с помощью атрибута src .
Некоторые браузеры могут не поддерживать какой-то формат. Поэтому в можно добавить один и тот же файл в нескольких форматах. Это будет выглядеть так:
source src="my-video.mp4" type="video/mp4"> source src="my-video.webm" type="video/webm">
На случай, если браузер не поддерживает встроенные видео, можно вставить между тегами текст или картинку:
Ваш браузер не поддерживает встроенные видео. Попробуйте скачать его по этой ссылке.
video controls> source src="my-video.mp4" type="video/mp4"> source src="my-video.webm" type="video/webm"> p> Ваш браузер не поддерживает встроенные видео. Попробуйте скачать его по a href="my-video.mp4">этой ссылкеa>. p> video>
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
С помощью атрибутов мы можем настроить кнопки управления, зацикливание видео и другие параметры.
В атрибуте src указывается ссылка на видеофайл. Ещё ссылку можно задать через тег .
Параметры воспроизведения и элементы управления
Скопировать ссылку «Параметры воспроизведения и элементы управления» Скопировано
- controls — добавляет стандартные элементы управления видеоплеером: кнопку воспроизведения и паузы, полосу прокрутки, уровень громкости, полноэкранный режим и другие элементы, в зависимости от браузера.
- autoplay — видео воспроизводится автоматически после загрузки страницы. Используйте автоматическое проигрывание с умом: мало кому нравится, когда что-то начинает само играть.
- loop — зацикливает воспроизведение видео, так что оно снова начинается каждый раз после завершения.
- muted — видео начнёт играть без звука, пока его не включит пользователь.
- playsinline — контролирует воспроизведение видео на мобильных устройствах. Обычно видео открывается в полноэкранном режиме, но этот атрибут позволит запретить такое поведение, оставив видео в рамках элемента.
Размеры и постер
Скопировать ссылку «Размеры и постер» Скопировано
- width — ширина видео в пикселях.
- height — высота видеоплеера в пикселях.
- poster — URL-адрес картинки, которая будет показываться, пока видео не загрузится. По сути, это обложка ролика. Если её не будет, то, пока не загрузится первый кадр, на месте видео пользователь увидит чёрный прямоугольник.
Обработка данных
Скопировать ссылку «Обработка данных» Скопировано
- buffered — этот атрибут собирает информацию о том, какие минуты видео уже загрузились.
- preload — подсказывает браузеру, нужно ли загружать видео или информацию о нём сразу со страницей. Без этого атрибута предварительная загрузка видео будет зависеть от настроек конкретного браузера. Есть несколько значений:
- none — видео не загружается предварительно.
- metadata — загружается только информация о файле, например, размер, продолжительность или обложка. Используйте этот параметр, чтобы не загружать видео, пока пользователь не захочет его посмотреть.
- auto — видеофайл загружается со страницей, чтобы пользователь мог сразу начать смотреть его. Если не указывать никакое значение preload , то атрибут будет работать как auto . Учтите, что если стоит атрибут autoplay , то preload не работает.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Если не указать атрибут controls , то браузер не будет показывать стандартные элементы управления видеоплеером. Создать свои элементы управления можно с помощью JavaScript.
💡 Используйте CSS-свойство object — position , чтобы настроить расположение видео внутри элемента, а также object — fit , чтобы настроить размер видео относительно элемента.
💡 Атрибут preload носит рекомендательный характер для браузера: будет ли видео предварительно загружено, зависит от настроек конкретного браузера.
💡 Высоту height и ширину width видеоплеера лучше задавать через CSS. По умолчанию эти параметры будут такими, как у видео, которое вы встраиваете.
Ещё пример
Скопировать ссылку «Ещё пример» Скопировано
Вот простой пример, где у видео есть обложка poster , которую покажут сразу, и текст на случай, если видео не загрузится.
Простите, но ваш браузер не поддерживает встроенные видео. Попробуйте скачать видео по этой ссылке и открыть его на своём устройстве.
video controls src="frontend.mp4" poster="frontend.jpg" width="580"> Простите, но ваш браузер не поддерживает встроенные видео. Попробуйте скачать видео a href="frontend.mp4">по этой ссылкеa> и открыть его на своём устройстве. video>
А теперь добавим несколько форматов одного видео. Браузер попробует воспроизвести первый из поддерживаемых им форматов: сначала попробует проиграть MP4, потом OGG, затем AVI. Если встроенные видео вообще не поддерживаются, то появится соответствующее сообщение:
Ваш браузер не поддерживает встроенные видео.
video width="580" controls poster="cinema-vs-reality.jpg"> source src="cinema-vs-reality.mp4" type="video/mp4"> source src="cinema-vs-reality.ogv" type="video/ogg"> source src="cinema-vs-reality.avi" type="video/avi"> Ваш браузер не поддерживает встроенные видео. video>
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
🛠 Не забывайте добавлять хотя бы два дублирующих видео в формате WebM и MP4. Суть в том, что WebM очень круто сжимает ролики, и если браузер поддерживает формат, то видео загрузится сильно быстрее и не расходует трафик. Ну а если вы используете старый браузер без поддержки WebM, то откроется обычный MP4 и сработает как обычно.
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 На некоторых сайтах можно встретить фоновое видео вместо статичной картинки. Выглядит круто, а делается очень просто:
Банановый эквивалент
Мы живем в радиоактивном мире. Это нормально?
video autoplay muted loop class="background-video"> source src="storm.mp4" type="video/mp4"> video> div class="content"> h1>Банановый эквивалентh1> p>Мы живем в радиоактивном мире. Это нормально?p> div>
.background-video position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%;> .content position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px;>
.background-video position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; > .content position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px; >
Обратите внимание на пару важных моментов, чтобы видео работало:
- Используйте для фонового видео форматы AV1 или WebM. Это современные форматы кодирования, которые позволяют экономить на размере видео. Это ускорит загрузку страницы и доставит меньше раздражения пользователю. Проверяйте поддержку форматов на сайте Can I use.
- Чтобы не надоедать пользователю навязчивыми рекламными роликами, браузеры придерживаются политики, что в автоматическом режиме могут проигрываться только видео с атрибутом muted . Обязательно добавьте этот атрибут для фонового видео.
HTML Video
The HTML element is used to show a video on a web page.
Example
The HTML Element
To show a video in HTML, use the element:
Example
How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.
The element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
The text between the tags will only be displayed in browsers that do not support the
HTML Autoplay
To start a video automatically, use the autoplay attribute:
Example
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add muted after autoplay to let your video start playing automatically (but muted):
Example
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
Element 4.0 9.0 3.5 4.0 10.5 HTML Video Formats
There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:
Browser MP4 WebM Ogg Edge YES YES YES Chrome YES YES YES Firefox YES YES YES Safari YES YES NO Opera YES YES YES HTML Video — Media Types
HTML Video — Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the element.
This allows you to load, play, and pause videos, as well as setting duration and volume.
There are also DOM events that can notify you when a video begins to play, is paused, etc.
Example: Using JavaScript
Play/Pause Big Small Normal
Your browser does not support HTML5 video.
For a full DOM reference, go to our HTML Audio/Video DOM Reference.
HTML Video Tags
Tag Description Defines a video or movie Defines multiple media resources for media elements, such as and Defines text tracks in media players HTML Tag
The tag is used to embed video content in a document, such as a movie clip or other video streams.
The text between the tags will only be displayed in browsers that do not support the
There are three supported video formats in HTML: MP4, WebM, and OGG.
Browser MP4 WebM Ogg Edge YES YES YES Chrome YES YES YES Firefox YES YES YES Safari YES YES NO Opera YES YES YES Tips and Notes
Tip: For audio files, look at the tag.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
Element 4.0 9.0 3.5 3.1 11.5 Optional Attributes
Attribute Value Description autoplay autoplay Specifies that the video will start playing as soon as it is ready controls controls Specifies that video controls should be displayed (such as a play/pause button etc). height pixels Sets the height of the video player loop loop Specifies that the video will start over again, every time it is finished muted muted Specifies that the audio output of the video should be muted poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button preload auto
metadata
noneSpecifies if and how the author thinks the video should be loaded when the page loads src URL Specifies the URL of the video file width pixels Sets the width of the video player