Резервные варианты для видео/изображений

Резервные варианты для видео/изображений

От автора: Safari 11.1 представил странную, но очень полезную функцию, которая даёт возможность использовать источник видеоинформации в тэге img. Идея заключается в том, что он проделывает ту же работу, что и GIF (повторяющееся автопроигрывание), но с повышенной производительностью. Насколько повышенной? «в 20 раз быстрее и декодирование происходит в 7 раз быстрее, чем в GIF», — говорит Колин Бэнделл.

Но это поддерживают не все браузеры, так что для того, чтобы сделать резервный вариант, нужен элемент picture. Брюс Лоусон демонстрирует, насколько легко это сделать:

Симе Видас напоминает, что нужно обеспечить более широкую поддержку браузеров, используя тэг video.

Но, как заметил Бэнделл, преимущества производительности не связаны с видео, фактически, прелоадер не получает видео. Грустно, но video на данном этапе это всё, что мы можем, поскольку:

в Safari есть этот отвратительный баг с WebKit, который стал причиной того, что прелоадер загружает первый source, независимо от mimetype объявления. Основной загрузчик DOM находит ошибку и выбирает нужный элемент. Однако, потери уже неизбежны. Прелоадер растрачивает свои возможности раньше загрузки изображения и, плюс ко всему, загружает некорректную версию, проматывая байты. Хорошая новость заключается в том, что я исправил этот баг, и он должен пропасть в Safari TP 45.

Короче говоря, использование picture и source type для mime-type выбора не рекомендуется до тех пор, пока следующей версией Safari не начнут пользоваться 90%+ пользователей. Но всё же, это вам пригодится.

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: