Lovelace- show mp4

Configuration Frontend
1

Hi,

How can I show this https://www.dwd.de/DWD/wetter/wv_allg/europa/film/vhs_Europa_Wind_360.mp4 in a Lovelace card?

tried the iframe but I cant get the video to appear?

2

There’s a card for that…

3

yes thanks you,

this is to show the mp4 on the background to the HA frontend though, not on a card?

4

Correct it does it on the background.

5

lol. so that’s not the answer to my question…
not an easy thing to find, Lovelace or regular HA.

tried it as a camera also, but couldn’t get it to show

6

That link is for a lovelace card that changes the background in lovelace…

Example:

7

How can I show a MP4 file in a card?

https://www.idokep.hu/radar/radar.mp4

8

This is how I would do it:

Configuration.yaml
camera:

Lovelace UI: Picture glance card
camera_image: camera.ffmpeg
entities:
type: picture-glance

2 Likes
9

did you actually try it with the link I provided?

I’ve created this camera:

camera:
  - platform: generic
    still_image_url: http://api.buienradar.nl/image/1.0/RadarMapNL?w=500&h=512
    name: Buienradar

  - platform: ffmpeg
    input: https://www.dwd.de/DWD/wetter/wv_allg/europa/film/vhs_Europa_Wind_360.mp4 
    name: Wind in Europa

but all I get is still image in the frontend:

46
, and if I click it for more-info the famous ? shows:

40

this happens on all camera feeds btw, so not specific to ffmeg

funny thing is that my buienradar camera is moving as it should, while it uses the still_image_url …

10

I’m also interested in doing this… but sometimes the easiest things are the hardest in Home Assistant, I really can’t understand why it is still not possible to play just a simple mp4 video file in HA.

However, this is my solution:

  • Setup your webserver to reverse proxy a specific subpath (like /video)

For example this is how it looks like in my nginx config:

    location ~ ^/videos  {
        root    /data;
        try_files $uri $uri/index.html;

        # kill cache
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        if_modified_since off;
        expires 1m;
        proxy_cache off;
        etag off;
    }

Create a iframe card in HA (via Lovelace or via configuration.yaml and point it to http(s)://localhost/videos:

panel_iframe:
  eta:
    title: 'Stream'
    url: 'https:/localhost/video/'
    icon: mdi:fire

Place a index.html file in your root www folder (in my case /data/videos/) which loads a java video player - for example:

<head>
  <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  <!-- Videoplayer: https://github.com/videojs/Video.js/releases -->
</head>

<body>
  <video id='my-video' class='video-js' controls preload='auto' width='480' height='270' data-setup='{}'>
    <source src='recent.mp4' type='video/mp4'>
    <p class='vjs-no-js'>
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
    </p>
  </video>

  <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
</body>

In my case the video (recent.mp4) is located in the same subfolder, but you can choose also a external source. And yes, It’s ridiculously complicated just to play a simple video file, I wish they would integrate a simple video player. :roll_eyes:

2 Likes
11

The STREAM component simply does not support MP4 as input to an FFMPEG Camera (or generic, local_file). STREAM requires a continuous stream and is not able to handle a video feed that has an end. I had submitted a bug report on this, which was closed due to it not being a bug, but by design. It could be reopened as an enhancement request though.

In any case, displaying mp4 via lovelace is quite simple, using the webpage (iframe) card. The problem with it though is browser caching. If the MP4 file changes, it requires Ctrl-F5 to force the browser to display it (unless the URL is tweaked with a ?v=xxx fake version that changes).

EDIT: Solved the problem with the browser cache/refresh, so now when the MP4 file is updated the lovelace iframe view is automatically updated as well. See this post for details. This also works for updating any URL in any lovelace card displaying a URL.

13

Like this. Easy and straightforward Play MP4 files or stream HTTP/RTSP in Lovelace

14

@Mariusthvdb Solution is here Play MP4 files or stream HTTP/RTSP in Lovelace

1 Like
15

Here’s another solution to play mp4 files in the dashboard that worked for me: