Атрибут preload тега <video> — вантажити наперед

Атрибут preload визначає, чи має відео бути завантажено одразу при завантаженні сторінки.

Атрибут preload дозволяє автору забезпечити підказку для браузера, що відео потрібно завантажити, що призведе до кращого користувацького досвіду.

автор: с3с

Загальний опис

автор: NagarD

Нотатка: Атрибут preload ігнорується, якщо атрибут autoplay встановлений.
автор: с3с

Синтаксис

<video preload="auto|metadata|none">

Атрибут preload може отримувати 3 значень:

auto

Автор вважає, що браузер повинен завантажити все відео при завантаженні сторінки.

автор: с3с

metadata

Автор вважає, що браузер повинен завантажувати тільки метадані при завантаженні сторінки.

автор: с3с

none

Автор не вважає, що браузеру слід завантажувати відео при завантаженні сторінки.

автор: с3с

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	3	4	3.1	15	12	9

Підтримка: мобільні переглядачі
Переглядач
	4.4	18	4	3

Приклади

+ запропонувати свій приклад у пісочниці

<video controls preload="none" width="320" height="180" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
    Ваш браузер не підтримує відео.
</video>

автор: с3с

Сам preload очима не видно — він живе у вкладці «Мережа». Зате завжди видно його наслідок: preload="none" без poster лишає порожній прямокутник, бо перший кадр браузер не завантажував. Праворуч той самий елемент із постером (тут — вбудована картинка, без зовнішніх файлів).

HTML

<div class="row">
    <figure>
        <video controls preload="none" width="280" height="158"></video>
        <figcaption>preload="none" без poster</figcaption>
    </figure>

    <figure>
        <video controls preload="none" width="280" height="158"
               poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='158'%3E%3Crect%20width='280'%20height='158'%20fill='%230d3b4f'/%3E%3Ccircle%20cx='140'%20cy='79'%20r='34'%20fill='%23ffffff'%20opacity='0.9'/%3E%3Cpolygon%20points='130%2C60%20162%2C79%20130%2C98'%20fill='%230d3b4f'/%3E%3C/svg%3E"></video>
        <figcaption>preload="none" + poster</figcaption>
    </figure>
</div>

CSS

.row { display: flex; gap: 18px; flex-wrap: wrap; }
figure { margin: 0; }
video { display: block; background: #000; border-radius: 4px; }
figcaption { font-size: 13px; color: #555; padding-top: 6px; }

автор: NagarD

Різниця між HTML 4.01 та HTML5

Атрибут preload з'явився тільки у HTML5.

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Ваше ім'я Коментар

Як форматувати текст?

Пишемо	Виходить
`важливо` `акцент` `~~застаріле~~`	Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
`## Як працює каскад` `### Порядок оголошень`	Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
`[[css/property/color]]`	Посилання на сторінку довідника. Наберіть `[[` — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
`[[!sandbox/S0oh1hBm]]`	Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком `!`: наберіть `[[!` і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
`[MDN](https://developer.mozilla.org)`	Посилання на чужий сайт.
`![Схема каскаду](https://site.com/схема.png)`	Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру	Код усередині речення.
```css `.card { display: grid }` ```	Код блоком. Мова після трьох лапок вмикає підсвітку.
`- Походження` `1. Походження`	Перелік: маркований і нумерований.
`- [ ] дописати приклади` `- [x] перевірити в Firefox`	Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
`> Порядок важить лише за рівної ваги.`	Цитата на всю ширину абзацу.
`Специфічність` `: вага селектора; більша перемагає`	Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
`Каскад має три критерії[^1]` `[^1]: Походження, специфічність, порядок.`	Виноска: номер у тексті, примітка внизу сторінки. Без згадки `[^1]` у тексті примітка не з'явиться.
`Відповідь: \|\|сорок два\|\|`	Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
`\|\| Показати рішення` Задайте контейнеру `display: grid`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.