I run this with backgrounds of all kinds of media files (.mp4, m4v, .mov, .png, .jpg, etc.) without issue. Nothing special in the configuration to suggest, other than perhaps make sure your media folder is in the “www” directory tree otherwise it will not be accessible to the frontend. (e.g. [homeassistant directory]/www/media). Mine is in “HomeAssistant/www/backgrounds” then the filespec in the configuration is “/local/backgrounds/[filename]”
Good luck.
I have figured part of this I created a /media folder with my clips in it through docker… it works,
what do you mean by filespec??
do you happen to know the exact file spec that is favorited by hass? I have a bunch of video loops ( I do some VJ work sometimes) and for some reason only some play… even if they are all h.264 .mp4 files… I am scratching my head over this right now
thanks
I don’t have any specific information on requirements. I have thrown a lot of stuff at it without issue. Mostly h.264, but also h.265 in several different container types as I mentioned. I haven’t checked them all, but most are 1920x1080 @ 30fps with a bit-rate <= 8Mbs.
If you figure out what it doesn’t like, please post back. I am always adding new stuff and would like to know that answer as well.
I havent quite figured it out just yet but i’m getting close to an answer, I’ll report back with a detailed report when I figure it out with enough certainty.
hey, have you “or anyone for that matter” figured out how to use a cssbanimated bg?
for example something simple like this: https://codepen.io/P1N2O/pen/pyBNzX?
For some reason i cant fill my whole tab “general” with a animated background. When i add more stuff it gets put on top, and the background gets pushed down. Anyone know why?
I have another tab"general", is it possible to not use the animated background there or di it have to be in every tabs?
How to i make the cards so i can see through them so the background gets showed?
Anyone?
Has anyone figured out if there is a way to resize or style (using CSS) the background image? I know the idea is to fill the entire card BUT I’ve noticed that the image is massively oversized in comparison to my cards I have.
I stil have the animated background on everything/every window.
Anyone knows how i can keep it just on my weather page?
@Villhellm do you know?
Would love to get this working but scratching my head over it.
Raw configuration editor code:
Java module loaded in Resources automatically from the HACS installation.
Where am I going wrong?
animated_background:
default_url: 'https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4'
included_users:
- chris
entity: weather.home
state_url: null
debug: true
sunny:
- 'https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4'
- 'https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4'
- 'https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4'
- 'https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4'
- 'https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4'
partlycloudy:
- 'https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4'
- 'https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4'
- 'https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4'
- 'https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4'
- 'https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4'
- 'https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4'
cloudy:
- 'https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4'
- 'https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4'
- 'https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4'
- 'https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4'
- 'https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4'
- 'https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4'
mostlycloudy:
- 'https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4'
- 'https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4'
- 'https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4'
clear-night:
- 'https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4'
- 'https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4'
- 'https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4'
- 'https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4'
fog:
- 'https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4'
- 'https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4'
rainy: 'https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4'
title: THE CUBE
views:
That’s sad wtf. 
I wanted to diversify the wallpaper change. It’s not enough for me that the wallpaper change is done at sunset or sunrise. I wanted them to change by the days of the week and by sunrise and sunset. I could not cram two entities: the day of the week and the sunrise or sunset, I had to create a sensor of the day of the week and the sun, thanks to which I was able to realize my wish.
Creating a sensor A sensor of the day of the week and the sun
# Сенсор дня недели
sensor:
- platform: template
sensors:
dayoftheweek:
value_template: "{{ ['Monday','Tuesday','Wednesday', 'Thursday','Friday', 'Saturday', 'Sunday'][now().weekday()] }}"
entity_id: sensor.time
icon_template: mdi:calendar-month
# Day of the week and sun sensor
- platform: template
sensors:
day_week_and_sun:
friendly_name: "Day of the week and sun sensor"
value_template: >
{% set sunrise = is_state('sun.sun','above_horizon') %}
{% set sunset = is_state('sun.sun','below_horizon') %}
{% if sunrise %}
{{ states.sensor.dayoftheweek.state }}. Sunrise
{% elif sunset %}
{{ states.sensor.dayoftheweek.state }}. Sunset
{% endif %}
icon_template: >-
{% if is_state('sun.sun','above_horizon') %}
mdi:sunrise
{% elif is_state('sun.sun','below_horizon') %}
mdi:sunset
{% endif %}
We insert this code into the header and, if desired, on any of the days, we prescribe the paths to the video files and expand them to the desired number
animated_background:
default_url: /local/animated-background/day/01.mp4
included_users:
- users
entity: sensor.day_week_and_sun
state_url:
Monday. Sunrise:
- /local/animated-background/day/Switzerland_01.mp4
- /local/animated-background/day/Switzerland_02.mp4
Monday. Sunset:
- /local/animated-background/night/Moon and lake.mp4
- /local/animated-background/night/Mountain and lake.mp4
Tuesday. Sunrise:
- /local/animated-background/day/Switzerland_03.mp4
- /local/animated-background/day/Switzerland_04.mp4
Tuesday. Sunset:
- /local/animated-background/night/03.mp4
- /local/animated-background/night/04.mp4
Wednesday. Sunrise:
- /local/animated-background/day/Iceland_01.mp4
- /local/animated-background/day/Iceland_02.mp4
Wednesday. Sunset:
- /local/animated-background/night/Space_01.mp4
- /local/animated-background/night/Space_02.mp4
Thursday. Sunrise:
- /local/animated-background/day/Iceland_03.mp4
- /local/animated-background/day/Iceland_04.mp4
Thursday. Sunset:
- /local/animated-background/night/Space_03.mp4
- /local/animated-background/night/Space_04.mp4
Friday. Sunrise:
- /local/animated-background/day/Iceland_05.mp4
- /local/animated-background/day/Iceland_06.mp4
Friday. Sunset:
- /local/animated-background/night/Space_05.mp4
- /local/animated-background/night/Space_06.mp4
Saturday. Sunrise:
- /local/animated-background/day/Switzerland_05.mp4
- /local/animated-background/day/Switzerland_06.mp4
Saturday. Sunset:
- /local/animated-background/night/Space_07.mp4
- /local/animated-background/night/Space_08.mp4
Sunday. Sunrise:
- /local/animated-background/day/Switzerland_07.mp4
- /local/animated-background/day/Switzerland_08.mp4
Sunday. Sunset:
- /local/animated-background/night/Space_03.mp4
- /local/animated-background/night/Space_02.mp4
Мне захотелось разнообразить смену обоев. Мне не достаточно, что смена обоев делается по закату или восходу солнца. Захотелось, чтобы обои менялись по дням недели и по восходу и закату солнца. У меня не получилось запихнуть две сущности: день недели и восход или закат солнца, пришлось создать сенсор дня недели и солнца, благодаря которому я смог реализовать свою хотелку.
Создаем сенсор Сенсор дня недели и солнца
# Сенсор дня недели
sensor:
- platform: template
sensors:
dayoftheweek:
value_template: "{{ ['Понедельник','Вторник','Среда','Четверг','Пятница','Суббота','Воскресенье'][now().weekday()] }}"
entity_id: sensor.time
icon_template: mdi:calendar-month
# Сенсор дня недели и солнца
- platform: template
sensors:
day_week_and_sun:
friendly_name: "Сенсор дня недели и солнца"
value_template: >
{% set sunrise = is_state('sun.sun','above_horizon') %}
{% set sunset = is_state('sun.sun','below_horizon') %}
{% if sunrise %}
{{ states.sensor.dayoftheweek.state }}. Восход солнца
{% elif sunset %}
{{ states.sensor.dayoftheweek.state }}. Закат солнца
{% endif %}
icon_template: >-
{% if is_state('sun.sun','above_horizon') %}
mdi:sunrise
{% elif is_state('sun.sun','below_horizon') %}
mdi:sunset
{% endif %}
В заголовок вставляем этот код и по желанию, в любой из дней, прописываем пути к видеофайлам и расширяем до желаемого количества
animated_background:
default_url: /local/animated-background/day/01.mp4
included_users:
- users
entity: sensor.day_week_and_sun
state_url:
Понедельник. Восход солнца:
- /local/animated-background/day/Switzerland_01.mp4
- /local/animated-background/day/Switzerland_02.mp4
Понедельник. Закат солнца:
- /local/animated-background/night/Moon and lake.mp4
- /local/animated-background/night/Mountain and lake.mp4
Вторник. Восход солнца:
- /local/animated-background/day/Switzerland_03.mp4
- /local/animated-background/day/Switzerland_04.mp4
Вторник. Закат солнца:
- /local/animated-background/night/03.mp4
- /local/animated-background/night/04.mp4
Среда. Восход солнца:
- /local/animated-background/day/Iceland_01.mp4
- /local/animated-background/day/Iceland_02.mp4
Среда. Закат солнца:
- /local/animated-background/night/Space_01.mp4
- /local/animated-background/night/Space_02.mp4
Четверг. Восход солнца:
- /local/animated-background/day/Iceland_03.mp4
- /local/animated-background/day/Iceland_04.mp4
Четверг. Закат солнца:
- /local/animated-background/night/Space_03.mp4
- /local/animated-background/night/Space_04.mp4
Пятница. Восход солнца:
- /local/animated-background/day/Iceland_05.mp4
- /local/animated-background/day/Iceland_06.mp4
Пятница. Закат солнца:
- /local/animated-background/night/Space_05.mp4
- /local/animated-background/night/Space_06.mp4
Суббота. Восход солнца:
- /local/animated-background/day/Switzerland_05.mp4
- /local/animated-background/day/Switzerland_06.mp4
Суббота. Закат солнца:
- /local/animated-background/night/Space_07.mp4
- /local/animated-background/night/Space_08.mp4
Воскресенье. Восход солнца:
- /local/animated-background/day/Switzerland_07.mp4
- /local/animated-background/day/Switzerland_08.mp4
Воскресенье. Закат солнца:
- /local/animated-background/night/Space_03.mp4
- /local/animated-background/night/Space_02.mp4
Tell me, how can I play videos from external sources, for example from a NAS or from google disk? If you run it all from the browser, it works, but it doesn’t work with the Home Assistant
Added to the config to display folders in media animated-background and folders are displayed there
homeassistant:
media_dirs:
local: /media
wallpaper: /media/wallpaper
background: /media/animated-background
http:
cors_allowed_origins:
- https://google.com
- \\192.168.1.200\video\
- https://drive.google.com
I try to specify different links, the wallpaper does not work on the video
Of all the ways only works
/local/animated-background/day/Norway/Norway_11.mp4
or only these links work
Created an html file norway.html, where I inserted the code and if you run it, it opens in the browser, but does not work in Home Assistant
<center><video width=auto height=auto controls class="video-js" data-setup="{}">
<source src="//192.168.1.200/video/HomeAssistant/AnimatedLovelaceBackground/day/Norway/Norway_01.mp4" type="video/mp4">
</video></center>
Photos can be uploaded for some reason, but mp4 videos don’t work. Is there really no way to make the video work in lovelace?
Скажите, как можно воспроизвести видео с внешних источников, например с NAS или c google disk? Если это все запускать с браузера, то работает, а вот с Home Assistant это не работает
Добавил в конфиг вывести папки в media animated-background и папки там отображаются
homeassistant:
media_dirs:
local: /media
wallpaper: /media/wallpaper
background: /media/animated-background
http:
cors_allowed_origins:
- https://google.com
- \\192.168.1.200\video\
- https://drive.google.com
Пробую указать разные ссылки, но видео обои не работают
Из всех способов работает только
/local/animated-background/day/Norway/Norway_11.mp4
или работают только эти ссылки
Создал html файл norway.html, куда вставил код и если его запустить, то он открывается в браузере, но не работает в Home Assistant
<center><video width=auto height=auto controls class="video-js" data-setup="{}">
<source src="//192.168.1.200/video/HomeAssistant/AnimatedLovelaceBackground/day/Norway/Norway_01.mp4" type="video/mp4">
</video></center>
Фото можно почему-то загружать, а видео mp4 не работает. Неужели видео никак не получится заставить работать в lovelace?
Hi there. Is that topic stil alive?
I can’t get that animated background working by states for some reason. I only can see the picture I use as default url. It hasn’t change by weather, so I created sensor to test it and it also doesn’t change background according its states. The default background and other futures like hiding background on other views are working though, so what could be the problem?
Did you ever find another source for url’s directly to the video files (ie: .mp4)?
No. I just ended up download video files from the Pexels website.
Great job but what if instead of the days of the week it was the weather? that is, change the sunrise and sunset sound based on the weather! how should it be?
Add the weather to the sensor and we get the sensor status of three entities, the Day of the week, sunrise or sunset and the weather status, for example Friday. Sunrise. cloudy
sensor:
- platform: template
sensors:
dayoftheweek:
value_template: "{{ ['Monday','Tuesday','Wednesday', 'Thursday','Friday', 'Saturday', 'Sunday'][now().weekday()] }}"
entity_id: sensor.time
icon_template: mdi:calendar-month
# Day of the week and sun sensor
- platform: template
sensors:
day_week_and_sun:
friendly_name: "Day of the week and sun sensor"
value_template: >
{% set weather = states('sensor.weather.home_assistant') %}
{% set sunrise = is_state('sun.sun','above_horizon') %}
{% set sunset = is_state('sun.sun','below_horizon') %}
{% if sunrise %}
{{ states.sensor.dayoftheweek.state }}. Sunrise. {{ states("weather.home_assistant")}}
{% elif sunset %}
{{ states.sensor.dayoftheweek.state }}. Sunset. {{ states("weather.home_assistant")}}
{% endif %}
icon_template: >-
{% if is_state('sun.sun','above_horizon') %}
mdi:sunrise
{% elif is_state('sun.sun','below_horizon') %}
mdi:sunset
{% endif %}
Specify the days of the week, sunset or sunrise and the weather condition, then specify the paths to the photo or video
animated_background:
default_url: /local/animated-background/day/01.mp4
included_users:
- users
entity: sensor.day_week_and_sun
state_url:
Monday. Sunrise. cloudy:
- /local/animated-background/day/Switzerland_01.mp4
- /local/animated-background/day/Switzerland_02.mp4
Monday. Sunrise. partlycloudy:
- /local/animated-background/day/Switzerland_01.mp4
- /local/animated-background/day/Switzerland_02.mp4
Monday. Sunrise. clear:
- /local/animated-background/day/Switzerland_01.mp4
- /local/animated-background/day/Switzerland_02.mp4
Monday. Sunset. cloudy:
- /local/animated-background/night/Moon and lake.mp4
- /local/animated-background/night/Mountain and lake.mp4
Monday. Sunset. partlycloudy:
- /local/animated-background/night/Moon and lake.mp4
- /local/animated-background/night/Mountain and lake.mp4
Monday. Sunset. clear:
- /local/animated-background/night/Moon and lake.mp4
- /local/animated-background/night/Mountain and lake.mp4
did you ever found the solution how to “link” the Enabled property to for example an input_boolean selector of HA ?
I tried :
enabled: input_boolean.animated_backgrounds
but it does not detect as true
Is there any syntax to designate a condition for the state_url that it contains a state. i.e. contains ‘cloudy’
Appreciate any help.