Атрибут / параметр preload (от англ. «preload» ‒ «предварительная загрузка») указывает браузеру подсказку о желательном варианте предварительной загрузки видео файла.
Условия использования
Значение атрибута «preload» может быть переопределено атрибутом «autoplay» (так как при автоматическом воспроизведении файла начинается постепенная загрузка данных всего аудио файла, независимо от значения заданного «preload» атрибуту).
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Верс.
Раздел
HTML
2.0
—
3.2
—
4.01
—
5.0
4.7.10.5 Loading the media resource The preload attribute…
5.1
4.7.14.5. Loading the media resource The preload attribute…
XHTML
1.0
—
1.1
—
Значения
auto
Указывает на то, что браузер может самостоятельно расставлять приоритеты в области предварительной загрузки файла . В данном случае браузер может поставить потребности пользователя на первое место, но без риска для сервера. При этом предварительная загрузка файла может происходить вплоть до полной загрузки указанного ресурса.
metadata
Указывает, что необходимо произвести предварительную загрузку метаданных файла (размеры, список дорожек, продолжительность, и т.д.) и при необходимости загрузить несколько первых фрагментов видео файла.
none
Отменяет предварительную загрузку файла. Данное значение помогает серверу минимизировать ненужный трафик, но при этом оно может увеличить ожидание перед началом воспроизведения видео файла (потраченное время ожидания уйдёт на загрузку определённого объёма файла достаточного для начала воспроизведения).
Значение по умолчанию: зависит от агента пользователя.
Пример использования
Листинг кода
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Параметр preload (Элемент video)</title> </head> <body> <h2>Пример использования атрибута «preload»</h2> <video controls=»controls» preload=»none»> <source src=»/examples/multimedia/video/The_New_CLS. mp4″ type=»video/mp4″> <source src=»/examples/multimedia/video/The_New_CLS.webm» type=»video/webm»> <source src=»/examples/multimedia/video/The_New_CLS.ogv» type=»video/ogg»> <p>Ваш веб-браузер не поддерживает элемент «video».</p> </video> </body> </html>
Параметр preload (Элемент video)
Что на самом деле делает атрибут preload в элементе видео HTML? – clubmate.fi
Что на самом деле делает атрибут preload в элементе видео HTML?
В файле: Разметка — С тегами: lazyload, media, HTML
Атрибут preload элемента html video может иметь три значения: метаданные , auto или none . . Этот пост объясняет, что они делают и какой из них использовать.
Как элемент видео загружает свое содержимое?
Содержимое видеоэлементов html по умолчанию «лениво загружается», означает, что не все данные видео передаются, пока пользователь не нажмет кнопку воспроизведения . Таким образом, добавление больших видео на сайт не замедлит начальную загрузку страницы, если атрибут предварительной загрузки настроен правильно, то есть.
Возможно, вы знаете об относительно новом html-атрибуте loading , для которого можно установить значение lazy: loading='lazy' . Это относится к img и теги iframe , , но не видео , потому что видео не блокируется, если вы используете preload="metadata" или preload="none" .
Метаданные видео
Видео должны загрузить гораздо больше метаданных, чем изображения, прежде чем они смогут начать воспроизведение, потому что видео на намного более сложных существ. Браузеры должны частично прочитать видео, чтобы получить доступ к его размерам, размеру, длине, замещающему изображению (первый кадр видео) или постерному изображению и так далее.
Тестовое видео
Я специально выбрал короткое тестовое видео: 9MB . mov , чтобы лучше увидеть, как на самом деле происходит процесс загрузки.
Ниже приведен пример видео с отключенной предварительной загрузкой (потому что оно такое большое):
Видео размером 9 МБ без предварительной загрузки. @doggface208
💁♂️ Это видео, вероятно, можно было бы сжать до ~ 500 КБ .mp4 без существенной потери качества.
Метаданные предварительной загрузки
Этот снимок экрана (рис. 1) сделан сразу после загрузки страницы, до нажатия кнопки воспроизведения. На вкладке «Сеть» вы увидите, что для показа этого предварительного просмотра видео потребовалось 919 КБ данных ( 9 МБ исходного размера). Этот 919 КБ включает как минимум:
Размеры
Длина
Вес
Изображение-заполнитель
Крошечный фрагмент фактического видео
Чем меньше исходное видео, тем оно меньше.
fig 1
Автоматическая предварительная загрузка
Это настройка по умолчанию в Chrome, она может отличаться в разных браузерах, так что не верьте этому. Он загрузит метаданные и видео так же, как если бы была нажата кнопка воспроизведения.
Я бы избегал этого параметра , потому что он просто тратит пропускную способность на видео, которое пользователь может никогда не воспроизвести.
Вы можете видеть, что размер запроса был 5,4 МБ (рис. 2), из общего числа 9 МБ индикатор загрузки видео составляет около 3/4 дюйма. mov» />
Никаких запросов не делается и ничего не загружается. Браузеры показывают пустой видеоплеер стандартного размера (рис. 3). И когда нажимается воспроизведение, видео меняет размер, вызывая уродливые скачки контента.
рис. 3
Это быстрый способ загрузки видео, при начальной загрузке страницы запрос не делается, но выглядит некрасиво. Если вы уже знаете размер видео, вы можете создать заполнитель самостоятельно, используя заполнитель изображения низкого качества (LQIP) или сплошной цвет в зависимости от вашего дизайна.
Как насчет автовоспроизведения с предварительной загрузкой?
Если для autoplay установлено значение true, предварительная загрузка игнорируется, тогда браузеры, конечно же, должны начать загрузку видео немедленно.
Какое значение предварительной нагрузки тогда следует использовать?
Если вам просто нужно что-то простое, то preload="metadata" будет самым простым, красивым и быстрым. Также рекомендуется спецификацией . Но это добавляет запрос в начале, замедляя начальную загрузку страницы. Если вы уже знаете размер видео, вы можете установить preload="none" и создайте заполнитель самостоятельно.
Демонстрация
Вот демонстрация, это просто приложение CodeSandbox React по умолчанию:
Выводы
preload="metadata" : легко настроить и достаточно хорошо.
preload="auto" : не очень рекомендуется, если в этом нет необходимости.
preload="none" : самый быстрый, но большинство работает, чтобы он выглядел хорошо.
Здесь будут комментарии, но система комментирования еще не готова, извините. Напишите мне в Твиттере @interne, если хотите внести поправку и т. д.
производительность. Загружает ли атрибут предварительной загрузки метаданных в html 5 все видео?
спросил
Изменено
2 года назад
Просмотрено
19 тысяч раз
При использовании тега html 5 video атрибут preload="metadata" уже загружает видео? Меня немного беспокоит проблема с производительностью при загрузке страницы, если размер видео превышает 100 МБ.
Замечаю, что при наличии этого атрибута загружается изображение самой первой секунды видео, но точно не воспроизводит видео.
<элементы управления видео preload="metadata">
Ваш браузер не поддерживает видео тег.
HTML
производительность
видео
загрузка страницы
3
Атрибут preload дает браузеру подсказку о том, стоит ли оптимистично загружать само видео или его метаданные.
Метаданные не загружают сразу все видео, только метаданные.
Спецификация советует установить метаданные.
Вот список всех доступных опций:
none — намекает браузеру, что пользователь, скорее всего, не будет смотреть
видео, или желательно свести к минимуму ненужный трафик.
метаданных —
Подсказывает браузеру, что пользователю видео не нужно,
но это получение его метаданных (размеры, первый кадр, список треков,
продолжительность и так далее) желательно.
auto — Подсказывает браузеру, что
оптимистичная загрузка всего видео считается желательной.
Согласно спецификации, он не должен загружать все видео целиком, а только метаданные, но браузеры WebKit, по-видимому, предварительно загружают все видео перед метаданными.
Надеюсь, это поможет.
См. также: Проблема с получением продолжительности видео HTML5
Это зависит от браузера и устройства.
Chrome буферизует 25 секунд видео на компьютере, но не на iOS или Android.
Это означает, что на мобильных устройствах могут быть задержки запуска воспроизведения, которых нет на настольных компьютерах: https://developers.google.com/web/fundamentals/media/video#preload
Возможно, я поставлю свой 2 цента…
Решение, которое всегда работает для меня, состоит в том, чтобы установить «автовоспроизведение» «приглушенные» параметры в HTML-теге VIDEO.
В данном случае браузер может поставить потребности пользователя на первое место, но без риска для сервера. При этом предварительная загрузка файла может происходить вплоть до полной загрузки указанного ресурса.
В данном случае браузер может поставить потребности пользователя на первое место, но без риска для сервера. При этом предварительная загрузка файла может происходить вплоть до полной загрузки указанного ресурса.
mp4″ type=»video/mp4″>
Таким образом, добавление больших видео на сайт не замедлит начальную загрузку страницы, если атрибут предварительной загрузки настроен правильно, то есть.
mov 
Если вы уже знаете размер видео, вы можете создать заполнитель самостоятельно, используя заполнитель изображения низкого качества (LQIP) или сплошной цвет в зависимости от вашего дизайна.
