给HA加个动态背景 跟随天气情况变化

jsfer888

效果如图：

                               
登录/注册后可看大图

具体方法：
HACS中搜索Lovelace Animated Background并安装，然后在HA的仪表盘的原始配置编辑器的最上面中添加下面的代码即可

animated_background:
  default_url: "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4"
  included_users:
    - Villhellm
  # This entity is just an example, use whatever entity you would like
  entity: "你的天气实体ID"
  state_url:
    '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"

复制代码

其中的示例视频可以自己调整成自己喜欢的视频。

neroxps

挺炫的~不过会不会导致页面加载速度比较慢?

感觉背景用 CSS 弄一个炫酷的就好 根据天气改变~

Solita

居然全部都是在线视频，这不得卡死

jsfer888

Solita 发表于 2021-4-26 14:53
居然全部都是在线视频，这不得卡死

也可以用本地的哈 实际用起来没感觉卡，加载蛮流畅的

seed12cs

炫酷的一匹！

peter5858

谢谢分享，很不错，有时间了搞下

lai95588

谢谢，楼主分享

jck773656345

有好素材分享吗

jjcs

怎么添加到前端ui、希望楼主指点一下

ilongjiang

添加后没有出现