How to display an mp4 video located under /config/www in a dashboard | Home Assistant | Page 1

hybrid nacelle Aug 14, 2025, 2:05 PM

#

Hi,

I have a blink camera that downloads its motion clips to /config/www/blink/cam1/latest.mp4. I used the blink integration and an automation to do that.

I would like to display this video I a dashboard. I've tried a lot of approaches suggested by gemeni Pro but I can't get it to work.

What type of card is used for displaying an mp4 video?

I can see the video if I open a browser to https://<ip>:8123/local/blink/cam1/latest.mp4

Thanks

Note the video file is overwritten each time motion is detected. Ideally I would like the dashboard to also update its content when this happens

odd herald Aug 15, 2025, 9:29 AM

#

I found something in the forum that might be useful. Play MP4 files or stream HTTP in Lovelace.
I already had the lovelace-html-card installed so I only worked with the provided example.

hybrid nacelle Aug 15, 2025, 9:34 AM

#

Thanks! Looks promising

odd herald Aug 15, 2025, 9:34 AM

#

This is the code that I used in the card:```yaml
type: custom:html-card
content: >
<center><video width=450 height=260 controls loop autoplay muted
class="video-js" data-setup="{}">
<source src="/local/backgrounds/smoke/mixkit-white-smoke-with-black-background-1960.mp4"
type="video/mp4">
</video></center>

#

#

I used W3Schools to get a bit more info on the video tag such as loop, autoplay, and muted. tag_video.

hybrid nacelle Aug 15, 2025, 9:37 AM

#

Great find. I'll try it out. All my videos are 10s long and I may be able to reduce them further by lower their res. Thanks for all the pointers

odd herald Aug 15, 2025, 9:38 AM

#

Another thing to consider is the cache. I have a feeling that it might not load a newer file if an older one is still present...

#

But, I have an idea for that (now that I'm thinking about it) that I'm going to try. (It's a trick that I learned with the custom:button-card and getting it to force downloading a new image. Maybe it will work for this and a video.

hybrid nacelle Aug 15, 2025, 9:39 AM

#

Your example played fine

#

Yes, I saw the pinned thread about clearing the cache. Actually, I'm going saving the timestamp in the filename using a template and going to use a text helper to store the url and hopefully I can point the dashboard card to it

odd herald Aug 15, 2025, 9:45 AM

#

Yeah. I didn't even see it mentioned in the thread. Just something that came to mind. Just tried on my end by "simulating" a new file and it showed the old file. Tried adding an inline timestamp to the link but it did not work. I'm not giving up yet though. A couple more things to try. If this works, you won't need the helper.

hybrid nacelle Aug 15, 2025, 9:48 AM

#

Quick one, those 2 js files need to be uploaded into www/resources?

odd herald Aug 15, 2025, 10:05 AM

#

If they do, I did not do it. It may not be relevant any more. The original post is about 5 years old.

#

This works. It acts weird sometimes. But, it could be because I was moving and replacing files and refreshing and probably just making things mad.

`<source src="/local/backgrounds/smoke/1.mp4?[[sensor.date_time_iso]]" type="video/mp4">`
```I was trying my own method but couldn't get it working. Fix was mentioned in the last post (which I'm guessing you saw). This is what I get for not looking over the whole thread. (I don't remember if `sensor.date_time_iso` is set up by default or not. IIRC, I had to set it up manually years ago.)

hybrid nacelle Aug 15, 2025, 5:04 PM

#

Ok, got it working somewhat. I used following code

#

type: custom:html-template-card
title: Jardin
ignore_line_breaks: true
content: >
<center><video width=450 height=260 controls class="video-js"
data-setup="{}"> <source src="{{ states('input_text.blink_jardin_latest_url')
}}" type="video/mp4"> </video></center>

I used the html-template-card so I could control the url from the action through an input_text

#

input_text.blink_jardin_latest_url contains always the same value: https://192.168.68.95:8123/local/blink/jardin/jardin_latest.mp4

here is my action:

alias: Save Jardin Motion Video
description: ""
triggers:

trigger: state
entity_id:
- binary_sensor.jardin_motion
  to: "on"
  conditions: []
  actions:
action: input_text.set_value
metadata: {}
data:
value: "{{ now().strftime('%Y%m%d_%H%M%S') }}"
target:
entity_id:
- input_text.jardin_latest_detection_timestamp
action: blink.save_video
data:
filename: /config/www/blink/jardin/jardin_latest.mp4
target:
device_id:
- 090266b7d40013d1620ed0a12ab58881
action: shell_command.cp_file
data:
from: /config/www/blink/jardin/jardin_latest.mp4
to: >-
/config/www/blink/jardin/jardin_{{
states('input_text.jardin_latest_detection_timestamp') }}.mp4
enabled: true
action: input_text.set_value
metadata: {}
data:
value: https://192.168.68.95:8123/local/blink/jardin/jardin_latest.mp4
target:
entity_id:
- input_text.blink_jardin_latest_url
mode: single

THe cp_file command is defined in configuration.yaml:

shell_command:
cp_file: cp {{ from }} {{ to }}

hybrid nacelle Aug 15, 2025, 6:11 PM

#

binary_sensor.jardin_motion is provided by the blink integration. When it changes to detected I
save the latest detection video in www/blink/jardin/jardin_latest.mp4
and input_text.jardin_latest_detection_timestamp is set to the current datetime
then I use a shell_command to copy www/blink/jardin/jardin_latest.mp4 to www/blink/jardin/jardin_11112025_132917.mp4 so I can retain a copy to backup, using input_text.jardin_latest_detection_timestamp

To view the new video when a detection fires I need to refresh my chrome browser or switch from another application to it.

The companion app fails to display the video at all

#How to display an mp4 video located under /config/www in a dashboard