Play MP4 files or stream HTTP in Lovelace

Share your Projects!
21

That I need to remedy with a plugin. Should work out of the box but guess not true.

For better rtsp support streamedian.js is another option.

22

Iā€™ll have to try to figure that out. My rtsp streams arenā€™t working as is.

content: |
  <video id=vid1 class="video-js" width=400 height=240 controls autoplay=true>
   <source
      src="rtsp://user:[email protected]/live"
      type="application/x-mpegurl">
   </video>
  <script> var player = videojs('vid1'); player.logo({
    image: 'http://192.168.1.43:8123/local/plex_button.png'
  }); player.play(); </script>
title: Test Tube
type: 'custom:html-card'

also tried type="application/rtsp"

23

Iā€™m interested in this for surveillance camera, but my thinking is that this requires the camera to output its stream in HLS format (based on the .m3u8 extension). Correct?

24
25

Hello!

I encounter strange fenomena: I did manage to make video working at my laptop and Android device from the browser, but HA App (android, samr device) does not play it. Do you know the qure for that?

26

anyone made this work with an RTSP source?

27

Interesting but it seems that it does only work locally, right ? I would like to play a MP4 from media browser (not only locally), any idea how do achieve that, please?

28

Thanks for this article, Iā€™ve managed to insert a weather radar video, but unfortunately in fully kiosk browser / android devices video does not start automatically. Does anyone found solution to this?

Thanks!

29

I am using

content: >
  <H1>Latest Motion TP Local</H1> <center><video width=450 height=260  controls 
  class="video-js" data-setup="{}"> <source
  src="/local/snapshots/latest_motion.mp4"
  type="video/mp4"> </video></center>
type: custom:html-card

to display the latest video that my camera created.
I was using the relative URL, otherwise HA will not display the video on the go.

However, on my end the latest motion video is not being shown until I clear the browser cache. Any way to get around this?

30

hello mate did you find a solution regarding browser cache ?

31

came very handy when inserting a radar video, although I still have to figure out how to fill the whole card with the video, so there are no white strips around it

some small additions:

  • if you donā€™t use ā€˜controlsā€™ there will be no play button and search bar
  • you can use ā€˜autoplayā€™ to automatically start the video
  • and there is ā€˜loopā€™ to play the video endlessly - it doesnā€™t allways work, donā€™k know why yet
32

the one question still remains:

does anyone know how to remove the strips around the video to make a card with the video only? :question:

33

Why I canā€™t play a http video if my HA instance is running in HTTPS? I also tried to use NGINX proxy to have the video link as HTTPS and NGINX to remap the HTTPS request to HTTP on another port (5000), but it seems not to workā€¦ Iā€™m trying to play Frigate surveillance video on a card in HAā€¦ Please helpā€¦

34

Thanks a lot for sharing this.

Is there a way to make the mp4 auto play and loop?

Hope someone can help on this

35

Here my card with video in autoplay and loop (including playsinline for iOS devices not going direct to fullscreen) and the card_mod adjustment for using the full card.

Yout have to set your aspect ratio in the last line, easiest based on the original video size and you are done.

type: custom:html-card
content: >
  <video width="100%" controls autoplay loop muted playsinline> <source
  src="YOURVIDEO.mp4" type="video/mp4"> </video>
style: |
  ha-card {
    border: 0;
    padding: 0 !important;
    transition: none;
    overflow: hidden;
    aspect-ratio: 480/270;
  }

For caching issues extend the url of the video with ?[[ sensor.date_time_iso ]] (if you have a time sensor added to your config).

<source src="YOURVIDEO.mp4?[[ sensor.date_time_iso ]]" type="video/mp4">
1 Like