Как реализовать подсветку?

Question

[zhrjnnrdzjj]

Вокруг видео на ютуб есть красивая подсветка. Как это реализовано, и можно ли это сделать без JS?

Comments

[Алексей Уколов]

Где на вашем скриншоте "вокруг видео" и "подсветка"? Речь про фон под названием?

[zhrjnnrdzjj]

Алексей Уколов, Вокруг видео она есть, за кривой скриншот извиняюсь. Это именно подсветка, по крайней мере в ютубе опция включающая/отключающая её называется "фоновая подсветка".

[Сергей Еремин]

zhrjnnrdzjj, можно и на чистом SSl... это же, наверняка, box-shadow или :focus... которые можно менять через @keyframes...

Хотя, конечно, через JavaScript можно сделать подсветку более гибкой...

[zhrjnnrdzjj]

Сергей Еремин, Она меняется вслед за видео. Повторяет цвета, которые находятся с краю. Такое ни box-shadow-ом, ни keyframes-ами не реализовать.

[Сергей Еремин]

zhrjnnrdzjj, Если на своем хостинге держать видео (например, за периметром) то других вариантов нет. Нужно выпилить тулзу, которая при загрузке видео составит @keyframes под каждое видео, и подключать его при HTML-рендере странички с эти видео... А ТыТрубе, наверняка, так и делают (анализировать на лету видео -- очень накладно)

[zhrjnnrdzjj]

Сергей Еремин, Спасибо за ответ. Можно ли как-то

позаимствовать

своровать

эту тулзу у ютуба?

Also, что значит "за периметром"?

[Андрей]

Всё еще не догоняю что за подсветка. Как её включить?

[zhrjnnrdzjj]

Андрей, Открываете любое видео на ютубе, нажимаете на иконку шестерёнки(там где изменяется скорость и качество видео) там будет иконка в виде прямоугольника (экрана) и лучей от него. Если нажмёте, то вокруг видео фон ютуба будет меняться в зависимости от того, какие цвета преобладают по краям видео. Если не работает, поставьте тёмную тему в ютубе.

[Андрей]

Имеется ввиду Ambient mode, который доступен только в мобильном приложении? Он оказывается включен, но самого эффекта я не наблюдаю.

Собственно, английское название это ключ поиску нужного эффекта. https://github.com/NikxDa/ambient

[Андрей]

Если делать руками, то это копия текущего видео на слой ниже и увеличенная в масштабе с примененным блюром. Для оптимизации, снизу достаточно пускать low-res версию видео

[zhrjnnrdzjj]

У меня он называется background litning, и работает как на телефоне, так и на ПК. Возможно ютуб вводит свои обновления не для всех сразу, поэтому так.

[Сергей Еремин]

zhrjnnrdzjj, "за периметром" значит -- "в вашей (или другой") внутренней сети без выхода в большой интернет".

Думаю, "заимствовать" такую тулзу у гугл не получится. Но ее и сделать не сложно. У вас же должен быть какой-то пост-процессор, который преобразует загружаемое пользователем видео в совместимые форматы-кодеки? Добавить туда считывание ключевых кадров с определенным интервалом и построение анимации "подсветки" -- мелочь. Используется тот же ffmpeg, что и для преобразования кодеков.

Answer 1

[KERSOR]

Попробуй так

Черный квадрат это блок с картинкой
Красный квадрат это блок с focus или box shadow