Play MP4 files or stream HTTP in Lovelace

Share your Projects!
1

Simple way of adding streaming capability to your Lovelave without having to use ffmpeg.

Add following files to resources.

https://unpkg.com/video.js/dist/video.js
https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js

then you can simply add lovelace-html-card for playing MP4
If you dont have Lovelace-html-card installed yet find it in HACS.

content: >
  <center><video width=450 height=260  controls  class="video-js"
  data-setup="{}"> <source src="//192.168.0.128/recent.mp4" type="video/mp4">
  </video></center>
type: 'custom:html-card'

and for http or rtsp streaming

content: |
  <video id=vid1 class="video-js" width=450 height=260 controls autoplay=true>
   <source
      src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
      type="application/x-mpegurl">
   </video>
  <script> var player = videojs('vid1'); player.logo({
    image: 'http://YOUR_IP:8123/local/murray-logo.png'
  }); player.play(); </script>
title: Test Tube
type: 'custom:html-card'

You will end up with something like this.

image
image1600×900 479 KB

And full screen works ofcourse.

This is usefull for your security cams.

As you probably noticed video.js and videojs-http-streaming.js are not included in the code.
This is no longer necessary as they are called directly… No need for iframe either.
Let the McGuyver continue.

4 Likes
2

Since my rtsp camera using ffmpeg suddenly freezes since 2 weeks, this come at the right time!

So do I add those two files as resources in configuration yaml? Is it type: module?

3

Remove your url NOW from this forum and change your default username and password!!!

2 Likes
4

Add them via http://YOUR_IP:8123/config/lovelace/resources

5

I’m using YAML mode, so I can’t add them that way. I have to add them in configuration.yaml. I know how to do that, but I don’t know what type I need to use. Most are module, so I guess I’ll just try that.

6

Yes as module.

1 Like
7

Is this the correct HTML card?

8

Yup. That is the exact one.

9

weird. I even rebooted.
image

10

Same here. I don’t understand this, I have added over 30 modules through HACS without issues. I checked the .js file and the syntax should be ‘html-card’ as well.

Edit: used card-preloader and it works now. Maybe it was a coincidence or maybe you need card-preloader for this to work.

Now figuring out how to show up my rtsp stream…

11

pre-loader didn’t do the trick for me. reinstalled html-card and still no love.

12

Did you also reload lovelace resources?

13

where do I do that? I don’t see a place to reload them

14

is it possible to get the contnt of a changing folder in this? im searching for a way to display my camera recordings like this and beside the fact that you have to hardcode the filename, this is really beautiful!!

15

Where exactly did it store your lovelace-html-card under www? custome-lovelace or community?

16

Did you test with this stream https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8?

If you did you try opening your hass instance on your mobile? I bet you are using Chrome on a laptop or desktop. Check if he code I pasted works on your mobile.

17

Yes, that works fine. Although, annoying on iOS since it goes straight to full screen once you load the page.

I think something isn’t working right with the rtsp stream itself.

18

I changed the stream to an MP4 I uploaded to my /www folder. Also tried it on mobile.

image
image623×1280 127 KB

19

I figured it out. I am so dumb. Lol. HACS is not automatically adding the entries in Resources anymore. Did it earlier today with mini media player and I just put 2 and 2 together. Now I just need to get it working with my rtsp streams. I am assuming I need to change type to “application/rtsp”?

20

So now that I have html-card installed correctly. I tried the card with your stream and it only works on mobile. Does it not work with Chrome on Windows10?